MJML zu responsive E-Mail-HTML-Wandler

MJML (Mailjet Markup Language) ist eine Open-Source-Markup-Sprache, die entwickelt wurde, um die Erstellung responsivener E-Mails zu erleichtern. Das manuelle Schreiben von HTML-E-Mails ist aufwendig, weil E-Mail-Client (besonders ältere Versionen von Outlook) verschachtelte Tabellen, eingebaute Styles und MSO-Bedingungen benötigen, um korrekt angezeigt zu werden. MJML bietet eine höhere Ebene von Komponenten (mj-section, mj-column, mj-button, mj-image, mj-text), die automatisch in das Legacy-HTML mit Tabellen kompiliert werden, sodass Sie eine einzige Quelle erhalten, die konsistent auf modernen und älteren Clients gerendert wird.

E-Mail-Client sandboxen und ändern das empfangene HTML. Viele Clients entfernen Styles, ignorieren externe Stylesheets und erlauben nur einen kleinen Teil der CSS-Eigenschaften. Outlook für Windows verwendet den HTML-Renderer von Microsoft Word, der keine Unterstützung für Flexbox, Grid oder sogar Floats hat. Der einzige Layout-Primitiv, das überall korrekt gerendert wird, ist die HTML-Tabelle mit expliziten Breitenattributen und eingebauten Styles auf jedes Element. MJML verbirgt diese umständigen und fehleranfälligen Struktur hinter sauberen Komponenten.

MSO-Bedingungskommentare sind spezielle HTML-Kommentare im Format die nur Microsoft Outlook (Windows) verarbeitet. Sie ermöglichen es, alternative Markup für Outlook zu versenden – beispielsweise VML (Vector Markup Language) Formen für fehlerfreie Buttons, die als echte Rechtecke in Outlooks fehlerhaften Renderer gerendert werden. Der kompilierte MJML-Ausgang enthält diese Bedingungen, damit eine einzelne Vorlage sich problemlos von Apple Mail und Gmail bis zu Outlook 2007 und später degradiert.

Responsives E-Mail kombiniert typischerweise zwei Strategien: eine flüssige, tabellenbasierte Desktop-Layout (max-Breite um 600px, zentriert) und eine Reihe von CSS-Media-Abfragen, die Spalten vertikal stapeln und Schriftgrößen auf schmalen Bildschirmen anpassen. Da einige Clients Media-Abfragen ignorieren, emittiert MJML ein Layout, das bereits an gängige Breiten anpasst, indem es prozentuale Tabellen verwendet, und schichtet dann Media-Abfrage-Überläufe auf, die von Clients unterstützt werden. Das Ergebnis ist eine E-Mail, die auf einem Smartphone aussieht, selbst wenn die CSS-Unterstützung unvollständig ist.

Der geschmackvoll formatierte Ausgabe behält die Einrückung und Zeilenumbrüche bei, was hilfreich ist, wenn die Markups inspiziert, verglichen oder in eine Code-Review eingefügt werden. Der minimierte Ausgabe entfernt Leerzeichen und Kommentare, um den Payload zu verkleinern – nützlich, weil einige ESPs pro Kilobyte berechnen und Gmail Nachrichten über etwa 102 KB abschneidet. Funktionell erzeugen beide die gleiche gerenderte E-Mail; wählen Sie geschmackvoll formatiert, wenn Sie schreiben und minimiert, wenn Sie senden.