CMS, UI Development

AMP Technical Blog

What’s happening around?

In today’s world, the mode of accessing the data has transformed. Earlier it used to be via desktop but with the shift to mobile, the way we consume content has changed. Mobile has become our main focus. Mobile web suffers from slow and cluttered sites. Mobile Apps create silos and reduce diversity. Thus, laying an overall bad user experience.

Study says that 40% of people abandon a website that takes more than 3 seconds to load. People take out very limited time from their busy schedule and they won’t wait that long for a webpage to load on their mobile.

What is required? – AMP

We must get something which is faster to load, easy to implement, more mobile/ user friendly and gives strong incentives. Today, the expectation is that content should load super-fast and be easy to explore. The reality is that content can take several seconds to load, or, because the user abandons the slow page, never fully loads at all.

Last year 2016, Google® introduced the concept of Accelerated Mobile Pages (“AMP”) project which is an open source initiative to improve the entire mobile content ecosystem for everyone — publishers, consumer platforms, creators, and users.

How AMP works?

Accelerated Mobile Pages are just like any other HTML page, but with a limited set of allowed technical functionality that is defined and governed by the open source AMP spec. Just like all web pages, Accelerated Mobile Pages will load in any modern browser or app webview.

AMP files take advantage of various technical and architectural approaches that prioritize speed to provide a faster experience for users. AMP developers can use a rich and growing library of web components that offer the ability to embed rich media objects like video and social posts, display advertising, or collect analytics. The goal is not to homogenize how content looks and feels, but instead to build a more common technical core between pages that speeds up load times.

In addition, AMP files can be cached in the cloud in order to reduce the time content takes to get to a user’s mobile device. By using the AMP format, content producers are making the content in AMP files available to be cached by third parties. Under this type of framework, publishers continue to control their content, but platforms can easily cache or mirror the content for optimal delivery speed to users. Google has provided the Google AMP Cache that can be used by anyone at no cost, and all AMPs will be cached by the Google AMP Cache. Other companies may build their own AMP cache as well.

In summary, the goal is that the combination of limited technical functionality with a distribution system built around caching will lead to better performing pages, and increased audience development for publishers.

Benefits of AMP?

Speed matters and instant is the ideal. Research has shown higher bounce rates associated with slower-loading web pages. Using the AMP format will make it far more compelling for people to consume and engage with more content. But this isn’t just about speed and performance. AMP also want to promote enhanced distribution so that publishers can take advantage of the open web’s potential for their content to appear everywhere quickly — across platforms and apps — which can lead to more revenue via ads and subscriptions.

AMP implementation

Required mark-up

AMP HTML documents MUST:

  • Start with the doctype <!doctype html>.
  • Contain a top-level <html >tag (<html amp> is accepted as well).
  • Contain <head>and <body> tags (They are optional in HTML).
  • Contain a <meta charset=”utf-8″>tag as the first child of their <head>
  • Contain a <script async src=”https://cdn.ampproject.org/v0.js”></script>tag as the second child of their <head> tag (this includes and loads the AMP JS library).
  • Contain a <link rel=”canonical” href=”$SOME_URL” /> tag inside their <head>tag that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists.
  • Contain a <meta name=”viewport” content=”width=device-width,minimum-scale=1″>tag inside their <head> It’s also recommended to include initial-scale=1.
  • Contain the following in their <head>tag: <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Include an Image

Most HTML tags can be used directly in AMP HTML, but certain tags, such as the <img> tag, are replaced with equivalent or slightly enhanced custom AMP HTML.

To demonstrate what additional markup could look like, here’s the code required to embed an image into the page:

<amp-img src=”welcome.jpg” alt=”Welcome” height=”400″ width=”800″></amp-img>

Modify the presentation

AMPs are web pages; any styling to the page and its elements is done using common CSS properties. Style elements using class or element selectors in an inline stylesheet in the <head>, called <style amp-custom>:

<style amp-custom>  /* any custom style goes here */  body {    background-color: white;  }  amp-img {    background-color: gray;    border: 1px solid black;  }</style>

Validate

Next, make sure that your AMP page is actually valid AMP, or it won’t get discovered and distributed by third-party platforms like Google Search. To validate:

  1. Open your page in your browser.
  2. Add “#development=1” to the URL, for example,http://localhost:8000/released.amp.html#development=1.
  3. Open theconsole and check for validation errors.

Linking pages with <link>

In order to establish that a non-AMP page and an AMP page should be treated as being “paired” together, we add information about the AMP page to the non-AMP page and vice versa, in the form of <link> tags in the <head>.

Add the following to the non-AMP page:

<link rel=”amphtml” href=”https://www.example.com/url/to/amp/document.html”>

And this to the AMP page

<link rel=”canonical” href=”https://www.example.com/url/to/full/document.html”>

If you only have one page, and that page is an AMP page, you must still add the canonical link to it, which will then simply point to itself:

<link rel=”canonical” href=”https://www.example.com/url/to/amp/document.html”>

AMP with AEM

We have created a project with few components like Image, Video, Carousel and Form.

In AMPs, creating these components are easy with the help of AMP HTML tags.

In JSP/ HTML, creating carousel component is always a challenge and need good JavaScripts to be added but with AMP this can simply be achieved by using <amp-carousel> tag and adding a script in the header tag for the same.

AMP Carousel Component:

Rendered Component:

Similarly, we have AMP HTML tags for Video, Image and Form Components.

AMP Video Component:

For video, we have <amp-youtube> tag.

In the above snippet, we can see that we are pulling the videoid from the dialog; in case we need to update the video on the page.

Rendered Component:

AMP Form Component:

Rendered Component:

AMP Image Component:

For Image, we have <amp-img> tag.

In the above snippet, we can see that we are pulling the custompath from the design dialog; in case we need to update the image on the page.

Rendered Component:

After successful creation of above AMP components, we have created a project and a page to see how they render.

Following is the project structure:

The Script for testmobile/body.html:

The script for testmobile/content.html:

The script for testmobile/header.html:

And finally the rendered page:

About The Author

Leave a Reply

*