Responsive durch amp.dev

Was ist amp.dev?

Da heutzutage immer mehr Zugriffe über ein mobiles Endgerät stattfinden, hat sich vor allem Google damit befasst, einen Standard für mobile Webseite Formate zu entwickeln. Dabei steht im Vordergrund, dass Webseiten so bereitgestellt werden, dass sie anschaulich sind und auch flüssig laden. Dies sollte natürlich auch noch verzögerungsfrei geschehen. Um dies gewährleisten zu können, handelt es sich bei AMP Seiten um sehr schlanken HTML Code und auch das CSS wird direkt im <head> festgelegt. Jedoch ist durch diese Vorgaben die freie Gestaltung einer Webseite auch eingeschränkt.

Da das JavaScript asynchron geladen wird, kann sichergestellt werden, dass zuerst der Inhalt einer Seite geladen wird und der User zuerst relevanten Inhalt sieht. Indem AMP-Seiten zwischen gespeichert werden, kann die Ladezeit enorm verbessert werden. Hierfür stellt beispielsweise Google gewisse AMP Caches zur Verfügung. Dies führt jedoch dazu, dass bei AMP-Seiten die URL auf eine Google URL abgeändert wird. Dabei ist es egal, welches die ursprüngliche URL war.

Die ersten Anforderungen

Wenn Sie Webseiten mit amp.dev bauen, müssen Sie sichergehen, dass HTTPS als Standard genutzt wird. Ansonsten ist nicht der volle Funktionsumfang gewährleistet. Hier zu gehört zum Beispiel Videos oder iFrames, die einen Zugriff über HTTPS fordern.

Als ersten schauen wir uns den ersten Teil einer amp.dev Seite einmal genauer an.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


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

Auf den ersten Blick sieht es wie eine normale HTML-Seite aus. Jedoch bei genauerem Hinschauen sind einige Unterschiede zu erkennen. Der Dokumententyp wird standardmässig wie eine HTML-Seite definiert.

Im darauf folgenden Tag <html amp lang="en"> wird definiert, das es sich um amp.dev Inhalte handelt. Während in einer reinen HTML-Page <head> und <body> optional sind, werden sie bei einer amp.dev Seite benötigt. Des weiteren wird innerhalb des <script> die AMP-JavaScript Library festgelegt.

Für den Fall, dass Sie eine HTML-Seite mit AMP und eine ohne verwenden, wir mit dem <link> die entsprechende Seite verlinkt. Dies ist zum Beispiel in dem Fall notwendig, damit Google weiss, welche Seite geladen werden soll. Mit <meta name="viewport" content="#""> wird eine Responsive Viewport für die Darstellung des Seiteninhalts bestimmt.

Zum Schluss wird noch ein amp-boilerplate bestimmt, der den Inhalt so lange ausblendet, bis AMP-JS vollständig geladen ist. Nun haben Sie alle notwendigen Anforderungen für eine AMP-Seite gesehen.

Natürlich können Sie aber noch zusätzliche Elemente hinzufügen. Wie oben zu sehen wird noch ein <script> mit angegeben, welches Schema.org einbindet. Dies ermöglicht Ihnen Ihren Inhalt an verschiedenen Stellen anzuzeigen, beispielsweise in dem Google Search Top Stories Carousel. Auf der Nicht-AMP Seite müssen Sie ebenfalls einen Link einfügen, damit die beiden Seite miteinander verbunden sind.

1

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

Sollten Sie jedoch nur eine AMP-Version Ihrer Seite verwenden, müssen Sie dennoch den Link <link rel="canonical"...> einfügen und auf Ihre Seite selbst linken.

Die Verwendung von Tags

Meist können Sie die standardmässigen HTML Tags verwenden. Es gibt jedoch auch Fälle, in denen die Tags nur ähnlich sind und ein wenig angepasst wurden. Dazu gehört beispielsweise das Image-Tag. Es gibt hierfür auch eine Liste, in der Sie sehen können, welche Tags abgeändert wurden oder sogar Tags, welche Sie nicht auf einer AMP Seite verwenden dürfen.

1

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

Das Styling

Auch beim Styling richtet sich eine AMP Seite nach dem HTML Standards und nutzt hierfür CSS. Dabei wird das CSS Styling innerhalb des <head> angegeben. Hierfür können Sie wie üblich mithilfe von Klassen- oder Element Selektoren das Styling vornehmen.

Dabei darf eine AMP Seite jedoch nur ein einziges eingebettetes Style Sheet und Inline-Style haben, welches sich direkt im <head> befindet. Auch beim Styling müssen Sie darauf achten, welche CSS Eigenschaften zur Verwendung erlaubt sind. Diese können Sie in dieser Liste finden. Das Styling in ihrem <head> könnte folgendermasse aussehen.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


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

Während Sie normalerweise CSS nutzen, um die Elemente auf der Seite in ein gewisses Layout zu bringen, gibt es in AMP strengere Regeln, welche zu befolgen sind. Denn aus Performance Gründen benötigen alle Elemente einer AMP Seite von Anfang an eine festgelegte Grösse.

Preview und Validierung

Eine AMP-Seite können Sie ganz einfach aus ihrem Filesystem über einen Webbrowser öffnen. Hierbei ist jedoch nicht gewährleistet, dass alle Elemente funktionieren. Deshalb ist die bessere Variante, die Seite über einen lokalen Webserver zu öffnen.

Ihre neu erstelle Seite können Sie direkt innerhalb des Browser validieren lassen. Dazu rufen Sie Ihre Seite auf und fügen hinter der URL noch #development=1 an. In der Chrome DevTools Konsole können sie nun Validierungsfehler erkennen, wenn Sie welche haben sollten.

Nun haben Sie erfolgreich Ihre erste AMP Seite erstellt. Herzlichen Glückwunsch!