MJML Framework

MJML ist ein quelloffenes Framework zur Erstellung responsiver HTML-E-Mails, das einen vereinfachten Markup-Code (ähnlich HTML) in produktionsreifen, E-Mail-client-kompatiblen HTML-Code umwandelt.

Rubrik: Online-Marketing & Content · Unterrubrik: E-Mail-Marketing · Niveau: Einsteiger Synonyme / Auch bekannt als: Mailjet Markup Language, MJML-Framework, E-Mail-Template-Framework

Was ist MJML?

Das manuelle Schreiben von HTML-E-Mails ist fehleranfällig und aufwendig: Tabellen-Layouts, MSO Conditional Comments für Outlook, Inline-CSS, Media Queries – all das macht E-Mail-Code komplex und schwer wartbar. MJML löst dieses Problem mit einer eigenen, einfacheren Auszeichnungssprache, aus der automatisch optimierter HTML-Code generiert wird. Es wurde von Mailjet entwickelt und 2015 als Open-Source-Projekt veröffentlicht.

Erklärung

Das Grundprinzip

MJML funktioniert nach dem Compiler-Prinzip: Der Entwickler schreibt MJML-Code (Source), der Compiler wandelt diesen Code in fertiges, produktionsreifes HTML um (Output). Dieses Output-HTML enthält automatisch alle notwendigen Tabellen-Strukturen, MSO Conditional Comments für Outlook, Inline-CSS und Media Queries für responsives Verhalten.

MJML-Syntax

MJML verwendet eigene Tags, die intuitiver sind als reines HTML:

``html <mjml> <mj-head> <mj-attributes> <mj-all font-family="Arial, sans-serif" /> </mj-attributes> </mj-head> <mj-body> <mj-section background-color="#f4f4f4" padding="20px"> <mj-column> <mj-image src="https://example.com/logo.png" alt="Logo" width="200px" /> <mj-text font-size="18px" color="#333333"> Willkommen in unserem Newsletter! </mj-text> <mj-button background-color="#FF6600" href="https://example.com"> Jetzt lesen </mj-button> </mj-column> </mj-section> </mj-body> </mjml> ``

Aus diesem kurzen MJML-Code generiert der Compiler über 100 Zeilen produktionsreifen HTML-Code, inklusive Tabellen-Layout und Outlook-Fixes.

Wichtige MJML-Komponenten

Responsive by Default

Eines der größten Vorteile von MJML: Jede damit erstellte E-Mail ist automatisch responsiv. Mehrere <mj-column>-Elemente in einer Section werden auf mobilen Geräten automatisch gestapelt. Media Queries werden ohne zusätzliche Arbeit generiert.

Installation und Nutzung

MJML kann auf verschiedene Wege genutzt werden:

Online-Editor: Der offizielle MJML-Editor unter mjml.io/try-it-live ermöglicht das Schreiben und Vorschauen ohne Installation.

CLI (Command Line Interface): Nach der Installation via npm lässt sich MJML lokal nutzen: ``bash npm install -g mjml mjml input.mjml -o output.html ``

Node.js API: MJML lässt sich in Build-Pipelines integrieren: ``javascript const mjml2html = require('mjml'); const result = mjml2html('<mjml><mj-body>...</mj-body></mjml>'); console.log(result.html); ``

VS Code Extension: Die MJML-Erweiterung für Visual Studio Code bietet Syntax-Highlighting und Live-Vorschau direkt im Editor.

Anpassung und Komponenten

MJML unterstützt benutzerdefinierte Komponenten. Teams können eigene Komponenten bauen und in einer MJML-Bibliothek zusammenfassen, was konsistente E-Mail-Designs über das gesamte Unternehmen hinweg ermöglicht. Attribute wie font-family, color und border-radius lassen sich global in <mj-attributes> definieren und automatisch auf alle Elemente anwenden.

Grenzen von MJML

MJML abstrahiert viel, aber nicht alles. Sehr komplexe, maßgeschneiderte Designs erfordern manchmal <mj-raw>-Tags, um direktes HTML einzufügen. Neuere CSS-Trends werden nicht immer sofort unterstützt, da MJML auf die E-Mail-Client-Kompatibilität ausgerichtet ist. Zudem ist ein Compiler-Schritt im Workflow notwendig.

Beispiele

1. E-Commerce-Newsletter: MJML-Template mit dreispaltigen Produktkacheln, automatisch auf Einspaltigkeit auf Mobile fallend – ohne eine Zeile Tabellen-Code manuell zu schreiben
2. Willkommens-E-Mail: Simples MJML-Template mit Hero-Bild, Text und einem einzigen CTA-Button, der in Outlook ohne VML-Eigenentwicklung korrekt dargestellt wird
3. Transaktionsmails: Team baut eine MJML-Bibliothek mit Logo, Footer und Button als eigene Komponenten, die in alle Transaktionsmails eingebunden werden
4. Agentureinsatz: Digitalagentur nutzt MJML als Standard für alle Kundenprojekte, spart damit ca. 30–40 % Entwicklungszeit gegenüber manuellem HTML
5. Responsive Hero-Section: <mj-hero> ermöglicht ein Hintergrundbild mit Text darüber – mit automatischem Fallback für Outlook via VML

In der Praxis

• mjml.io: Offizielle Dokumentation, Online-Editor und Vorlagen-Bibliothek
• MJML App (mjmlio.github.io/mjml-app): Desktop-Anwendung für Windows, Mac und Linux
• VS Code + MJML Extension: Für Entwickler mit lokalem Workflow empfohlen
• Integration in Gulp, Webpack oder CI/CD-Pipelines möglich

Kompatibilität mit Plattformen: MJML-generierten HTML-Code kann direkt in Mailchimp, Klaviyo, ActiveCampaign oder Brevo hochgeladen werden.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Wie setze ich MJML konkret um? Der einfachste Einstieg ist der Online-Editor unter mjml.io/try-it-live – kein Download, keine Installation. Dort kann MJML direkt ausprobiert und der generierte HTML-Code exportiert werden. Für professionelle Nutzung empfiehlt sich die VS Code Extension mit der integrierten Vorschau. Das offizielle MJML-Dokumentation bietet gute Beispiele für alle Komponenten.

Was sind typische Fehler bei MJML? Ein häufiger Fehler ist der Versuch, Standard-HTML-Elemente wie <div> oder <table> direkt in MJML-Layouts zu mischen – das führt zu Rendering-Problemen. Außerdem übersehen Einsteiger oft, dass <mj-section> und <mj-column> immer zusammen vorkommen müssen. Schließlich vergessen manche, den MJML-Output vor dem Versand in echten Clients zu testen.

Weiterführend

• MJML Dokumentation & Online-Editor – mjml.io
• GitHub: MJML Quellcode und Issues – github.com/mjmlio/mjml
• Litmus Blog: „MJML for Email Development" (Litmus, 2023) – litmus.com/blog