3 Lösungen für Responsive E-Mail-Newsletter

Lang lebe der E-Mail-Newsletter! Viele Unternehmen haben mittlerweile (wieder) den Nutzen von E-Mail-Newslettern erkannt - wenn man sie richtig macht.

Neben den Inhalten und der Zustellbarkeit ist entscheidend, das der Newsletter auf allen Endgeräten funktioniert und gut lesbar ist. Wie man Responsive E-Mail-Newsletter umsetzt und warum man diese überhaupt braucht, erfahren Sie in diesem Beitrag.

Warum sollte ich Responsive E-Mails einsetzen?

Die meisten Webseiten sind schon lange responsive, d.h. sie passen sich der Größe des jeweiligen Endgeräts an. Und das ist auch gut so, denn je nach Zielgruppe und Besucherquellen sind mehr als 50% der Besucher mobil. Und selbst in Nischen, in denen Mobile bisher keine Rolle spielte, hat der Anteil mobiler Besucher stark zugenommen. Tendenz weiter steigend.

E-Mail-Newsletter hinken da noch hinterher: Wenn ich mein E-Mail-Postfach durchforste, bzw. den Ordner Werbung, dann sind gefühlt über die Hälfte aller E-Mail-Newsletter nicht für mobile Endgeräte angepasst und schlecht lesbar. Das verdirbt einem natürlich die Laune, den Newsletter überhaupt zu lesen, geschweige denn auf ein Angebot zu klicken.

Vorlagen und Frameworks zur Umsetzung von Responsive E-Mail-Newslettern

Webdesigner und Webentwickler „hassen“ in der Regel die Erstellung von E-Mail-Newslettern. Warum? Weil jeder E-Mail-Client seine eigene Suppe kocht, den Code anders darstellt und das Ganze wenig mit zeitgemäßen HTML zu tun hat. Alles was auf Webseiten so einfach ist, ist bei E-Mail-Newslettern die Hölle oder überhaupt gar nicht erst realisierbar.

Wovon man sich schon mal direkt verabschieden kann? Das der E-Mail-Newsletter in allen Programmen identisch und korrekt dargestellt wird, schon gar nicht wenn die Mail dann noch weitergeleitet wird. Es geht bei der Erstellung von E-Mail-Newslettern also darum, die „bestmögliche“ Darstellung zu erreichen.

Responsive E-Mail-Newsletter machen die Umsetzung dann noch ein Stückchen schwieriger. Die folgenden Vorlagen und Frameworks können dabei helfen, in das Thema schneller einzusteigen:

1. Cerberus

Cerberus ist kein Framework, sondern eine Sammlung von insgesamt 3 Vorlagen, die jeweils verschiedene Elemente einer typischen HTML-Mail enthalten.

Aus diesen Code-Snippets kann man sich relativ sicher seinen eigenen Responsive E-Mail-Newsletter zusammenbauen. Allerdings ist der Code gerade für HTML-Mail-Einsteiger schwer zu durchschauen und Anpassungen müssen oft an mehreren Stellen gleichzeitig gemacht werden. Daher eignen sich die Vorlagen eher für Profis oder kurze, weniger komplexe HTML-Mails.

Vorteile:

• Kein Setup (Build Tool) in der Entwicklung notwendig
• HTML
• In den meisten Fällen schlankerer Code (weniger KB)
• Lässt sich leicht in einen eigenen Build-Prozess oder in ein CMS integrieren

Nachteile:

• HTML, das bei komplexen Tabellenstrukturen schnell undurchsichtig wird
• Änderungen meist an mehreren Stellen gleichzeitig erforderlich
• Ohne Integration in einen eigenen Build-Prozess oder in ein CMS nicht sehr komfortabel zu pflegen

2. MJML

MJML ist eine Auszeichnungssprache, die aus dem Mailversender Mailjet hervorgegangen und mittlerweile Open-Source ist. Das Projekt wird derzeit aktiv auf Github weiterentwickelt. Bei MJML handelt es sich um speziellen Code, der im Build-Prozess in Mail-konformes HTML umgewandelt wird.

Für Einsteiger steht eine App für Mac, Linux und Windows zur Verfügung. Fortgeschrittene können Plugins für die beliebten Texteditoren Sublime und Atom nutzen oder für das Build Tool Gulp. Aus eigener Erfahrung heraus kann ich aber sagen, dass ein Plugin für andere Build Tools wie Brunch oder Static Site Generatoren wie Metalsmith schnell geschrieben ist. Damit richtet sich MJML sowohl an Einsteiger als auch Fortgeschrittene, die eine Lösung benötigen, die sich in einen bestehenden Build-Prozess integrieren lässt.

Vorteile:

• MJML-Code ist besser lesbar als HTML-Tabellen
• Vorhandene Plugins z.B. für Rechnungstabellen oder Social Icons
• Kann durch eigene Plugins erweitert werden
• Richtet sich an Einsteiger als auch an Fortgeschrittene
• Mobile first

Nachteile:

• Eigene Auszeichnungssprache, die erst erlernt werden muss
• Anpassbarkeit ist (derzeit) noch begrenzt
• Wer mehr als ein paar Mails damit erstellt, sollte ein Build Tool nutzen
• Abhängig von der Weiterentwicklung (derzeit ist das Projekt recht aktiv auf Github, kann sich aber ändern)

3. Zurb Foundation E-Mails

Zurb Foundation sollte den meisten Frontend-Entwicklern ein Begriff sein. Vermutlich ist es nach Twitter Bootstrap das zweit meist genutzte CSS-Framework. Der Ableger Zurb Foundation E-Mails soll die Erstellung von Responsive E-Mails erleichtern.

Das Framework gibt es in zwei Versionen: CSS und SASS. Letztere ist an einen schon fertigen, recht komplexen Build-Prozess gekoppelt, der auf dem Static Site Generator Panini und der Auszeichnungssprache Ink basiert. Wenn man diesen Weg wählt, erhält man im Vergleich zu den ersten beiden Lösungen direkt das Komplettpaket, ist aber gezwungen sich an die Konventionen des Frameworks zu halten.

Vorteile:

• CSS- und SASS-Version
• SASS-Version mit fertigem Build-Prozess
• Für Nutzer von Zurb Foundation geringere Lernkurve

Nachteile:

• Nicht Mobile first
• Resultierender Code nicht ganz so darstellungssicher, wie bei den anderen Lösungen (wenn auch oft ausreichend)
• Verhältnismäßig viel CSS, was in größeren Mails resultiert (mehr KB)
• Aktuell gefühlt nicht mehr ganz so aktiv in der Entwicklung auf Github

Welche Lösung soll ich für Responsive E-Mail-Newsletter einsetzen?

Es kommt drauf an. Jeder Entwickler oder jedes Entwicklungs-Team sollt in alle drei Lösungen kurz rein schnuppern. Oft gibt es schon Präferenzen, wie das schon Zurb Foundation für Webseiten im Einsatz ist oder nur pures HTML verwendet werden soll.

Bei allen drei Lösungen sollten die erstellten Responsive E-Mail-Newsletter auf jeden Fall mit einem Tool wie zum Beispiel Litmus getestet werden. Kleinere Darstellungsfehler, die die Usability nicht beeinträchtigen, sind meiner Meinung nach gerade bei HTML-Mails in Kauf zu nehmen. Am Ende des Tages zählt, das alles für den Nutzer gut lesbar, professionell und vor allem anklickbar dargestellt ist.