Zwischen dem HTML-Code für Websites und jenem für E-Mails gibt es wesentliche Unterschiede. Wenn eine Agentur diese Unterschiede nicht kennt, wird sie keine erfolgreichen E-Mailing-Kampagnen aufsetzen können.
Hier eine Liste von wichtigen Unterschieden und Besonderheit des Kanals „E-Mail“:
1) CSS-Unterstützung
Webseiten: Webseiten nutzen externe Stylesheets und profitieren von der umfangreichen CSS3-Unterstützung der modernen Browser für komplexe Layouts und Effekte. So lassen sich auch spezielle Schriftarten (custom fonts) problemlos umsetzen.
E-Mails: Die CSS-Unterstützung in E-Mails ist begrenzt (Danke, Microsoft!) und inkonsistent. Viele E-Mail-Clients unterstützen kein CSS3 oder externe Stylesheets. Auch Custom Fonts (eingebettete spezielle Schriften) funktionieren nicht oder nur sehr eingeschränkt. Inline-Styling ist nach wie vor Standard und unverzichtbar, wenn man sicherstellen will, dass ein Design auf allen wichtigen Mail-Programmen korrekt und einheitlich dargestellt wird.
2) HTML-Elemente und Attribute
Webseiten: Moderne HTML5-Elemente wie <section>, <header>, <footer> und fortgeschrittene Attribute werden breit unterstützt.
E-Mails: Viele HTML5-Elemente und -Attribute sind in E-Mail-Clients nicht verfügbar. Die Verwendung von Layout-Tabellen ist immer noch notwendig und macht die Entwicklung spannender Designs zwar möglich, aber relativ aufwändig. Außerdem muss man auf viele Eigenheiten der Mail-Programme achten, da viele Details nicht überall funktionieren. Ein Beispiel: Die Nutzung von anderen Einheiten als px (zum Beispiel pt oder em) kann in Outlook dazu führen, dass unerwünschte 1px hohe Linien angezeigt werden.
3) Spezielle Bugs und Inkonsistenzen
Webseiten: Es gibt zwar auch hier Inkonsistenzen zwischen den Browsern und kleinere Bugs, doch im Großen und Ganzen wird der HTML-Code von Webseiten im Normalfall sehr einheitlich und fehlerfrei angezeigt.
E-Mails: Es gibt hier leider eine Vielzahl von großen und kleinen Bugs und Einschränkungen, die man als Designer und HTML-Producer kennen muss. Ein Klassiker ist beispielsweise die Schreibweise von „margin“, das in einigen Outlook-Versionen mit großem „M“ geschrieben werden muss, damit der Befehl funktioniert. Auch so banale Dinge wie Hintergrundbilder können nur mit großen Einschränkungen (und vielen „Tricks“) realisiert werden.
4) Bilder, Multimedia und Interaktivität
Webseiten: Bilder, Videos und andere Medien können frei verwendet werden, unterstützt durch HTML5-Tags wie <video> und <audio>. Auch dynamische Interaktionen, wie Hover-Effekte, Drag-and-Drop und vieles mehr sind durch HTML, CSS und JavaScript möglich.
E-Mails: Bilder müssen mit Vorsicht verwendet werden, da viele E-Mail-Clients sie standardmäßig blockieren. Videos werden leider nach wie vor von vielen Mail-Programmen, insb. Outlook, nicht abgespielt. Formulare funktioinieren auch nicht. Und die Interaktivität ist auf einfache Aktionen wie Links und Buttons beschränkt.
5) JavaScript und Interaktivität
Webseiten: JavaScript treibt Interaktivität und Funktionalität auf Webseiten an und ist ein Kernbestandteil moderner Webentwicklung.
E-Mails: JavaScript ist in E-Mails praktisch nicht vorhanden, da es aus Sicherheitsgründen von den meisten E-Mail-Clients blockiert wird. Damit lassen sich auch viele bekannte Effekte und Funktionalitäten von Websites in E-Mails nicht abbilden.
6) Responsive Design
Webseiten: Flexbox, CSS Grid und Media Queries ermöglichen ein reaktionsfähiges („responsive“) Design, das auf allen modernen Browsern konsistent funktioniert.
E-Mails: Responsive Design wird oft durch Inline-CSS und Tabellenlayouts realisiert. Media Queries werden nur von modernen E-Mail-Clients unterstützt. Daher muss man zum Beispiel für Outlook auf „Ghost-Tables“ und ähnliche Konstrukte zurückgreifen.
Fazit: Tolle Designs möglich, aber nur mit Know-how.
Man kann auch für E-Mailings sehr coole und innovative Designs realisieren! Doch dazu braucht man ein tiefes Verständnis der Besonderheiten des Kanals und eine Kenntnis der Eigenheiten der vielen Mail-Programme. Und man muss sehr, sehr viel testen.
Ohne dieses Wissens kann man viele Möglichkeiten nicht nutzen oder – noch schlimmer – es kommt zu fehlerhaften Darstellungen oder auffälligen Unterschieden in den verschiedenen Mail-Programmen.
Das ist absolut keine Raketenwissenschaft. Doch wenn eine Agentur HTML vorwiegend von der Umsetzung von Websites kennt, wird sie bei der Programmierung von guten E-Mailings auf erhebliche Herausforderungen stoßen. Da wäre es vermutlich besser, einen Experten dafür beizuziehen oder die Umsetzung einem Dienstleister zu überlassen, der sich mit der Programmierung von E-Mail-Designs tatsächlich auskennt.
Über den Autor
Michael Kornfeld ist mit einer über 25-jährigen Laufbahn ein leidenschaftlicher Verfechter von E-Mail-Marketing. Er hält zahlreiche Seminare und Fachvorträge und zählt zu den renommiertesten Experten Österreichs auf diesem Gebiet.