The AMP project is a cross-company effort sponsored by Google to create mobile web pages with the fastest load times possible. It uses a proprietary HTML variant to offer a stripped down but lightning-fast UX. AMP pages load almost instantly, and get a favourable Pagerank bump to boot. In this tutorial, we go over the basics of writing an AMP page.
How many users bounce from a mobile page if it doesn’t load within 3 seconds? The answer, backed by Google’s own research, is a staggering 53%. If you’re at all serious about earning clickthroughs and conversions, you’ll take any opportunity to make your page more efficient. That’s where AMP comes in.
An AMP page differs from standard HTML in the following ways:
Putting it all together, you get something like the boilerplate from the official validator:
A few more changes before we really get into writing our actual markup:
The following tags do not work in AMP pages:
<script> <base> <frame> <frameset> <object> <param> <applet> <embed>
The following tags need to be modified:
<img> → <amp-img> <video> → <amp-video> <audio> → <amp-audio> <iframe> → <amp-iframe>
And one last major change:
CSS style tags must have the attribute
<amp-custom>. Remember all CSS must be inline. AMP also restricts some CSS styles, though the list is much shorter than the restricted HTML:
will not function on an AMP page. Additionally, the transition property and @keyframes style are restricted to only GPU-accelerated properties: currently this means opacity, transform, and -vendorPrefix-transform. Regarding permitted fonts, @font-face has no restrictions, but you if you want to use to bring them in, you can only get them from the following approved vendors: Typography.com, Fonts.com, Google Fonts, TypeKit and FontAwesome (requires BootstrapCDN).
And that’s it! That’s the basics. There’s obviously a lot more to it than that, but those tools will put you well on your way to making elegant and functional AMP pages. There’s an art to AMP: you’re trying to make a satisfying and effective UX with a restricted set of tools. If implemented poorly, it can hurt your site-any users you gained by loading quickly will be driven away by an ugly or unintuitive UI. Switching your mobile pages to AMP a great thing to do, but it’s really important to do it right. It’s fairly simple conceptually, but it will take time and practice for a developer to really get the most out of it.
If you need an AMP mobile site made, CodeClouds has the mobile / web development experts you need to get a fast mobile optimized site that ranks higher on Google. Consider hiring one of our dedicated offshore development teams today!
Stay in tune and never miss a post when you subscribe.