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.

E-Mail-HTML v. Web-HTML

Die Anzeigetechnologie eines typischen E-Mail-Clients ist nicht so aktuell wie die eines Webbrowsers. Webbrowser zeigen interaktive, dynamische Inhalte an und werden häufig aktualisiert. Aber interaktive Elemente wie Flash, JavaScript oder HTML-Formulare funktionieren in den meisten Posteingängen nicht.

In der folgenden Tabelle erfährst du mehr.

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 Abonnenten ö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 fast allen wichtigen E-Mail-Clients blockiert. Sie werden entweder extrem eingeschränkt oder gar nicht unterstützt.

JavaScript

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

Versuche stattdessen, deine Inhalte mit GIFs ansprechender zu gestalten.

Iframe-Elemente

Ein „“ (Inline-Frame) ist ein HTML-Element, das Inhalte von einer Website in eine andere einbettet. Inline-Frames werden häufig verwendet, um Anzeigen, Videos, Audio-Inhalte oder Formulare in andere Websites einzufügen. Iframes enthalten häufig Skripte, darum werden sie von den meisten E-Mail-Clients blockiert.

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 Formulare zwar an, aber Abonnenten können diese leider nicht absenden. Verzichte auf HTML-Formulare und ziehe eine Alternative in Betracht.

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

Eingebettete Medien

Medien, die automatisch wiedergegeben werden oder zur Wiedergabe angeklickt werden müssen, werden in einer Inbox nicht abgespielt, wenn der E-Mail-Client des Abonnenten die HTML5-Tags <video> und <audio> nicht unterstützt. Nur ein großer E-Mail-Client, Apple Mail, unterstützt diese Tags, du solltest also am besten auf eingebettete Medien verzichten und eine Alternative in Betracht 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.