Responsive Newsletter mittels MJML erstellen

Das Projekt von Florian zum myInnovationDay:

Für meinen ersten myInnovationDay habe ich mich mit dem Thema "Responsive Newsletter" auseinandergesetzt. Das Problem: Durch die Vielzahl an E-Mail-Clients und deren unterschiedlicher Interpretation ist man in den technischen und optischen Möglichkeiten zum Teil extrem eingeschränkt. 

So gibt es viele Hürden auf dem Weg zu einer einheitlichen und problemfreien Darstellung der Newsletter-E-Mail zu meistern. Zwar sind viele Templates und Hilfsmittel im Internet verfügbar, aber der Großteil davon erfordert immer noch eine sehr genaue Durchführung der Programmierung und viel Handarbeit, um die richtige Darstellung des geplantes Newsletters zu erreichen. Genau an diesem Problem setzt das noch sehr junge MJML-Framework an und versucht dem Ersteller des Newsletters durch eine einfach zu verstehende Syntax und viel Automation im Hintergrund einiges an Arbeit abzunehmen. 

Was ist MJML?

MJML (Mailjet Markup Language) ist ein frisches und flexibles Framework, welches auf ReactJS basiert. Es verfügt über eine eigene Syntax und entsprechende Tags, mit denen der Quellcode der E-Mail geschrieben wird. Diesen spezifischen Code wandelt MJML dann in einem Online-Editor direkt in für Newsletter-Templates nutzbaren HTML-Quellcode um. Hierbei basiert der HTML-Code auf "Best Practices" und sicheren Standards: Die generierte E-Mail wird also in allen gängigen E-Mail-Programmen und Online-Diensten korrekt angezeigt. 

Wie einfach ist MJML zu nutzen?

MJML verfügt über eine sehr ausführliche Dokumentation, welche auch alle möglichen Parameter für die vom Markup bereitgestellten Blöcke erklärt. Nachdem ich mich durch die Dokumentation gelesen hatte und mit den verfügbaren Beispielen etwas gespielt hatte, ging es an die von mir selbst gesetzte Aufgabe: Den Newsletter, den ich vor rund einem Monat für CUBE erstellt hatte, in MJML nachzubauen und die Ergebnisse zu vergleichen.

Welche Vor- und Nachteile hat MJML?

Während des Aufbaus des Newsletters in MJML habe ich gemerkt, dass die Programmierung - sobald man das Markup verstanden hat - sehr zügig und angenehm von der Hand geht. Durch den Verzicht auf den für Newsletter benötigten tabellenbasierten Aufbau des Frameworks (der Tabellenaufbau wird automatisiert im Hintergrund vorgenommen) und die Reduktion auf für mich als Frontend-Entwickler relativ bekannte und verständliche Blöcke und Abschnitte war es sehr angenehm den Newsletter nachzubauen. Die richtige HTML-Struktur erzeugt MJML automatisch im Hintergrund. Gleichzeitig bietet das Framework im Online-Editor (welchen ich genutzt habe) auch direkt eine Live-Vorschau der erzeugten E-Mail, sowohl in der Desktopansicht als auch in der mobilen Ansicht. Ein Nachteil an MJML ist aktuell noch die Beschränkung auf eine Spaltenebene. Das heißt man kann mehrspaltige Inhalte anlegen, jedoch in diese nicht nochmals Spalten verschachteln. Auch ist die Breite des Inhalts in der Desktopansicht auf 600px beschränkt. In der mobilen Ansicht setzt MJML auf einen 300px breiten Inhalt, wodurch die richtige Darstellung auf allen mobilen Endgeräten garantiert wird.

Abschließendes Fazit:

Ich war sehr positiv von MJML überrascht. Es beschleunigt und vereinfacht den Entwicklungsprozess eines Newsletters deutlich, und liefert gleichzeitig besseren Code als eine komplette Programmierung von Hand. Durch die umfangreiche Dokumentation bleiben auch keine Fragen offen. Wenn man beim Design des Newsletters die beiden genannten Nachteile berücksichtigt, lässt sich MJML auch problemlos im produktiven Einsatz nutzen und damit die Qualität des Endergebnisses zusätzlich steigern.