10 wichtige Komponenten für beschleunigte mobile Seiten (AMP), die Sie kennen sollten

Accelerated Mobile Pages oder AMP ist die Initiative von Google , das mobile Internet schneller zu machen . Um dieses Ziel zu erreichen, beschränken die AMP-Standards die Verwendung von HTML, CSS und JavaScript und verwalten das Laden externer Ressourcen wie Bilder, Videos und Anzeigen über eine eigene Laufzeitumgebung .

Dies bedeutet, dass Sie in Ihren AMP-Dokumenten weder benutzerdefiniertes JavaScript (noch von Drittanbietern) noch andere ressourcenbezogene HTML-Elemente wie Bilder und Videos verwenden können.

Um die Lücke zwischen den Bedürfnissen der Benutzer und den besten Leistungspraktiken zu schließen, verfügt AMP über spezifische Komponenten, die Sie anstelle dieser ausgeschlossenen Elemente verwenden können .

AMP-Komponenten sind spezifische HTML-Tags . Sie verhalten sich ähnlich wie normale HTML-Tags: Sie haben öffnende und schließende Tags, Attribute und die meisten können mit CSS formatiert werden. Sie können leicht erkannt werden, da sie immer mit dem amp- Präfix beginnen .

Es gibt zwei Arten von AMP-Komponenten: integrierte und erweiterte Komponenten.

Eingebaute AMP-Komponenten

Built-Ins sind in die JavaScript-Laufzeit von AMP integriert, sodass Sie sie nicht separat hinzufügen müssen.

1. amp-img

ersetzt die Tag in AMP HTML-Dokumenten. Sie müssen die src und alt genauso hinzufügen, wie wenn Sie mit dem regulären arbeiten Element.

hat auch zwei andere erforderliche Attribute: Sie müssen immer die Attribute width und height in ganzzahligen Pixelwerten angeben, da dies der AMP-Laufzeitumgebung ermöglicht , das Layout im Voraus zu berechnen .

Wenn Sie das Bild reagieren möchten, fügen Sie das Attribut layout="responsive" . Das layout steuert das Layout in AMP-Dokumenten und es kann zu beliebigen AMP-Komponenten hinzugefügt werden (erfahren Sie mehr dazu auf dem AMP-Layoutsystem).

Sie können auch das srcset Attribut in der Tag, um verschiedene Bilder für unterschiedliche Ansichtsfenster und Pixeldichten zu spezifizieren . Es funktioniert genauso wie bei Nicht-AMP-Bildern.

2. amp-video

kann verwendet werden, um HTML-Videos direkt in AMP-HTML-Dokumente einzubetten . Es ersetzt die

Die Quelle des Videos muss über das HTTPS-Protokoll bedient werden . Sie müssen die Attribute width und height hinzufügen, genau wie beim Komponente.

Das Das Tag verfügt über viele optionale Attribute, z. B. autoplay und poster denen Sie festlegen können, wie Ihr HTML5-Video angezeigt wird.

unterstützt mp4, webm, ogg und alle anderen Formate, die von HTML5 unterstützt werden

Wenn Sie möchten, können Sie auch Fallback-Videos für Benutzer mit Browsern, die keine HTML5-Videos unterstützen, mithilfe des fallback Attributs und des HTML-Tag

Ihr Browser unterstützt keine HTML5-Videos.

3. amp-ad und amp-embed

bietet Ihnen Iframe-Sandboxen, in denen Sie Ihre Anzeigen anzeigen können . Sie müssen Ihre Anzeigen über das HTTPS-Protokoll bereitstellen .

Sie können Skripts, die von Ihrem Werbenetzwerk bereitgestellt werden, nicht selbst ausführen. Stattdessen führt die AMP-Laufzeitumgebung das JavaScript des angegebenen Netzwerks in der Sandbox aus. Sie müssen nur angeben, welches Netzwerk Sie verwenden und Ihre Daten hinzufügen.

Das Für die Komponente müssen Sie die Dimensionen der Anzeige mithilfe der Attribute width und height hinzufügen .

Sie können das von Ihnen verwendete Werbenetzwerk mit dem Attribut type . Sehen Sie sich die Liste der unterstützten Werbenetzwerke an.

Jedes Werbenetzwerk hat seine eigenen data-* -Attribute, die Sie ebenfalls hinzufügen müssen. Um zu sehen, welche Sie benötigen, klicken Sie auf Ihr Werbenetzwerk in der obigen Liste.

ist der Alias ​​von , die Dokumentation sagt nicht viel darüber hinaus, als es verwendet werden kann wenn es semantisch genauer ist . Da Google verspricht, im Laufe der Zeit Anzeigen-bezogene AMP-Komponenten zu entwickeln, könnte sich dies in Zukunft ändern.

4. amp-pixel

Mit Sie können Ihren AMP-HTML-Dokumenten ein Tracking-Pixel hinzufügen, um Seitenaufrufe zu zählen . Es hat nur ein Attribut, das erforderliche src Attribut, in dem Sie die zum Tracking-Pixel gehörende URL angeben müssen.

Das Mit dem Tag können Standard-URLs ersetzt werden. Dies bedeutet, dass Sie einen zufälligen URL-Wert generieren können, um jede Impression zu verfolgen.

Wenn Sie diese Komponente verwenden möchten, finden Sie Informationen in der URL-Ersetzungsrichtlinie von AMP. Beachten Sie, dass Sie das nicht stylen können Komponente.

Erweiterte AMP-Komponenten

Da erweiterte AMP-Komponenten nicht Teil der JavaScript-Laufzeit sind, müssen Sie sie immer in die JavaScript-Laufzeitumgebung importieren Abschnitt der AMP-Seite, auf der Sie sie verwenden möchten.

Hinweis: Komponentenversionen können sich in Zukunft ändern. Vergessen Sie daher nicht, die aktuelle Version in der Dokumentation zu überprüfen .

5. amp-audio

ersetzt die

Um es zu verwenden, müssen Sie die src, width und height angeben, und Sie können auch drei optionale Attribute hinzufügen: autoplay, loop und muted .

Es kann auch eine gute Idee sein, Fallback-Audiodateien für Benutzer mit Browsern hinzuzufügen, die HTML5 nicht unterstützen. Sie können dies tun, indem Sie das Attribut " fallback und " tag, genau wie bei den oben genannten Komponente.

Das AMP-Komponente unterstützt die gleichen Audioformate wie die

Ihr Browser unterstützt kein HTML5-Audio.

Benutzen , schließe das folgende Skript in die Abschnitt Ihres AMP-Dokuments:

6. amp-iframe

zeigt einen Iframe in AMP-Dokumenten an. wurde gemacht, um sicherer zu sein als normale HTML-Iframes. Daher sind sie standardmäßig sandboxed .

Es gibt einige Regeln in Bezug auf Sie müssen folgen, um die Validierung zu bestehen.

Sie müssen die Attribute width, height und sandbox angeben. Das sandbox Attribut ist standardmäßig leer, aber Sie können ihm verschiedene Werte geben, um das Verhalten des Iframes zu ändern, zum Beispiel sandbox="allow-scripts" läßt den iframe JavaScript ausführen. Sie können auch Attribute von Standard-Iframes verwenden.

Während die Dimensionen von Vordefiniert durch die Attribute width und height, gibt es eine Möglichkeit, die Größe in Runtime zu ändern. Um das zu verwenden Fügen Sie Ihrer AMP-Seite das folgende Skript hinzu:

7. amp-accordion

Akkordeons stellen ein häufiges UI-Muster im mobilen Design dar, da sie Speicherplatz sparen, den Inhalt aber dennoch auf eine zugängliche Weise anzeigen. ermöglicht das schnelle Hinzufügen von Akkordeons zu AMP-Seiten.

Teile des Akkordeons müssen das verwenden

HTML5-Tag, und müssen die direkten Kinder der sein Etikett.

Jeder Abschnitt muss zwei direkte Kinder haben :

1. eine für die Überschrift
2. eine für den Inhalt (der Inhalt kann auch ein Bild sein)

Verwenden Sie das expanded Attribut für jeden Abschnitt, den Sie standardmäßig erweitern möchten.

Abschnitt 1 
 Inhalt von Abschnitt 1 
Sektion 2 
Inhalt von Abschnitt 2
Sektion 3 

Um das zu verwenden Fügen Sie in Ihrem AMP-Dokument das folgende Skript hinzu:

8. amp-lightbox

Fügt den verschiedenen Elementen (in den meisten Fällen Bildern) auf Accelerated Mobile Pages einen Leuchtkasten hinzu .

Wenn der Benutzer mit dem Element interagiert, beispielsweise auf es tippt, wird der Leuchtkasten erweitert und füllt das gesamte Ansichtsfenster . Sie müssen eine Schaltfläche oder ein anderes Steuerelement hinzufügen, auf das der Benutzer tippen kann.

Beachten Sie, dass amp-lightbox nur mit dem nodisplay Layout verwendet werden kann.

 Erweitern 

Um das zu verwenden Komponente müssen Sie sie mit dem folgenden Code importieren:

9. amp-carousel

Karussells werden häufig im mobilen Design verwendet, da sie zahlreiche ähnliche Elemente (am häufigsten Bilder) entlang der horizontalen Achse anzeigen können . AMP-Ergebnisse werden auch in einem Karussellformat in der Google-Suche angezeigt.

Das Komponente ermöglicht es Ihnen, Karussells auf Ihrer Website hinzuzufügen. Die direkten Kinder der Komponente wird als die Elemente des Karussells betrachtet . Sie müssen die Abmessungen des Karussells mit den Attributen width und height .

Sie können das optionale type Attribut verwenden, um festzulegen, wie die Karussellobjekte angezeigt werden . Wenn das "carousel" Wert "carousel" annimmt, werden die Elemente als fortlaufender Streifen angezeigt (dies ist die Standardeinstellung), während der Wert für "slides" die Elemente im Folienformat anzeigt.

Das Das Tag hat auch andere optionale Attribute, die Ihnen helfen können, das Ergebnis zu optimieren.

Beachten Sie im folgenden Beispiel, dass sowohl das Karussell als auch alle seine Elemente die gleichen Werte für width und height haben .

Das Komponente erfordert das Hinzufügen des folgenden Skripts:

10. amp-analytics

kann verwendet werden, um Analysedaten auf AMP-Seiten zu sammeln . Zur Zeit, unterstützt vier Arten von Tracking-Ereignissen, dies kann sich jedoch in Zukunft ändern:

1. Seitenansicht
2. Ankerklicks
3. Timer
4. Scrollen

Benutzen , müssen Sie ein JSON-Konfigurationsobjekt in einem hinzufügen

Fügen Sie dem Skript das folgende Skript hinzu Abschnitt Ihrer AMP-HTML-Seite zum Importieren der Komponente:

Letzte Worte

In diesem Beitrag haben wir uns alle eingebauten AMP-Komponenten und einige der erweiterten Komponenten angesehen. Da Accelerated Mobile Pages noch neu ist, können sich in Zukunft viele Dinge ändern. Daher lohnt es sich, die Dokumentation entweder auf Github oder auf der offiziellen AMP-Seite zu lesen.

Da diese AMP-Komponenten Open Source sind, können Sie auch zur Entwicklung beitragen und sogar Ihre eigene Komponente erstellen . Wenn Sie sehen möchten, wie eine vollständige AMP-Seite mit verschiedenen Komponenten aussieht, können Sie sich diese wenigen Beispiele auf Github ansehen.

Dynamische Profilfotos für Interface-Mockups mit vielfältiger Benutzeroberfläche

Wenn Sie ein Modell entwerfen, möchten Sie sich zuerst auf die Benutzeroberfläche und weniger auf die Ästhetik konzentrieren. Gleiches gilt für das Wireframing und die Codierung eines Weblayouts von Grund auf neu .Viele verschiedene Modelle erfordern Profilfotos wie soziale Netzwerke, Blog-Kommentare und Profilseiten. Mi

(Tech- und Design-Tipps)

Recycelte Kunst: 66 Meisterstücke aus Junk-Material

Schon einmal geschockt von der Schönheit der Toilettenpapierrollen, oder das Huhn gesehen, das von den Eierschalen geformt wurde, oder Zeuge des coolsten Löwen, der von Reifen hergestellt wurde? Verdammt, sie alle werden sogar aus alltäglichen Dingen hergestellt, die du jeden Tag weggeworfen hast, und sie sind bekannt als recycelte Kunst.Re

(Tech- und Design-Tipps)