Tutorial: Responsive E-Mail Templates mit MJML.io

Tutorial: Responsive E-Mail Templates mit MJML.io

Responsive Webseiten sind mittlerweile Standard. Der Zugriff auf Internetseiten von Smartphones und Tablets hat in den letzten Jahren enorm zugenommen. Je nach Thema können die Zugriffszahlen von mobilen Endgeräten locker bei 70 – 80% liegen.

Aber was ist eigentlich mit E-Mails? Selbstverständlich kann man auf fertige E-Mail Templates zurückgreifen. Die meisten Newsletter-Services bieten heutzutage eine große Menge von Vorlagen an, die auf den meisten Endgeräten und E-Mail Clients getestet wurden. Teils kostenlos, teils kostenpflichtig. Aber was ist, wenn es perfekt zum Webseiten-Design passen soll, oder ich besondere Anforderungen habe, die mir kein fertiges Template bietet? – Dann ist selber machen angesagt 🙂

E-Mail Templates selber bauen – Welcome to the ‘90s

Die 90er

Wer selbst schonmal ein eigenes E-Mail Template gebaut hat, kennt die Problematiken. Da die meisten E-Mail Clients in den 90er Jahren stehen geblieben sind, muss man hier auf das gute alte Tabellen-Design zurückgreifen. Moderne HTML-Elemente oder CSS-Properties können nicht verwendet werden.

Dazu kommen unzählige E-Mail Clients, Betriebssysteme und Bildschirmgrößen, die durch die Popularität von Smartphones und Tablets weiterhin enorm gewachsen sind. Ein responsives E-Mail Template sollte natürlich so gut wie alle Fälle abdecken.

MJML.io: E-Mail Framework für responsive E-Mails

MJML.io Webseite
Screenshot der MJML Webseite

Mit MJML haben Entwickler der E-Mail Marketing Software Mailjet eine eigene Markup Sprache entwickelt, die das Umsetzen von responsiven E-Mail Templates um einiges vereinfacht. Bevor die “MailJet Markup Language” als Open Source Sprache der Öffentlichkeit bereitgestellt wurde, war sie 1 Jahr lang nur für das interne Entwicklerteam zugänglich und wurde in diesem Zeitraum ausreichend getestet und weiterentwickelt.

In diesem Tutorial möchte ich Dir zeigen, wie Du mit MJML starten kannst und das perfekte E-Mail Template in Deinem Webseiten-Design und mit Deinen persönlichen Anforderungen erstellen kannst. Let’s go!

MJML Online-Editor oder Kommandozeile

Bevor wir mit der Markup Language loslegen, möchte ich Dir erst zeigen, welche zwei Möglichkeiten Du hast, um mit MJML eigene Templates zu entwickeln.

Die wohl einfachste Möglichkeit ist der “Try it live”-Editor auf mjml.io. Zwar suggeriert der Name, dass man mit diesem Editor MJML lediglich ausprobieren kann, aber so ist es nicht. Der Online-Editor ist ein vollwertiger Editor um Dein Template mit MJML zu entwickeln. Vorteil hier ist, dass Du im rechten Fenster immer sofort das Ergebnis siehst und der Code, den Du schreibst “on the fly” gerendert wird.

MJML Try it live editor
Der „Try-It-Live“-Editor von MJML

Eine weitere Möglichkeit ist, MJML auf Deinem PC zu installieren und per Kommandozeile Deine Templates zu rendern. Den Vorteil der Live-Vorschau hast Du hier leider nicht. Jedoch dafür keine Abhängigkeit zur MJML Webseite und die Möglichkeit MJML in Deine Webanwendung einzubauen. Wenn Du wissen willst, wie das Kommandozeilen-Tool installiert wird, kannst Du das hier nachlesen: https://www.npmjs.com/package/mjml

Da ich Dir in diesem Tutorial hauptsächlich die Markup Language vorstellen möchte, beschränke ich mich mal auf den “Try it live”-Editor und gehe nicht näher auf das Kommandozeilen Tool ein.

Halt mal: Was macht denn MJML eigentlich?

MJML ist wie bereits gesagt eine Markup Language, quasi wie HTML. Was MJML im Hintergrund macht ist, dass es den mit MJML-Tags ausgezeichneten Text in HTML rendert. Und zwar in HTML, das von den meisten E-Mail Clients identisch dargestellt wird.

Genauso wie beispielsweise Twitters Bootstrap, stellt dieses E-Mail Framework bestimmte Komponenten bereit, die ganz einfach über die Markup Language angesprochen und per Attribute angepasst werden können.

Die Komponenten im Überblick

Die Auswahl der verfügbaren Komponenten ist mit der kürzlich veröffentlichen neuen Version wirklich enorm gestiegen. Alle hier aufzuzeigen würde den Rahmen sprengen. Deshalb zeig ich Dir hier eine kleine Auswahl der Komponenten. Alle Komponente kannst Du übrigens hier einsehen: https://mjml.io/documentation/#components

Grundlegende Layout Komponenten

Ähnlich wie bei Twitter Bootstrap gibt es ein Grid-Layout. Hier mal ein Beispiel für ein einfaches Layout mit 3 Spalten (Columns):

mjml 3 spalten layout

Zu den weiteren Standard Komponenten zählen beispielsweise:

  • Listen (mj-list)
  • Tabellen (mj-table)
  • Bilder (mj-image)
  • Buttons (mj-button)
  • Und einige weitere…

Mit dem Tag mj-raw kann auch direkt HTML in das E-Mail Template eingefügt werden. Dieser Abschnitt wird dann nicht gerendert, sondern direkt so ausgegeben, wie er von Dir geschrieben wurde. Nun noch zu einigen Komponenten, die nicht zum Standardrepertoire eines E-Mail Frameworks gehören.

Vorgefertigtes Rechnungs-Layout: mj-invoice

rechnungslayout für emails

Mit dem Tag mj-invoice hast Du die Möglichkeit eine einfache Rechnung per E-Mail zu designen. Dabei ist mj-invoice-item ein Child-Tag von mj-invoice, welches es Dir erlaubt die Produktbezeichnung, den Preis und die Stückzahl in der Rechnungstabelle darzustellen.

Responsive Navigationsleiste in E-Mails: mj-navbar

Ein wirklich tolles Feature von mjml ist die Navbar. Damit hast Du die Möglichkeit, vor allem bei langen E-Mails, eine Navbar einzufügen, die sich tatsächlich auch zu einem so genannten „Hamburger-Menü“ umformatiert, sobald es auf mobilen Endgeräten angezeigt wird.

navbar
Beispiel Navbar in E-Mails

Fertige Templates als Vorlagen nutzen

Du siehst, mit MJML, kannst Du Dein perfektes responsive E-Mail Template erstellen, welches das Erscheinungsbild Deiner Webseite auch in E-Mails fortsetzt. Bevor Du mit Deinem eigenen Template startest, solltest Du Dir auf jeden Fall die fertigen Beispiele von MJML ansehen. Sie zeigen nochmal genauer, wie die einzelnen Komponenten funktionieren.

Wenn Du mit Deinem Template fertig bist und es in Deine E-Mail Marketing Software einbinden möchtest, kannst Du im Live-Editor ganz einfach auf den Button „View HTML“ auf der rechten Seite des Editors klicken. Nun kannst Du den gerenderten HTML Code kopieren und in die entsprechende Software einfügen. Fertig ist Dein eigenes responsives E-Mail Template.

Wie hast Du Deine E-Mail Templates bisher gemacht? Kennst Du noch einfachere Möglichkeiten?

Ich freue mich auf Dein Feedback in den Kommentaren!

Noch keine Kommentare, sei jetzt der erste! ;)

Was denkst du?

Lerne aus der Praxis

Hier bekommst du kostenlose Erfahrungen von Gründern für Gründer. Lerne, wie du dein Business zum Erfolg bringst.

Sponsoren

Finanzmanagement für kleine Unternehmen

Immer frischer Kaffee für´s Büro

© 2017 by Framework. Powered by Chimpify.