23. Mar 2016

Leo Leimser

5 Min.

Responsive E-Mail Templates

Teil 2
In 3 Schritten zum perfekten E-Mail Template.

Nachdem der erste Teil dieser Blogpost-Serie euch über die anhaltende Wichtigkeit von E-Mails als Marketing-Tool aufgeklärt hat, beschäftigt sich der zweite mit der Umsetzung von E-Mail Templates. Der Artikel soll euch einen einfachen Einstieg in die Thematik ermöglichen und euch einen Überblick über unterstützende Tools geben. So spart ihr bei der Entwicklung von Templates Zeit und Nerven. Da ich grundlegende HTML- und CSS-Kenntnisse voraussetze, ist der Text an alle Web-Devs und Hobby-Coder gerichtet, die schon etwas Erfahrung in der Frontend-Entwicklung mitbringen.

TL;DR

Bei der Erstellung von E-Mail-Templates nehmen euch Frameworks und CSS-Inliner viel Arbeit ab,
während euch Inbox Inspector das Testen auf unterschiedlichsten Clients und Devices erleichtert.

Kompatibilitätsprobleme mit E-Mail Clients

Bevor ihr in die Tasten haut, solltet ihr euch mit den zahlreichen gängigen E-Mail Clients befassen und verstehen, wie deren Render-Engines funktionieren. Leider ist der CSS-Support aller Clients mäßig bis sehr schlecht. Aufgrund fehlender Standards hat jeder E-Mail Client seine eigenen Methoden zur Darstellung von HTML und CSS. Daher muss viel getestet werden, damit eure Mails auf jedem Client und Endgerät richtig angezeigt werden. Der Fakt, dass die weitverbreiteten MS Outlook Clients und auch Gmail mit Abstand am schlechtesten abscheiden, macht das Ganze nicht einfacher. Während das kaum mehr verwendete Outlook 2003 noch die „gute“ Render-Engine vom Internet Explorer 6 verwendete, muss Microsofts E-Mail Client ab Version 2007 mit der Word-Render-Engine (kein Scherz) auskommen.

Damit ihr euch einen Überblick verschaffen könnt, welche CSS-Properties von gängigen Clients unterstützt werden, empfehle ich euch einen Blick auf diese Tabelle zu werfen.
Eine Übersicht über die diversen Clients gibt’s hier.

Zudem solltet ihr euch im Klaren sein, was alle E-Mail Clients gemeinsam haben: Sie scannen das komplette Markup eurer Mails und „strippen“ (streichen) alles heraus, was irgendwie gefährlich sein könnte. Dazu gehören importierte Styles und sämtliche Scripts. Manche Clients wie z. B. Gmail entfernen sogar <style>-Tags, was die Verwendung von Media-Queries unmöglich macht.

Frameworks für responsive Grid-Layouts

Um den lähmenden Sprung ins kalte Wasser zu vermeiden, solltet ihr euch mit einem Framework anfreunden, welches einerseits viel Arbeit abnimmt und euch wie ein roter Leitfaden durch die Erstellung des Grundgerüstes führt. Neben einigen Alternativen, ist Foundation for E-Mails 2 (Formerly Ink) von Zurb Foundation das wahrscheinlich beliebteste E-Mail Framework und mein persönlicher Favorit. Ähnlich zu Twitters Bootstrap bietet euch das Grundgerüst vorgefertigte Elemente wie Panels oder Buttons. Die wichtigste Komponente ist aber das responsive Grid-Layout, das euch, ohne eine Zeile CSS schreiben zu müssen, dabei hilft, Layouts für verschiedenste Display-Größen zu kreieren. Habt ihr bereits Erfahrung mit Bootstrap, sollte das keine Herausforderung darstellen. Beachtet jedoch die Regel „Mobile First“, denn einige Desktop- und Mobile-Clients unterstützen keine Media-Queries. Mit dieser Herangehensweise vermeidet ihr kaputte Darstellungen und könnt sicher sein, dass zumindest das Layout eurer Mails auf allen Clients das gewünschte Ergebnis liefert. Da eine detaillierte Einführung in das Framework den Rahmen des Blogposts sprengen würde, verlinke ich euch an dieser Stelle an die Getting Started Seite von Foundation for E-Mails.

CSS-Inliner und Inbox Inspector

Habt ihr euer Grundgerüst aufgestellt und mit ersten Styles versehen, wird es bereits Zeit in die Testphase überzugehen. E-Mail Service Provider wie MailChimp oder CampaignMonitor haben bereits einen integriert. Falls euer Provider keinen zur Verfügung stellt, könnt ihr auch auf externe Tools wie z. B. litmus, Email On Acid oder Inbox Inspector zurückgreifen.

Bevor ihr euer Markup durch den Inbox Inspector laufen lassen könnt, müsst ihr aber noch eure Styles „inlinen“, denn wie bereits erwähnt entfernen fast alle Clients die <style>-Tags. Ein CSS-Inliner nimmt euch dabei die Arbeit ab und klappert alle CSS-Selektoren ab, um die Styles an den richtigen DOM-Elementen einzufügen bzw. zu „inlinen“. CSS-Inliner gibt es als gulp- und grunt-Extensions. Ein Nachteil ist die Qualität mancher Extensions – sie können teilweise mit komplexen Selektoren nichts anfangen. Ich möchte von deren Verwendung nicht abraten, jedoch solltet ihr euch im Vorhinein informieren, welche Selektoren von den Extensions unterstützt werden. Wollt ihr auf Nummer sicher gehen, empfehle ich den Responsive Email Inliner, der ebenfalls von Zurb als Webvariante angeboten wird.

Ich hoffe, ich konnte euch einen groben Überblick über die Welt der E-Mail Templates verschaffen. Wer nach dem Lesen das Gefühl hat dieser Aufgabe nicht gewachsen zu sein oder Probleme bei der Umsetzung hat, dem habt ihr noch die Möglichkeit euch einfach an uns zu wenden. Wir helfen euch dabei an den richtigen Schrauben zu drehen und lassen eure digitale Post genau so aussehen, wie ihr es euch wünscht.