Accelerated Mobile Pages (AMP) vs Responsive Web Design (RWD)

Accelerated Mobile Pages – AMP and Responsive Web Design – RWD have the same basic building blocks which are the creation of mobile pages with the use of HTML, CSS, and JavaScript. There are very many differences between the two. AMP has been said to be a threat to the RWD as it delivers more mobile friendly content in terms of speed.

AMP was developed by Google to cater for the needs of users of mobile phones. It is a subset of HTML and it makes mobile web fast. It was created mainly to deal with the slow and frustrating mobile web. AMP utilizes optimizing techniques for fast loading of web content. It works well with an existing website. This is because it does not require the site to be re-designed. AMP also works well with static content.

AMP being an open initiative, publishers are able to create optimized content which can be loaded instantly everywhere. It is designed to support smart caching, its performance can be predicated and it avails modern mobile content. AMP enables the publishers to continue hosting their own content, innovate on the user experience and integrate advertising and business models with a lot of flexibility. With this, publishers are able to maintain the customers and thus increasing their revenues.

accelerated mobile pages AMP

AMP objectives are:

  • Improve content reading experience on mobile phones
  • Distribute content easily
  • Effective advert monetization on mobile web

The fastness of AMP is achieved because of the following reasons:

  • It does not involve running your own JavaScript even though it relies on AMP JS Engine
  • AMP Pages live on CDN of Google
  • There is Custom Markup Language for content elements that are not texts, for instance, images, videos and audio.

AMP pages rely heavily on the AMP JS Engine while rendering the non-text content. The Custom elements for this content are however ignored by the browser. AMP allows publishers to put their content into Google Search and twitter timeline. Unlike the RSS, which allowed a publisher to put content into the web for free, AMP is way better as the content is syndicated and is bundled with its advertising and analytics.

AMP is a competition to Facebook Instant Articles and the Apple News. It is a delivery system that is based on open web. It is mainly suited for online journalism as it can be used for News articles, Informational Pages as well as for Blogging. The users can get access to news as fast as possible particularly the breaking news.
AMP’s main focus is on the speed. This is made possible because of its loading strategy as well as the pages are located on CDN (Central Delivery Network). To make this possible, you have to add AMP alternative endpoints to standard web pages.

The problem with AMP is that it only supports texts. As stated earlier, the browser ignores non-text content, thus you will not have access to images, videos. It is designed to support text consuming experiences.

AMP consists of three different parts. Namely:

  • AMP HTML
  • AMP JS
  • Google AMP Cache

The AMP HTML is basically HTML but with some restrictions in it for better performance and has other extensions used for coding content beyond that of basic HTML. AMP JS has a library which ensures fast loading of AMP HTML Pages while the Google AMP Cache is used to serve Cached AMP HTML pages.

AMP has analytics. The mode at which they are implemented is very different so as to prevent them from slowing down the website. The implementation is as follows:

  • Amp-Pixel Element- a simple tag is used to count the page views
  • Amp-Analytics Extended Component- it is more advanced than Amp-Pixel as it allows for greater level of configuration for analytics interactions.

responsive web design

Responsive Web Design (RWD)

Responsive Web Design was first released in 2011 and was developed by Ethan Marcotte. It allows for optimal viewing and interaction (easy reading and navigation) with less resizing and scrolling. A website using the RWD adapts a layout that is fluid and flexible grids, has flexible images and it uses the CSS media queries. With the use of CSS and HTML to resize, hide, shrink and enlarge content, its display is so good as compared to a site using AMP.

The media queries are built as an extension of media types. They provide the ability to specify different styles for different browsers and the device circumstances (whether landscape or portrait).

Fluid grids- This is a layout that expands with the page. They are carefully designed when it comes to proposition. With this, a layout can squeeze into a small phone and stretch in a huge screen like that of a laptop.

RWD suggests that the design and development of a website should be able to respond to the users’ behavior as well as environment based on the size of the screen, the platform and the orientation. Therefore, when a user switches from maybe an iPhone to a laptop, the website should automatically detect this and should also switch to accommodate for scripting abilities, image size and resolution. This in turn eliminates the need for different designs for different devices.

responsive websites

RWD is mainly focused in rendering content that is suitable for all devices, whether is a desktop computer or a mobile phone unlike AMP which works only for mobile devices. It is a method of organizing as well as designing a website so that it can work on various devices without any restriction. Due to this reason, RWD is more flexible than AMP.
The problem with it is that, it replaces the current website. It requires that a website be re-designed. However, it can be used for any website. It works well for web forms and custom applications. It fails on the speed and thus it is not user friendly.

Pages that include data tables are a major challenge for RWD. With the data tables being wide, trying to zoom out to see the whole table, it becomes so small that you can hardly see it. Zooming in the table becomes a problem too as you have to scroll both vertically and horizontally to read it. This issue has been addressed with the formatting of data table into a pie chart or a mini-graph. The context-aware (images) serve the purposes of responsive designing as these images respond differently to different devices.

From the explanations above, Responsive Web Design proves to be the best as it avails content which is available for any devices regardless of its size or operating system. AMP, on the other hand is absolutely fast and it is what the consumers need but with the problem of ignoring non-text contents it is not the best. If Google can address this problem, it will be absolutely wonderful to use the AMP.

AMP is criticized for being a subset of HTML. This absolutely should not be the case as long as it delivers a great speed it is good. However, it is not a threat at all to the RWD.

Say Hello! Don’t be shy.