.NET CMS DNN

Online marketing blog

Robert-Jan Kuyper
/ Categorie: Online marketing
How to develop Accelerated Mobile Pages (AMP)?

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. Check the AMP Document of this article.

Screenshot of DNN Hosting in the Google Search Results

 

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
-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>

Negative performance implications and could be used to circumvent other selector restrictions.

 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.

Enthousiast geworden? Mis niets met de maandelijkse DNN nieuwsbrief!

Delen

Printen

Laat een reactie achter

Naam:
Email:
Reactie:
CAPTCHA Afbeelding
Vul de bovenstaande code hieronder in
Reactie toevoegen
Gently
Websites
Gently

Gently produceert reinigings- en onderhoudsproducten voor caravans, campers en boten. De website is in 2 talen beschikbaar en is een showcase van de verschillende lijnen die dit merk vertegenwoordigt.

Bekijk project
Bekijk alle showcases
Aspen
Websites
Aspen Benelux

Het bedrijf Aspen werd in 1988 opgericht aan de kust van het Aspen meer ten noorden van Göteborg in Zweden. Aspen is in veel Europese landen en Canada vertegenwoordigd en is hiermee wereldmarktleider in alkylaatbenzine. Idas heeft deze meertalige website voor Aspen ontwikkeld.

Bekijk project
Bekijk alle showcases
Firelux
Websites
Firelux

Firelux is een zeer schone brandstof voor verplaatsbare petroleumkachels. Deze brandstof is opgebouwd uit extreem zuivere, doorgeraffineerde aardoliedestillaten.

Bekijk project
Bekijk alle showcases
butter
Intranet & Extranet
Butter Group International Transport

Idas is al jaren software leverancier voor Butter Group. Butter is gespecialiseerd in het transport van agrarische producten in geïsoleerde onderlossers door heel Europa. De vernieuwde responsive website is in 6 talen beschikbaar en draagt bij aan de professionalisering van dit internationale bedrijf.

Bekijk project
Bekijk alle showcases
Olympos
Websites
Sportcentrum Olympos

Sportcentrum Olympos is een ruime en veelzijdige sportaccommodatie. Met de meertalige webshop die Idas voor Olympos heeft gerealiseerd, kunnen gebruikers online lessen boeken en betalen. Gevolg van de webshop is een forse besparing, gezien de boekingen niet meer handmatig hoeven te worden aangenomen en verwerkt.

Bekijk project
Bekijk alle showcases
Hovenschool
Websites
OBS de Hovenschool

De Hovenschool is een openbare basisschool, die deel uitmaakt van de stichting Openbaar Onderwijs Deventer. Dit betekent dat zij open staan voor alle kinderen uit de wijk, ongeacht hun achtergrond of levensovertuiging.

Bekijk project
Bekijk alle showcases
Sallandsche
Websites
Sallandsche Golfclub 'De Hoek'

In opdracht van Sallandsche Golfclub 'De Hoek' heeft Idas deze website ontworpen en gebouwd. De baanconditie op de homepage is tevens gekoppeld aan de (tevens door Idas geproduceerde) iPhone App.

Bekijk project
Bekijk alle showcases
KMU
Websites
Koninklijke Metaalunie

Koninklijke Metaalunie is met meer dan 13.000 leden de grootste ondernemersorganisatie voor het midden- en kleinbedrijf (mkb) in de metaal. Idas heeft de nieuwe site ontworpen en gebouwd.

Bekijk project
Bekijk alle showcases
Discovered
Websites
Discovered

Discovered staat voor een breed assortiment van exotische groenten en fruit. Op deze website worden recepten en producten door middel van een catalogus getoond. Gebruikers kunnen o.a. filteren op thema, ingrediënt, aantal personen en moeilijkheidsgraad. Tevens worden er gerelateerde recepten getoond.

Bekijk project
Bekijk alle showcases
FishMasters
Websites
FishMasters

Speciaal voor de internationale markt biedt Fishmasters een deelassortiment aan met het Pure Fish Label. Producten met dit label bevatten geen e-nummers, geen kleurstoffen, geen conserveringsmiddelen, noch smaakstoffen. De website is opgeleverd in 6 talen.

Bekijk project
Bekijk alle showcases