amp-vs-rwd
Each days technology became more advance and innovative than they used to be, tech gadgets are now becoming smaller and smaller, who would’ve guess that today you can easily carry a 1TB storage USB in your hand, in old days, you need to carry a full stack of ‘diskette’ with capacity only around 1.44MB each. That’s what we call technology achievement.

In today modern web, website developer not only putting focus on desktop application but on mobile application also. According to research, mobile will be essential to everyone in the future, however even in present time, everyone i’ve known already had at least one mobile gadget around them, its either a laptop, iPad or iPhone. Today we’re going to discuss the difference and advantage between AMP and RWD, but first thing first, what is AMP? what is RWD? If you’re not familiar with the internet slang, please let me explain.

What is RWD?

Responsive web design (RWD) is one of the trending topic in modern web. RWD is an approach to web design aimed at allowing website view-able in both desktop and smaller screen such as mobile phone. Responsive web design is the earliest solution on the issues that arise when designing for multiple devices. In more simple term, you can resize your website to any size in browser and it’ll still view-able to say the least. RWD was first introduced by Ethan Marcotte, The Godfather of RWD 🙂

What is AMP?

The AMP Project or Accelerated Mobile Pages were started by Google, It purpose is to develop a highly optimized method of delivering content to mobile devices. AMP utilize a number of optimization techniques for lightning-fast load times in mobile devices. It is a highly specialized way of making mobile web pages to load instantly without wait time hence improve user’s browsing experience.

How would AMP affect users?

Let’s answer couple of question on all of our mind about the difference in user experience when using AMP for modern mobile web approach.

Speed and Load Time

AMP is incredibly fast, i mean like 1 second load time. This is because All AMP pages were cache and served by Google’s CDN, where RWD will load your site at the same speed as your desktop, might even be slower.

Content Flexibility

Although AMP is lightning-fast but you cannot run your own JavaScript because AMP will have their own custom markup language for content elements that aren’t text such as images, video and embed code. You will lose the content originality. All your hard work on beautify your content for marketing and exposure will not be appearing in AMP pages. Yes, it will be somewhat plain text with no extra whistle and bells.

Search Engine Ranking Position in Mobile

AMP currently not a ranking factor (yet!), However it does have some impact on clicks, impressions, and user browsing experience. In terms of organic visibility, AMP can only be seen in the Google News Carousel right now. Google is currently holding the News Carousel above-the-fold on mobile, therefore, pushing down organic search results for none AMP pages. So, if you’re not serving AMP pages in mobile, then you’ll most likely going to see a decrease in traffic, clicks, impressions, and user engagement from mobile devices.

Monetization Your Content in AMP

Mobile Monetization is becoming more popular among publishers, with higher CPM rates than its desktop counterpart. However this will be a disappointment for mobile publisher, since AMP pages were served with their own custom markup language. Almost 90% mobile advertising network did not support monetization in AMP. Although after the increase usage of AMP pages by publisher, many mobile advertisement company already started to adapt and apply custom AMP language code in their own native ads code.

Organic Mobile Traffic

Some publisher experience an increase of mobile traffic since the implementation of AMP pages for their website. With AMP pages being prioritize in Google organic search result, it’ll not come as a surprise if you’ll have a surge of traffic coming from mobile devices.

AMP is easy to setup

Unlike RWD, AMP is easier to setup for website. If you’re using RWD approach, you’ll need to edit the css using media query and for a non-developer user, this will definitely won’t be easy. However if you’re running your website in WordPress CMS, it’ll be much easier. A plug and play method using AMP plugin only. This plugin is release by WordPress very own Automattic so users using WordPress can easily setup AMP for their posts.

Here’s some snippet to improved your WordPress AMP plugin usage.

Add Google Analystic, Google Web Fonts and Fontawesome into AMP Pages
add this to your theme functions.php, replace “UA-XXXXXXXX-4” with your own GA code.

/*------------------------------------------------
Description: amp script call in amp header
------------------------------------------------*/
function dez_add_amp_scripts() { ?>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:300,300i,400,400i,600,600i,700,700i" rel="stylesheet">
<?php }
add_action('amp_post_template_head','dez_add_amp_scripts');

/*------------------------------------------------
Description: amp google analytic
------------------------------------------------*/
function dez_add_amp_ga() { if( !is_user_logged_in() ) { ?>
<amp-analytics type="googleanalytics" id="analytics-amp">
<script type="application/json">
{
    "vars": {
        "account": "UA-XXXXXXXX-4"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview"
        }
    }
}
</script>
</amp-analytics>
<?php } }
add_action('amp_post_template_footer','dez_add_amp_ga');

If you’re looking for alternate solution other than AMP for your WordPress site’s mobile user, there’s ton of responsive WordPress themes available around WordPress community.

Conclusion

AMP provides mobile users with lightning-fast article readings, relatively improve user browsing experience. With the increase of mobile users day by day, its just a matter of time, other mobile platform competitor such as Facebook beginning to apply ‘instant article’ for its users. I think that mean the article will finish load under 1 second, maybe 0.05 second, “take that Google 🙂 “, one could only hope for.

Related Articles:

Website Development
4 Web Design Blunders That Can Cost You in the Form of Lost Customers
Website Development
The First 4 Requirements to Start a Website on Your Own
Website Development
How to Create a Well-Organized Blog