How to develop Accelerated Mobile Pages (AMP)?
Finally, the first Accelerated Mobile Page (AMP) in DNN has been developed. At Idas Internet & ICT we developed an AMP HTML Document for dnn-hosting.nl.
What are Accelerated Mobile Pages (AMP)?
So before we dive into the AMP HTML you first need to know what AMP exactly is. According to Stackoverflow AMP HTML is a project led by Google to make the mobile web faster. It’s a set of custom HTML tags, a JavaScript library, and a cache for AMP-compliant pages.
In practice this means that AMP HTML replaces HTML to ensure performance on mobile devices. That’s actually the reason why Google introduced AMP. Google explained their vision on the mobile web in this video.
AMP HTML replaces several HTML and CSS tags. We’ll discuss some of those later. Before you start with AMP you should take a look at the AMP Github page.
Before you start with AMP HTML
During the development of our first AMP HTML page we discovered that the structure of AMP is slightly familiar with Polymer. So, to get the most out of AMP you should know some important components, attributes and restrictions. We’ll discuss those in the next paragraph.
A valid AMP HTML Document contains the following code:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="self.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1">
<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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>A valid AMP HTML Document</title>
</head>
<body>beautiful AMP HTML Document.</body>
</html>
AMP Components
In AMP HTML you can use a set of custom elements. Therefore, a lot of functionalities, like Bootstrap navigations, won’t work. So, it’s very helpful if you know some important AMP components. Check the documentation about components at the official AMP webpage.
There are two kinds of components. The ones that are built in the AMP framework and the ones that you need to call in order to make use of it. AMP has three built-in components: amp-video, amp-pixel and amp-img. You can just make use of them without adding a JavaScript library. Besides built-in components, AMP also offers 50+ non-built-in components. In the next paragraph we'll discuss some important components.
amp-sidebar
The amp-sidebar is a non-built-in component. Therefore, the component uses a JavaScript library, which you have to add to the <head> of your webpage.
The amp-sidebar allows you to to toggle some element on click. For example, you can use the amp-sidebar to replace your primary navigation. Why? Because you can't use external JavaScript libaries in combination with AMP.
If you want to use the amp-sidebar, add the following code to year <head>:
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
For the toggle-button, add the following AMP HTML:
<button on="tap:sidebar.open"></button>
Yup, it’s just a JavaScript function, which will be triggered on tap. You can place the button wherever you want.
The amp-sidebar cannot be nested in other HTML elements, so the <body> must be the parent element. To let the sidebar appear, add the following AMP HTML:
<amp-sidebar id='sidebar' layout="nodisplay" side="right">
<amp-img class='amp-close-image' src="/img/ic_close_black_18dp_2x.png" width="20" height="20" alt="close sidebar" on="tap:sidebar.close" role="button" tabindex="0">
</amp-img>
<ul>
<li>
<a href="/">Home</a>
</li>
<li> Nav item 1</li>
<li>
<amp-fit-text width="220" height="20" layout="responsive" max-font-size="24">
Nav item 2 – example of amp-fit-text;
</amp-fit-text>
</li>
</ul>
</amp-sidebar>
If you aren’t familiar with AMP HTML you recognize some new tags, such as <amp-img> and <amp-fit-text>. Be aware of the fact that AMP HTML uses his own components / attributes. For an overview of all new html tags, check out some documentation.
amp-img
The amp-img tag is a built-in component. In contrast to <img> the amp-img isn’t a self-closing element. If you use the element, AMP forces you to configure height and width as inline-style. To combine this with the new attribute layout="responsive", the same effect as (Bootstrap's) img-responsive will be reached. So I’ll recommend using the next line of code:
<amp-img src="image.jpg" alt="image" height="40" width="80" layout="responsive"></amp-img>
Takeaway: Use the AMP attribute layout="responsive" in combination with amp-img.
amp-analytics
To track user’s behavior, you must add the not-built-in amp-analytics component. It’s your choice if you want to use Google Analytics or Google Tag Manager. Google Tag Manager let you track AMP events and all other kind of events which aren’t supported in GA. Anyway, I’ll show you the easiest way of storing userdata.
Like all not-built-in components you must add a script to make use of the component. Add the next line to your head:
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
Tracking userdata in AMP is regulated by JSON. It’s quite the same as developing dataLayers in Google Tag Manager. For an entire overview of properties, read the amp-analytics documentation.
Add the next line of code right after your body tag to track pageviews.
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXXXX-XX"
},
"triggers": {
"defaultPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
Restrictions in AMP
Happily, AMP gives us the opportunity to debug our AMP webpages. You can debug your page at https://validator.ampproject.org/ or by adding #development=1 to your URL and debug the console. For all validation documentation, you can check out the AMPProject page or just install the chrome plugin.
Supported CSS
You can’t just transform your existing stylesheets to AMP-friendly CSS. Why? Because there are several restrictions and disallowed styles. The most important are shown in the table down here:
| Banned style | Description |
|---|---|
| Inline style attributes | All styles must be defined in the head of the page, within a style amp-custom tag. |
| !important qualifier | Usage is not allowed. This is a necessary requirement to enable AMP to enforce its element sizing rules. |
| * (universal selector) | Negative performance implications. |
| Pseudo-selectors, pseudo-classes, and pseudo-elements | Restrictions.> |
| -amp- class and i-amp- tag names | Could be used to simulate the universal selector. |
| Behavior, -moz-binding, filter | Security or performance issues. |
| Transition property | Restricted. |
| @keyframes | Restricted. |
You can add your own CSS only inline in the head of the AMP HTML Document. It need to be inside the <style amp-custom> tag.
<style amp-custom>
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
/*Your custom CSS*/
</style>
So, basically you need to develop an entire AMP stylesheet. I recommend copy paste your existing stylesheet and remove all forbidden properties. Next customize your CSS if necessary and validate.
Anyway, be aware that AMP is developed for faster mobile pages. Therefore, external CSS libraries such as Bootstrap cannot be used. AMP delivers his own functionalities, so make use of them before you dive into Bootstrap-driven solutions. If you still want to make use of Bootstrap (like, grids & stuff) you have to create your own custom Bootstrap.css file, which you can generate at custom bootstrap.
Takeaway: AMP delivers his own functionalities, so make use of them before you dive into Bootstrap-driven solutions.
To see our results; take a look at dnn-hosting and see how we configured AMP in DNN or check how we developed it in DNN.