Web Stories: Wat is het en hoe kunnen we ze maken?

Auteur: Wiljan Slofstra

Op orangetalent.nl hebben we een uitleg geschreven over AMP- of Web Stories. Mocht je nog niet bekend zijn met AMP en AMP/Web Stories dan kan je die eerst lezen.

AMP Stories bieden ons de mogelijkheid om stories zoals we die kennen van verschillende sociale media te kunnen toepassen op websites.

AMP Stories kunnen op verschillende manieren ontwikkeld worden, met tools, met plugins of direct met code. Wij gaan vandaag de laatste oplossing onderzoeken en je een korte inkijk geven in de code voor AMP Stories.

Wat is AMP?

Voordat je begint met AMP Stories moet je begrijpen wat AMP is. AMP is een framework wat voornamelijk bestaat uit een hoop standaard componenten. Daarnaast geeft AMP ook richtlijnen waaraan een webpagina moet voldoen. AMP geeft bijvoorbeeld een grens aan hoeveel CSS of HTML je mag gebruiken en eigen JavaScript schrijven is alleen mogelijk middels een component. Alles in AMP is erop gericht om snelle pagina's te bouwen die een consistente gebruikerservaring bieden.

Door alle limitaties die AMP biedt kiezen de meeste websites ervoor om een AMP en niet-AMP versie van een pagina aan te bieden. Als je bijvoorbeeld kijkt naar een NU.nl artikel in de <head> hebben ze een link naar de AMP versie gemaakt.

amphtml regel in de HTML broncode van een pagina

Op die URL zie je een vrij uitgeklede versie van het artikel (links is niet-AMP, rechts is AMP):

Een voorbeeld van een Nu.nl artikel met aan de linkerkant de niet AMP versie en aan de rechterkant de AMP versie

Een AMP pagina is vrij standaard HTML met een aantal toevoegingen:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <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>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

Bovenaan zie je een <script> tag die de AMP bibliotheek inlaadt. Deze bevat een aantal standaard componenten die je kan gebruiken op je pagina zoals <amp-image> en <amp-video>. Maar bovenal wordt je aangeraden standaard CSS en HTML te schrijven met een aantal limieten zoals maximaal 75KB aan CSS en enkel inline stylesheets.

Dit is een hele basis uitleg van wat AMP is, voor verdere uitleg en mogelijkheden verwijs ik je graag door naar de AMP website.

Maar wat zijn AMP Stories?

AMP Stories zijn een extensie op wat AMP doet met pagina's, maar dan om stories te maken. Dit is een compleet losstaand onderdeel van AMP met zijn eigen framework. AMP Stories geeft je net als het AMP framework een aantal standaard componenten om mee te werken, maar bij stories natuurlijk gericht op stories.

Je hebt onder andere de volgende elementen:

  • <amp-story> dit is het overkoepelende element die om je hele pagina heen ligt. In principe is de enige direct child van het <body> element.
  • <amp-story-page> elke pagina in je story wordt omringd met dit element.
  • <amp-story-grid-layer>, hiermee kan je verschillende lagen maken, maar ook bepaalde layouts uitwerken.

Er zijn er nog meer, maar dit zijn de elementen waarmee je een een Web Story uiteenzet. Een volledige story/boilerplate ziet er als volgt uit:

<!DOCTYPE html>
<html amp lang="en">
  <head>
    <meta charset="utf-8" />
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script
      async
      custom-element="amp-story"
      src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
    ></script>
    <title>Hello, amp-story</title>
    <link rel="canonical" href="http://example.ampproject.org/my-story.html" />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1,initial-scale=1"
    />
    <style amp-boilerplate>
      ...geknipt
    </style>
  </head>
  <body>
    <amp-story
      standalone
      title="Hello Story"
      publisher="The AMP Team"
      publisher-logo-src="https://example.com/logo/1x1.png"
      poster-portrait-src="https://example.com/my-story/poster/3x4.jpg"
    >
      <amp-story-page id="my-first-page">
        <amp-story-grid-layer template="fill">
          <amp-img
            src="https://example.ampproject.org/helloworld/bg1.jpg"
            width="900"
            height="1600"
          >
          </amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <h1>Hello, amp-story!</h1>
        </amp-story-grid-layer>
      </amp-story-page>
      <amp-story-page id="my-second-page">
        <amp-story-grid-layer template="fill">
          <amp-img
            src="https://example.ampproject.org/helloworld/bg2.gif"
            width="900"
            height="1600"
          >
          </amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <h1>The End</h1>
        </amp-story-grid-layer>
      </amp-story-page>
      <amp-story-bookend src="bookendv1.json" layout="nodisplay">
      </amp-story-bookend>
    </amp-story>
  </body>
</html>

Bovenaan zie je nog steeds het algemene AMP framework (omdat je standaard componenten zoals <amp-image> kan gebruiken) gevolgd door de AMP Story bibliotheek die je een aantal story specifieke elementen geeft.

Binnen de <body> zie je eerst een overkoepelend <amp-story> element gevolgd door een aantal pagina's.

Als laatste zie je een apart element <amp-story-bookend>. Bij een AMP story kan je met een bookend beslissen wat er gebeurd als de story is doorlopen. Zo kan je bijvoorbeeld deel opties geven of een call to action waarmee gebruikers bijvoorbeeld een product kunnen bekijken. Een bookend wordt opgemaakt als een JSON bestand waarbij je de specificatie hier kan bekijken.

Je AMP Story testen

AMP geeft een hoop richtlijnen waar je mogelijk niet altijd rekening mee houdt. Het kan bijvoorbeeld gebeuren dat je een standaard <img> element gebruikt, maar dat mag niet binnen een AMP pagina of story.

Om dit snel te kunnen testen is er een validatie modes in de AMP bibliotheek. Je kan deze accepteren door achter je URL: #development=1 te plakken. In je console van de developer tools krijg je fouten of waarschuwingen te zien. Of, nog liever, "AMP validation successful".

Als een demo voor ons artikel hebben we een web story gemaakt op: https://www.orangetalent.nl/stories/web-stories/. Je kan de validatie daarvan bekijken door naar https://www.orangetalent.nl/stories/web-stories/#development=1 te gaan, waarna je op het moment van schrijven een "AMP validation successful." te zien krijgt.

Conclusie

Dit artikel geeft je een basis van AMP en hoe je een AMP story kan opbouwen. Voor de volgende stappen verwijs ik je graag door naar de AMP website waarop uitgebreide documentatie en tutorials aanwezig zijn. Je kan daar ook kijken naar standaard templates die door het AMP team zijn gemaakt.

Wij zijn benieuwd wat je met AMP en AMP Stories gaat maken. Laat dit ons vooral weten via Twitter (@orangetalentdev) of Instagram (orangetalent.dev).