AMP Story: Storytelling für das mobile Web

Google AMP Story: Erweiterte Gestaltungsmöglichkeiten für AMP-Seiten
Keine Kommentare

Googles AMP Pages sind inzwischen ein weit verbreitetes Format für das mobile Web. Mit AMP Story ergänzt Google das Format nun um eine Option für das grafische Storytelling. Die Ankündigung verspricht, dass Entwickler mit AMP Story komplexe grafische Elemente performant auf Mobilgeräte bringen können.

AMP Story ist ein neues Format von Google für das grafische Storytelling im mobilen Web, das auf den bekannten AMP Pages aufbaut und dieses erweitert. Derzeit steht AMP Story als Developer Preview zur Verfügung. Die Vorstellung des neuen Formats im Google Developers Blog verweist darauf, dass AMP Story vor allem eine gute Performance für die mobile Darstellung aufwändiger grafischer Elemente bieten soll. Außerdem sei das neue Format in das bereits bestehende AMP-Ökosystem eingebunden, sodass Discovery-Plattformen die schon vorhandenen Techniken wie das Pre-Rendering und optimierte Ladeverhalten von Videos auch auf AMP Story anwenden können.

AMP Story: Grafische Erweiterung von AMP Pages

AMP Story bringt außerdem einige vorgefertigte Templates für das Layout sowie standardisierte UI-Controls und Komponenten für die Gestaltung von Stories mit. Dennoch seien Designer und Entwickler frei in der Gestaltung der Stories; so wird das neue Format im Google Developers Blog beschrieben.

Auf der Website des AMP-Projekts werden die Features der AMP Stories im Einzelnen vorgestellt. Hervorgehoben werden hier die Unterstützung nativer Bild- und Videoeinbettungen, Animationen und einer Interaktionssteuerung durch das Antippen des Bildschirms. Außerdem sind AMP Stories auch auf dem Desktop nutzbar und können mit den bereits vorhandenen Komponenten aus der AMP Component Library um weitere Funktionen ergänzt werden, wie der Seite entnommen werden kann.

Aufbau von AMP Stories

Das Tutorial zu AMP Stories gibt außerdem einen Überblick über die technische Seite des neuen Formats. Eine AMP Story besteht aus einzelnen Pages, die in verschiedene Layer unterteilt sind, die HTML- und AMP-Elemente enthalten. Im Tutorial wird folgendes prototypisches Beispiel für den Code hinter AMP Stories gegeben:

Aufbau von AMP Stories. Quelle: https://www.ampproject.org/docs/tutorials/visual_story/parts_of_story

In der Dokumentation kann außerdem ein Boilerplate-Code für das Markup gefunden werden, sowie eine Liste der bislang erlaubten Tags für die einzelnen Children des amp-story-grid-layer und die nutzbaren Animationseffekte und weitere Gestaltungselemente.

Bislang sind AMP Stories aber noch nicht in die allgemeinen Suchergebnisse von Google zu finden. Stattdessen muss ein spezieller Parameter dazu verwendet werden; Links zu Beispielen finden sich außerdem im Google Developers Blog. Das soll sich ändern, sobald AMP Story die Preview-Phase verlässt.

Unsere Redaktion empfiehlt:

Relevante Beiträge

X
- Gib Deinen Standort ein -
- or -