Best Practices für AMP für E-Mail

AMP ermöglicht neue spannende Arten von beeindruckenden und attraktiven Inhalten in E-Mails. Wenn du E-Mails entwirfst, beachte die folgenden Best Practices. Dadurch stellst du sicher, dass die E-Mails performant sind und auf allen Plattformen zuverlässig und gemäß den Benutzererwartungen funktionieren.

Geschwindigkeit

Wenn du zum dynamischen Abrufen von Inhalten amp-list verwendest, füge einen Platzhalter ein, um die Integrität der Komponentenstruktur zu gewährleisten. Der Platzhalter sollte in seinem Layout dem Dokument möglichst ähnlich sein, nachdem die angeforderten Daten zurückgegeben wurden. Dies stellt sicher, dass die Nachrichtengröße das Layout nicht wesentlich ändert oder abwandelt.

Benutzerfreundlichkeit und Barrierefreiheit

• Wenn du amp-carouselverwendest, stelle sicher, dass das Attribut controls festgelegt ist. Auf diese Weise können Benutzer auf Geräten mit Touchscreen wie z. B. Smartphones durch das Karussell navigieren.
• Beachte bei der Verwendung von amp-form, dass in iOS nicht alle Eingabetypen unterstützt werden. Weitere Informationen findest du in Supported Input Values in der Safari HTML Reference.
• In manchen Apps und Browsern werden nicht alle Attributwerte für autocomplete unterstützt. Gehe davon aus, dass deine Benutzer keine automatische Vervollständigung haben, und halte die Formulare kurz.

Styling

• Stelle sicher, dass deine E-Mail nur CSS, das von AMP für E-Mail unterstützt wird, verwendet.
• Verwende keinerlei Einheiten für Viewport (vw, vh, vmin und vmax) in deinem CSS und HTML. Da AMP E-Mails in einem iframe gerendert werden, stimmt der Viewport der E-Mail nicht mit dem Viewport des Browsers überein.
• Bestimmte Browser haben unterschiedliche Standard CSS Styles. Verwende eine CSS Bibliothek, die Styles bei Bedarf normalisiert. Weitere Informationen zu standardmäßigen Styles und der Normalisierung von Styles sowie eine Liste der verfügbaren Bibliotheken findest du in Reboot, Resets, and Reasoning.
• Sei vorsichtig mit überlaufenden Rändern in CSS: Sie werden möglicherweise aufgrund der Einschränkung des AMP Layouts nicht gerendert.

Mobile Geräte

Stelle sicher, dass deine Nachricht auf allen Bildschirmgrößen gut aussieht. Verwende dazu CSS Medienabfragen, um das Gerät zu identifizieren. Nachrichten sollten auf Mobilgeräten getestet werden, um sicherzustellen, dass das Layout korrekt ist und die Komponenten erwartungsgemäß funktionieren.

Andere häufige Fehler

Beachte bei der Arbeit mit AMP für E-Mail die folgenden Tipps und Tricks:

• Der Playground von AMP für E-Mail leitet XHRs nicht weiter, einige E-Mail Anbieter tun dies aber.
• Der AMP MIME Teil sollte in deiner E-Mail vor dem HTML MIME Teil angezeigt werden, um maximale Kompatibilität zwischen den E-Mail Clients zu gewährleisten.
• Das Attribut src von amp-list, action-xhr von amp-form, das src für amp-img oder das Attribut href eines <a> Tags kann nicht durch amp-bind geändert werden.
• Deine Nachrichten sollten eine statische HTML Version enthalten, falls Benutzer zur HTML Version der Nachricht weitergeleitet werden oder falls Benutzer die Nachricht weiterleiten.