AMP format overview

Overview

The world moves forward each day pushed mostly by the advance of the technologies and all the new requirements we all come to have each day. Just a few years back having a couple of hundred colors on your phone was like WOOW! And today, almost half of the devices, that we can hold in our hand, are able to access the Internet and we guess the most natural thing to happen is the way pages look like and act nowadays. The mobile friendly web pages are no longer a luxury or an extra but rather a standard we all follow creating the next website to be taking place out there.

But as it looks like it is not enough for the Internet giants like Facebook and Google - just having a responsive page ready to react to the width of the screen of the device displaying it adjusting to fit it best. We guess that's why some sub –versions of the regular HTML markup come to take place like the AMP or Accelerated Mobile Pages – project powered and therefore pushed up by Google with the claim it comes to make browsing from mobiles with not so strong hardware and a limited Internet access speed – much easier, faster and pleasant experience. In this overview, we'll give answers on the more frequent questions of yours.

Just what is AMP?

In just a few words – regular markup stripped down to the bone, tuned up with some additional components from the Google AMP library. In an AMP page, you are not allowed to use any external stylesheets or scripts different than the ones from the AMP library. All the custom styling you might need is limited to 50K in size and takes place in a single <style> tag inside of the page. Styling inline or using !important in your declarations is forbidden as well

Some of the regular HTML tags are forbidden as well and some – replaced by AMP specific ones – the most bright example - <div class="img"><img></div> tag becomes <amp-img>

The best way to know is a web page AMP or not?

The AMP project comes with a strict validation routine which can be called either in the browser by appending #development=1 to your site's URL and looking in the Console for any verification errors reported or you could use the online verification tool placed at https://validator.ampproject.org

Can a web page be half of AMP?

No. A single error is enough for the page to not get verified.

Precisely what about the profits which we'll gain?

The benefit is a better care from Google and some of the social networks. What the Internet giant promises are the AMP versions of your pages will get cached on Google and some others servers for almost instant access when a user attempts accessing them from a mobile along with a better placement of the pages in the search results when a search from mobile has been done.

Is it realizable to have only AMP version of a web page ?

Theoretically – yes. In case you decide giving up most of the functionality, appearance and expressive means the modern web pages have to offer – yes, you can have only an AMP page but the better approach is having an AMP mirror to your content along with your normal web page that taking place on your server.

Is it actually possible to employ the code of the Bootstrap page we currently own and make it in to AMP?

Theoretically – yes. If you find a way getting along without all the native bootstrap.js library, strip down your responsive framework's stylesheet to 50K, deleting all the rules your particular page doesn't use, replace the unsupported components like the images slider and lightbox with their AMP alternatives and of course – replace all the forbidden tags with the ones which should be taking their places – yes, you could have your bootstrap page transformed into AMP and maybe – even pass the validation. It seems to us, however, AMP are rather aiming to take place as stand-alone way pages that are getting done providing some means for achieving responsive behavior – after all the mobiles are the ones the whole project claims to be all about.

Is it realizable to feature some sort of forbidden or not actually sustained web content on my AMP page and get it verified?

Theoretically – yes. If you host that content elsewhere and include it not via iframe but the element that replaces it - <amp-iframe> and comply to some extra requirements like placing it at least 600px or 75% of the viewport away from the page and use HTTPS for fetching the content. Additionally, if you want to host the included content on the same server as the AMP page you'll need to add some extra adjustments in order the content to get displayed.

Exactly how the things get executed in AMP?

The short answer – with attribute-value pairs and a plenty of add-on scripts. We suppose, since as they say their scripts overrule the whole page loading/rendering process AMP need a handful of new their own attributes, each one – requiring a value from a predefined set of values in order for the page to work properly and get validated. The AMP specific attributes overrule the entire code and you can hardly spot a lone class from line to line. Even such things as maintaining an image's proportions needs explicitly defining its width and height. Good thing to note is you can't miss a part of AMP since it's all pretty well branded having this amp- prefix all around. The AMP core might have started as a simple script for handling the page load but we guess somewhere along the way it turned out into something a bit different, since almost anything you would need to add to your AMP pages requires first including the script handling it.

You demand an iframe?

No - it's called amp-iframe - integrate the script for it, first. You need a content slider – another script, a lightbox – one more. The bottom line is it's very probable you end up having a little fewer scripts then the types of the elements you are using on your page – each one referenced separately in the page's <head>

What about the productivity?-- author's individual conclusion

AMP might be a great approach to its core idea – like "Let's quickly provide to the end user all the content that he needed on his old phone with slow internet". But we think providing ease of access to something like the online information just can't be passing through so many restrictions in order to become a reality. Ask yourselves and be frank – if you take the word "Google" from the equation would you even bother reading so far about this, or would you drop the topic somewhere around NO EXTERNAL SCRIPTS AND ONLY INLINE STYLING AND THAT'S IT.

The things Google guarantees to push AMP onward:

Cashing of your content and granting faster access to it – there are plenty others providing the same service – these are called CDN's and some of them are around for quite a long specializing in doing only that so it is arguable which service is actually the best and provides the highest access speeds.

Placing the results up in the search list just because a page uses its own technologies. No one can win that battle since the rules are a bit flexible here but let's face it - what should be the leading factor in placing a result up or down – the actual quality of the content or the vendor of the technology being used for creating the page?

Take a look at a number of youtube video guide relating to AMP:

Connected topics:

AMP format approved information

AMP - basic markup

AMP overview