MJML - Einfacher Responsive HTML Email Template Markup

23.07.2017

Email Templates, welche passend zum Thema oder zum Webseitendesign aussehen sollen, sind relativ aufwendig zu erstellen. Dachte ich. Auf der Suche nach Abhilfe gibt es eigentlich nur zwei gängige Lösungen, die sehr Ansprechend in der Benutzung sind.

Zum einen ist da Foundation for Emails, welches auch ein normales CSS Framework anbietet. Bei diesem Framework bekommt man in einem Package alles was man zum loslegen brauch. CSS, Templates und Demos, womit man sich einfache E-Mails wie Newsletter oder Benachrichtigungen erstellen kann. Eine halbwegs gute Lösung, kommt bei weitem aber nicht an das von Mailjet programmierte MJML herankommt.

Codebeispiele

MJML Einfaches Beispiel Template

MJML - Schnell E-Mail Html Templates erstellen

Wir können MJML als Programmiersprache - oder Markup für responsive Email Templates ansehen. Ähnlich wie es auch bei anderen Markup der Fall ist, wird die vereinfachte Programmierung von einer anderen ersetzt. Quasi ist das Endergebnis also nicht das, was man selbst geschrieben hat, sondern wird in kompatibles HTML + CSS für E-Mail umgewandelt.

Der große Vorteil ist, dass man anhand von einigen standardisierten Funktionen im Handumdrehen ein Schönes Email Template erstellen kann. Das schöne bei ganzen Sache, es ist nicht ganz so schwer und kostenlos.

Anwendungsgebiete können eigene manuelle E-Mails sein, die man über seinen Klienten wie Apple-Mail oder Thunderbird versendet, oder um das ganze in Systeme oder Seiten zu integrieren. Zwar gibt es auch eine API, die den Schritt zwischen MJML-Markup bis hin zum Versand automatisiert, für meine eigenen Anwendungen reicht es mir allerdings, ein Template zu erstellen, dieses dann händisch in HTML/CSS Format zu konvertieren.

Sehr schön ist, dass man genau wie auch im Webdesign mit Zeilen und Zellen arbeiten kann, die sich je nach verfügbaren Displaygröße dann im Viewport - also E-Mail Programm anders verteilen. Sodass eine Email auf Smartphone sowie Desktop schön anzusehen ist. Auch Sensationell, dass man beim Konzipieren - eines Templates direkt mit Platzhalter, oder gar mit seinen Ausgabefunktionen arbeiten kann, welche dann nach der Konvertierung nur noch per Copy & Paste gespeichert werden müssen. Je nachdem muss man bei den Platzhalter natürlich gedanklich mit überlegen, da bei einer PHP echo Ausgabe natürlich nichts geparsed wird.

Das App kommt mit einer Schnittstelle zum Herunterladen von Beispielen und Templates, die man für seine eigenen Zwecke verwenden kann. Auch ist eine umfangreiche Dokumentation über die verschiedenen Funktionen vom MJML online zu finden.

MJML App Übersicht Template Responsive
MJML Email Responsive APP Development

MJML Syntax und Auto-Vervollständigung

Während das MJML App selbst keine Vervollständigung verfügt und von mir nur für den Konvertierungsvorgang zu HTML genutzt wird, gibt es ein paar Plugins für den universellen Editor Atom, der auch ein Syntax Plugin für MJML mit sich bringt. Zwar bietet dieses Plugin andersrum nicht gleich eine Exportmöglichkeit, um den HTML Code zu kopieren, so ist man zwangsläufig auf das MJML App angewiesen, solange man nicht die API nutzt. Vielleicht ist da in der Zukunft aber noch eine Erweiterung des Atom Plugins vorgesehen.

Langfristig gesehen könnte ich mir vorstellen, dass die Verwendung einer solchen Markup-Sprache als positiv auswirken könnte. Insbesondere wenn sich mit der Zeit vielleicht die Darstellung von HTML in einem E-Mail Client wie Thunderbird verändert, könnte dies nahtlos vom MJML App in Form eines Updates verändert werden, ohne dass man am eigentlichen Syntax bzw. der Template Programmierung eine Änderung durchführen müsste. So könnte man sich selbst mit der Entwicklung seiner E-Mail Templates befassen, anstatt immer wieder nach Änderungen der Mail Apps zu recherchieren zu müssen.

MJML Beispiel GIF
MJML Beispiel Code GIF

Responsive E-Mail Einsatz im Portfolio

Jetzt kommt die Frage für was man MJML oder auch Foundation for Email einsetzen kann? Neben manuellen E-Mails, die man zum Antworten mit Textbausteinen etwas visuell auf-motzt, findet sich der Haupteinsatzzweck hauptsächlich im Web wieder. Gezielte Möglichkeiten sind hier bei allen Reaktionen für Anfragen, oder automatisierte Benachrichtigungen anstatt einer einfachen Text-Email, diese mit HTML auszuschmücken.

Konkrete Beispiele sind da

  • Newsletter Eintragungen
  • Kontaktformulare
  • Bestellbestätigungen
  • Kommentar-Verifizierungsmail
    u.v.m.

Das kommt schließlich auf den jeweiligen Betreiber an, welche Art von E-Mails er versendet. Mit dem geringen Aufwand pro E-Mail Template kann man geschwind seine Text-Emails mit HTML austauschen. Das wird beim Empfänger dann zum Wow-Effekt. Auch könnte man so zum Beispiel Inhalte, oder auch Profile auf soziale Medien mit einer visuellen Gestaltung fördern.

MJML Fertiges E-Mail Template

Aus unserem Beispiel haben wir mit MJML eine dynamische Benachrichtigung nach Eintragung eines Kommentars in diesem Blog erstellt. Es wird mit dynamischen Platzhaltern der Name, sowie ein Button zum Freischalten des Kommentars erstellt. Als sehr vereinfachtes Beispiel haben wir für eine solche responsive E-Mail Benachrichtigung nur ein paar Minuten und einige Zeilen MJML-Markup genutzt, welche wir dann schließlich zu HTML umgewandelt haben.

Die Komplexität des Codes ist vergleichbar mit HTML. Der Syntax und die Funktionsweise ist mit Hilfe der Dokumentation innerhalb weniger Minuten verstanden.

Gutachten Unfall Email Responsive MJML

Zu MJML
MJML Dokumentation