MJML: Darum haben wir eine Open-Source-Lösung entwickelt

Wie alles begann

In den letzten 5 Jahren haben wir Unternehmen beim Versenden von über 20 Milliarden E-Mails geholfen, mit einem wichtigem Ziel im Blick: Zustellbarkeit (engl. deliverability). Es ist ausschlaggebend, dass es die E-Mails unserer Nutzer auch in den Posteingang ihrer Kunden schaffen, vor allem da Zustellbarkeit direkt den ROI beeinflusst.  

Neben Zustellbarkeit gibt es noch einen weiteren, essentiellen Faktor für Kundenbindung: User Experience. In einer Welt, in der die Hälfte aller E-Mails von mobilen Geräten gelesen wird, ist das umso wichtiger. Deswegen haben wir 2015 Passport entwickelt, unser Drag-and-Drop-Tool, mit dem Nutzer einfacher responsive E-Mails erstellen können.

Oberflächlich gesehen erlaubt Passport es seinen Nutzern, durch einfaches Drag-and-Drop eine E-Mail zusammenzustellen, aber um das zu ermöglichen übersetzt unser System diese Aktivitäten in ein responsives HTML-Template. Um es präziser zu formulieren: Eine E-Mail wird unserem System in JSON “beschrieben”, damit es sie in responsiven HTML-Code umwandeln kann.

Wir haben schnell erkannt dass dieses System eine noch größere Wirkung außerhalb von Passport haben könnte. Was wäre, wenn wir den Kern unseres Tools direkt in die Hände unserer User geben würden? Was, wenn sie direkt mit dem System kommunizieren könnten? Also entschieden wir uns, es auszuprobieren.

Und um es noch benutzerfreundlicher zu machen, ersetzten wir die JSON-Beschreibung mit einer Markup-Sprache die fast wie HTML ist.

Das Prinzip ist also das Gleiche wie HTML - aber einfacher, responsiv im Design und semantisch. Wir erstellten Tags wie <<mj-section> und <mj-column>, mithilfe derer ihr schnell und einfach E-Mails erstellen könnt.

Von einer Markup-Sprache zu einer Komponenten-Bibliothek

E.mail wird auf unterschiedlichste Art und Weise genutzt: Weekly Digests, Willkommens-E-Mails, Rechnungen.. die Liste ist lang. Auch wenn es kaum möglich ist, alle verschiedenen Arten von Kampagnen aufzulisten, die eigentliche Content-Struktur ist sehr ähnlich. Das Zentrum einer responsiven E-Mail ist das Spalten-Layout. Wenn Sie dieses aber in HTML ausbauen möchten, wird die ganze Sache langwierig, repetitiv und um ehrlich zu sein - nervenaufreibend.

Schauen wir uns zum Beispiel eine Rechnung an. Im besten Falle bekommt man etwas in diesem Format:

  Die gute Nachricht ist, dass die MJML-Engine auf React.js basiert, was es ermöglicht, einzelne Komponenten zu nutzen und zu erstellen. Können Sie sehen, was wir hier gemacht haben? Ja, MJML macht es möglich, Ihre eigenen <mj-invoice> und <mj-item&gt Komponenten zu erstellen und den beängstigend ausschauenden Code von oben mit dem Folgenden zu ersetzen: Jeder generierte HTML-Code ist auch mit den populärsten E-Mail-Anbietern .kompatibel.

Ein Dankeschön an die Community

Letztendlich wissen wir aber eines: Wir hätten ohne euch, der Community, und allem was wir von euch gelernt haben, MJML niemals fertigstellen können. Es wäre nicht fair gewesen, diese Technologie für uns zu behalten. Deswegen haben wir uns entschieden, MJML als Open-Source unter der MIT-Lizenz anzubieten, so dass die Community die Engine hinter Passport kostenfrei nutzen kann. Die MIT-Lizenz ist unglaublich simpel und offen.

Anders als die GPL-Lizenz macht sie es möglich, MJML in einer größeren Applikation zu nutzen ohne die gesamte Applikation Open-Source zu schalten.

Das bedeutet, ihr könnt MJML nutzen um HTML-E-Mails zu gestalten oder sogar die MJML-Engine in ein Produkt eurer Wahl integrieren. Ihr könnt uns auch helfen, MJML zu verbessern und auszubauen. Wenn ihr mehr darüber erfahren wollt, wie MJML funktioniert, geht auf unsere Dokumentations-Seite.

Ihr seid herzlich eingeladen, uns eure Meinung zu MJML mitzuteilen und beizutragen, dass der HMTL-Output von MJML perfekt funktioniert und mit so vielen E-Mail-Anbietern wie möglich konsistent ist. Wir hoffen, die Vielfalt unserer MJML-Komponenten wird euch inspirieren, kreative und spannende E-Mails zu gestalten, die euren Bedürfnissen entsprechen. Wenn ein Komponent fehlen sollte, ist das Beste was ihr tun könnt, einen Neuen zu entwerfen damit andere ihn auch nutzen können.

Was jetzt?

Wir werden regelmäßig unseren PR-Anfrage auf Github bearbeiten um die besten Komponenten für die Community zu erstellen. Unser Ziel ist, MJML gemeinsam mit unserer Community wachsen zu sehen, damit es mit der Zeit sogar noch besser wird. Es wird also regelmäßige Updates geben, die jede Veränderung im HTML miteinbinden wird, damit ihr im E-Mailing stets ganz vorn steht.