.NET CMS DNN

Online marketing blog

Anonym
/ 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
Vindjeruimte
Maatwerk
Vindjeruimte.nl

Vindjeruimte is een online platform dat vraag en aanbod van het maatschappelijk vastgoed bij elkaar brengt. Op de website kun je eenvoudig een ruimte of accommodatie vinden en boeken. Het complete platform wordt door diverse gemeenten en organisaties gebruikt als reserveringssysteem.

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
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
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
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
Combacte
Interactive
COMBACTE

COMBACTE doet op Europees niveau onderzoek naar resistentie van bacteriën. De website heeft een afgesloten ledengedeelte wat fungeert als kennisbank voor aangesloten professionals. Zij kunnen kennis delen, zich inschrijven voor events en onderling berichten sturen.

Bekijk project
Bekijk alle showcases
NJO
Websites
Noordwijkse Jeugd Open

Op de website van de Noordwijkse Jeugd Open kunnen jongeren zich inschrijven voor dit golftoernooi. Hierdoor kan de organisatie van NJO de inschrijvingen in veel kortere tijd verwerken. Deze website is volledig responsive en daardoor geoptimaliseerd voor mobiel gebruik.

Bekijk project
Bekijk alle showcases
Solutions
Websites
Solutions Center

SolutionS is een private verslavingszorginstelling en biedt een integrale behandeling voor doserings- en verslavingsproblemen. De behandeling is gebaseerd op het 12 Stappen Minnesota Model in combinatie met zowel inzichtgevende en lichaamsgerichte therapie als cognitieve groepstherapie.

Bekijk project
Bekijk alle showcases
GVG
Websites
GVG Oliehandel

GVG Oliehandel: internationaal actief in alles wat met benzine, olie en reiniging te maken heeft. Idas heeft deze responsive website gerealiseerd in meerdere talen. Doel is het etaleren van de 6 merken die GVG vertegenwoordigt.

Bekijk project
Bekijk alle showcases