Einschränkungen von HTML-E-Mails

Die meisten E-Mail-Clients unterstützen nicht alle Arten von HTML-Inhalten, die du im Internet siehst. Webbrowser können Skripte, Animationen und komplexe Navigationsmenüs anzeigen, während ein typischer E-Mail-Posteingang nicht für diese Art von Inhalten ausgelegt ist.

In diesem Artikel erfährst du mehr über Inhaltsarten, die du in deinen E-Mail-Designs vermeiden solltest, und was du stattdessen verwenden kannst.

Tipps zu HTML-E-Mails

E-Mail-Clients haben in der Regel ihre eigenen Design-Einschränkungen im Vergleich zu einem Webbrowser. Interaktive Elemente wie Flash, JavaScript oder HTML-Formulare funktionieren in der Inbox meistens nicht.

Weitere Informationen findest du in dieser Tabelle.

Mit Vorsicht verwenden

Du kannst in deine Mailchimp-Vorlagen bestimmte Elemente wie Hintergrundbilder und benutzerdefinierte Schriftarten einfügen. Nicht alle E-Mail-Clients unterstützen diese Elemente. Wir empfehlen daher, dass du dir deine Kampagnen in der Vorschau anzeigen lässt und sie gründlich testest, bevor du sie an deine gesamte Zielgruppe sendest.

Animierte GIFs

Einige E-Mails-Clients unterstützen keine animierten GIFs. Wenn du aber eine GIF-Datei in deine Kampagne einfügen möchtest, kannst du dies direkt über Giphy tun.

Wenn du eine GIF-Datei direkt in Mailchimp hochlädst, ist es normalerweise am besten, wenn du zuerst deine animierten Inhalte bearbeitest. Unser integrierter Foto-Editor ändert Bilddateien, um sie zu bearbeiten. Er ist jedoch nicht für animierte Inhalte konzipiert, was dazu führen kann, dass animierte GIFs beschädigt werden.

Weitere nützliche Informationen zu animierten GIFs und den E-Mail-Clients, die sie unterstützen, findest du im Leitfaden von Litmus.

Hintergrundbilder

Mailchimp unterstützt Hintergrundbilder in den Bereichen Preheader, Header, Textkörper, Spalte und Fußzeile unserer Drag-and-Drop-Vorlagen. Wenn du eine benutzerdefinierte HTML-Vorlage verwendest, kannst du mit unserem Vorlagen-Builder ein Hintergrundbild hinzufügen. Hintergrundbilder werden nicht auf allen E-Mail-Clients angezeigt und können in mobilen Clients anders aussehen als geplant. Du solltest daher für deine Kampagnen vor dem Versenden unbedingt unser Feature Vorschau und Test nutzen.

Ein Hintergrundbild zu einer Landingpage oder E-Mail hinzufügen
Ein Hintergrundbild zu einer benutzerdefinierten HTML-Vorlage hinzufügen
Vorschau und Test von E-Mail-Kampagnen

Web-Schriftarten

Über die Editor-Symbolleiste von Mailchimp kannst du Standardschriftarten und einige ausgewählte benutzerdefinierte Web-Schriftarten verwenden. Wenn ein E-Mail-Client eine in deiner Kampagne verwendete Web-Schriftart nicht unterstützt, wird sie durch eine Standardschriftart ersetzt.

In der folgenden Tabelle siehst du, welche E-Mail-Clients Web-Schriftarten unterstützen und welche nicht.

Breite Vorlagen

Deine Kontakte öffnen Kampagnen häufig auf Mobilgeräten oder im Vorschaufenster von Desktop-E-Mail-Clients. Die Anzeigebereiche für E-Mails sind schmal, sodass deine Nachricht abgeschnitten wird, wenn sie breiter als 600–800 Pixel ist.

Nicht verwenden

Die folgenden Elemente werden von praktisch allen wichtigen E-Mail-Clients blockiert.

JavaScript

JavaScript ist eine Programmiersprache, die Webinhalte interaktiv macht. Das ist auf Websites üblich, aber die überwiegende Mehrheit von E-Mail-Clients blockiert Skripte, da sie schädliche Inhalte verbergen können. Vermeide JavaScript.

Versuche stattdessen, deine Inhalte mit GIFs ansprechender zu gestalten.

Iframe-Elemente

Ein <iframe> (Inline-Frame) ist ein HTML-Element, das Inhalte von einer Website in eine andere einbettet. Inline-Frames werden häufig verwendet, um Werbung, Videos, Audio oder Formulare auf anderen Websites einzufügen. Iframes enthalten häufig Skripte, sodass die meisten E-Mail-Clients sie blockieren.

Verlinke stattdessen die Inhalte, die du in deiner Kampagne anzeigen möchtest.

Flash

Flash zeigt Animationen und Grafiken auf Websites an, wird aber von den meisten E-Mail-Clients blockiert.

Versuche stattdessen, deine Inhalte mit GIFs ansprechender zu gestalten.

HTML-Formulare

Textfelder, Texteingaben, Optionsfelder und Kontrollkästchen sind einfache HTML-Formularelemente, aber für die Schaltfläche zum Senden ist häufig Javascript erforderlich. Einige E-Mail-Clients zeigen zwar Formulare an, aber leider können die Kontakte sie nicht abschicken. Verzichte auf HTML-Formulare und ziehe eine Alternative in Betracht.

Verwende stattdessen eine einfache Umfrage oder eine Mailchimp-Umfrageintegration, um Antworten von Kontakten zu sammeln, oder füge einen Link zu einem Webformular ein.

Eingebettete Medien

Autoplay- und Click-to-Play-Medien werden nur dann in einer Inbox abgespielt, wenn der E-Mail-Client deines Kontakts HTML5 <video> und <audio> Tags unterstützt. Nur einer der großen E-Mail-Clients, Apple Mail, unterstützt diese Tags. Daher ist es am besten, eingebettete Medien zu vermeiden und eine Alternative in Betracht zu ziehen.

Teile stattdessen einen Video-Player-Link mit den Merge-Tags von Mailchimp oder Video-Inhaltsblöcken. Um Audiodateien zu versenden, teile einen Audiodatei-Link.

E-Mail-HTML-Designressourcen für Programmierer

Ganz gleich, ob dir E-Mail-HTML noch neu ist oder du bereits eine Vielzahl an E-Mails codiert hast: Mit diesen Ressourcen kannst du Vorlagen gestalten, die in den verschiedensten E-Mail-Clients gut aussehen.

• E-Mail-Designreferenz
  Stellt Ressourcen zu Design und Entwicklungsmethoden, Code-Beispiele und E-Mail-Entwürfe zum Herunterladen bereit, mit denen du E-Mails besser gestalten und erstellen kannst.
• Leitfaden für das E-Mail-Design
  Bietet Artikel mit Tipps zum Kampagnenstil, Design und Layout.