Responsive E-Mail-Frameworks im Vergleich

Neben den vielen Drag-and-drop-E-Mail-Editoren gibt es noch einen Weg, die Erstellung von E-Mails zu erleichtern und zu beschleunigen: Frameworks. Sie optimieren das Programmieren, ohne es durch eine No-Code-Umgebung zu ersetzen. Über eines der beliebtesten Frameworks, MJML, haben wir schon einen Artikel geschrieben – diesmal nehmen wir seine Konkurrenten unter die Lupe und vergleichen sie.

Responsive E-Mail-Frameworks mit und ohne eigene Tags: Wo liegt der Unterschied?

Klären wir zuerst, was ein Framework ist. Ein Framework ist eine Art Vorlage, ein fertiges Grundgerüst für schnellere Entwicklung. Auf dieser Grundlage schreiben Sie Ihren eigenen Code. Frameworks geben die Struktur vor, legen Regeln fest und bieten die nötigen Werkzeuge, um ein Projekt umzusetzen.

Der Unterschied zwischen Frameworks mit und ohne eigene Tags ist einfach: Ein E-Mail-Framework mit eigenen Tags ist meist eine spezialisierte Auszeichnungssprache. Sie ist praktisch, wenn Ihr Team gut programmieren kann, aber keine Lust hat, sich mit HTML/CSS herumzuschlagen, und/oder die Arbeit automatisieren möchte.

E-Mail-Frameworks ohne eigene Tags sind Sammlungen fertiger Komponenten ohne spezielle Tags, nur mit sauberem HTML/CSS. Das ist der ganze Unterschied.

Natürlich liegen manche Tools irgendwo dazwischen. Wir sehen uns die beliebtesten Optionen an und erklären ihre Vor- und Nachteile, damit Sie entscheiden können, welches Tool Sie nutzen.

E-Mail-Frameworks mit eigenen Tags

1. MJML

MJML ist ein kostenloses Open-Source-E-Mail-Framework, mit dem Sie HTML-E-Mails dank fertiger Komponenten schneller erstellen. Das Framework hat eine Desktop-App und eine Vorlagengalerie, kann E-Mails direkt versenden und ist mit Outlook, Apple Mail, Gmail, Yahoo Mail und Office 365 integriert. Und als Sahnehäubchen hat MJML einen eigenen E-Mail-Editor: Links auf dem Bildschirm bearbeiten Sie Ihre E-Mail, rechts sehen Sie die Vorschau.

Wenn Sie tiefer in dieses Tool einsteigen möchten, lesen Sie unseren Artikel darüber.

2. Foundation For Emails 2

Foundation for Emails 2 bietet ähnliche Funktionen wie MJML: eigene Komponenten, eine Sammlung von E-Mail-Vorlagen und die Möglichkeit, responsive Kampagnen zu erstellen. Mit Foundation for Emails 2 arbeiten Sie auf zwei Arten: in der CSS- oder in der Sass-Version. Einen E-Mail-Editor hat das Framework nicht – hier liegt MJML vorn.

Foundation for Emails 2 haben wir bereits mit MJML verglichen. Das liegt nahe, denn die beiden E-Mail-Frameworks haben viel gemeinsam. Die wichtigsten Gemeinsamkeiten:

• eine Sammlung eigener, wiederverwendbarer Komponenten;
• eine Galerie responsiver HTML-E-Mail-Vorlagen;
• ein Web-Inliner für CSS.

Foundation for Emails 2 nutzt eine eigene Template-Engine namens Inky. Im Grunde macht sie dasselbe wie die Template-Engine von MJML: Mit Kurz-Tags vereinfacht sie die Arbeit mit komplexen verschachtelten Tabellen. So sieht Ihr Code mit Inky aus:

Und so sieht er am Ende als sauberes HTML aus:

Es gibt etwa 10 Tags: Drei davon bauen ein Raster, der Tag block-grid erzeugt … ein Blockraster. Die Namen der Tags menu, title, button und callout sprechen für sich.

Anders als MJML erzeugt Foundation for Emails 2 zwei Versionen einer E-Mail: eine für den Desktop und eine für Mobilgeräte. Sie legen fest, an welchem Breakpoint zwischen beiden umgeschaltet wird, und können mit den Klassen .hide-for-large und .show-for-large einzelne Blöcke in Ihrem Code ein- oder ausblenden.

Foundation for Emails 2 hat zwar wie MJML fertige Vorlagen, aber keinen eigenen No-Code-E-Mail-Editor – Sie können Ihre E-Mail also nicht direkt dort ansehen und bearbeiten. Dafür greifen Sie auf andere Lösungen zurück, zum Beispiel Blocks 😉.

3. HEML

HEML ist eine XML-basierte Auszeichnungssprache in Form eines NPM-Moduls für Node.js. Sie ähnelt HTML/CSS stark, Sie müssen also keine besonderen Regeln lernen, um sie zu nutzen.

Dieses E-Mail-Framework soll das Programmieren von E-Mails der Webentwicklung annähern. Sie können eigene Elemente und Stilregeln anlegen. HEML ist außerdem sozusagen gesellig: Sie können Ihre eigenen Bausteine mit anderen Nutzern teilen und deren Arbeiten verwenden.

Die wichtigsten Funktionen von HEML:

• einfache Bedienung: HEML sieht aus und fühlt sich an wie HTML, Ihr Gehirn muss also keine eingefahrenen Muster umbauen und keine neue Sprache lernen;
• CSS-Inlining standardmäßig (lässt sich abschalten);
• sauberes HTML verträgt sich mit der Sprache HEML, beides lässt sich gleichzeitig nutzen;
• eine Kurzanleitung direkt auf der Startseite.

Ein Beispiel für Code in HEML

E-Mail-Frameworks ohne eigene Tags

1. Maizzle

Maizzle ist ein E-Mail-Framework, das statt eigener Tags das CSS-Framework Tailwind CSS und Node.js nutzt. Eine neue Sprache müssen Sie nicht lernen, Sie arbeiten nur mit sauberem HTML und den Utility-Klassen von Tailwind. Auf Abkürzungen müssen Sie dafür allerdings verzichten.

Maizzle arbeitet mit Umgebungskonfigurationen: Über JS-Konfigurationsdateien bauen Sie eigene Szenarien für Ihren Arbeitsablauf. Für die Template-Logik sorgt PostHTML – Partials, Schleifen und externe Inhalte stehen Ihnen also zur Verfügung.

Die wichtigsten Funktionen von Maizzle:

• die Template-Sprache Nunjucks von Mozilla;
• Unterstützung für GitHub Flavored Markdown;
• Inlining des Codes mithilfe von Transformern;
• das Standardlayout ist auf die Anforderungen von AMP abgestimmt.

2. Pine

Pine ist ein responsives E-Mail-Framework für E-Mail-Entwickler. Im Mittelpunkt steht sauberer Code auf Basis von HTML5. Am besten steigen Sie bei Pine mit dem Boilerplate ein, das bereits alle nötigen CSS-Regeln, Tags und Attribute enthält:

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="x-apple-disable-message-reformatting">
    <title>Pine Email Framework</title>
    <!--[if mso]>
    <xml>
      <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
    <style>
      table {border-collapse: collapse;}
      td,th,div,p,a {font-size: 16px; line-height: 26px;}
      .spacer,.divider,div,p,a,h1,h2,h3,h4,h5,h6 {mso-line-height-rule: exactly;}
      td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family:"Segoe UI",Helvetica,Arial,sans-serif;}
    </style>
    <![endif]-->

    <style type="text/css">

      /*Framework CSS - removed for demo purposes */
    </style>
  </head>
  <body style="box-sizing:border-box;margin:0;padding:0;width:100%;word-break:break-word;-webkit-font-smoothing:antialiased;">

    <div style="display:none;font-size:0;line-height:0;"><!-- Add your preheader text here --></div>

    <table class="wrapper" cellpadding="15" cellspacing="0" role="presentation" width="100%">
      <tr>
        <td align="center" bgcolor="#EEEEEE">
          <table class="container" cellpadding="0" cellspacing="0" role="presentation" width="700">
            <tr>
              <td align="left" bgcolor="#FFFFFF">

                <!-- ADD ROWS HERE -->
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

Die wichtigsten Funktionen von Pine:

• Wrapper, Container und Spalten;
• ein Raster mit 12 Spalten;
• interaktive Komponenten (Akkordeon, Preistabelle, Kundenstimmen usw.);
• Unterstützung für Hintergrundbilder in Outlook;
• Unterstützung für Retina-Bilder.

3. Acorn

Acorn ist eine schlankere Version von Pine. Auch Acorn basiert auf HTML5, nutzt aber ein Raster mit 4 Spalten – Pine dagegen eines mit 12 Spalten.

Die wichtigsten Funktionen von Acorn:

• ein Raster mit 4 Spalten;
• responsive Utilities, Inhalte und interaktive Komponenten;
• eine Auswahl moderner Systemschriften;
• Unterstützung für Retina-Hintergrundbilder in Outlook und Windows Mail.

4. Bojler

Bojler ist ein CSS/Sass-Framework. Es ist mit Sass gebaut.

Bojler braucht Node.js und NPM. Auf der offiziellen Website finden Sie eine vollständige Dokumentation, die Sie durch Installation und Einrichtung führt.

Die wichtigsten Funktionen von Bojler:

• integrierter Inliner;
• automatische Umwandlung von Sass in CSS, CSS-Inlining und Linting für Sass;
• Typografie, Rastersystem, Utility-Klassen und fertige Komponenten;
• ein Webserver mit Live-Reload.

Von Bojler unterstützte Clients und Geräte

Weitere Tools für einfacheres HTML

Einige Lösungen werden oft als HTML-Frameworks bezeichnet, sind aber keine: etwa HTML-Patterns, Vorlagen und Boilerplates. Ja, sie erleichtern die Arbeit – eignen sich aber eher für erfahrene HTML-Entwickler. Diese Tools sind für alle, die ohne Vermittler direkt mit dem Code arbeiten möchten.

Cerberus

Cerberus ist eine Sammlung kostenloser responsiver HTML-Vorlagen und Patterns, die das Erstellen von E-Mails erleichtern. Zu jeder Vorlage gibt es die nötigen Informationen, und jede ist in den beliebtesten E-Mail-Clients getestet.

Liste aller von Cerberus unterstützten E-Mail-Clients

Eine lustige Tatsache: Der Entwickler von Cerberus lehnt CSS-Inliner ab, denn sein Produkt soll einfach bleiben und keine Abhängigkeit wie einen CSS-Inliner brauchen. Außerdem führt Inlining seiner Meinung nach zu aufgeblähtem Code – und schließlich ist die Platzierung des CSS in Cerberus ohnehin schon optimiert.

Beispiel für Code in Cerberus

Kilogram

Kilogram basiert auf Nunjucks, der Template-Engine von Mozilla. Dazu kommen Werkzeuge für die Entwicklung responsiver E-Mails. Bei der Installation von Kilogram erhalten Sie E-Mail-Vorlagen, einen CSS-Inliner und einen HTML-Minifier.

Diese E-Mail-Clients sind mit Kilogram kompatibel:

• alle Versionen von Outlook für den Desktop;
• Office 365 (Web);
• Outlook.com (Web, iOS, Android, Windows Phone);
• Thunderbird (Windows);
• AOL Mail (iOS);
• Yahoo! Mail (Web, iOS, Android);
• Google Inbox (Web, iOS, Android);
• Gmail (Web, iOS, Android);
• Mail.ru (Web, iOS, Android);
• myMail (iOS, Android);
• Rambler Mail (Web, iOS, Android);
• Yandex Mail (Web, iOS, Android);
• Airmail (iOS, OSX);
• Apple Mail (iOS, OSX);
• Spark (iOS);
• Polymail (iOS, OSX).

Inkcite

Inkcite ist ein modulares Designsystem für moderne, responsive E-Mails. Eigene Tags nutzt es nicht, aber etwas Ähnliches: sogenannte „Helpers“, die wie gewöhnliche HTML-Tags in geschweiften Klammern aussehen.

So sieht das aus:

Inkcite hat drei Umgebungen: Development, Preview und Production.

In der Umgebung Development entwickeln Sie die E-Mail und ihre Inhalte lokal.

Die Umgebung Preview dient zum Versand von Testversionen Ihrer E-Mails.

Production ist die letzte Stufe der E-Mail-Entwicklung. Die Bilder werden ins CDN hochgeladen, die URLs ins HTML eingesetzt, Link-Tracking und Tags werden aktiviert, das HTML wird minifiziert, und die Sicherheitsprüfungen laufen.

Welches E-Mail-Framework soll ich wählen?

Sie suchen eine Lösung, die Ihr Programmieren deutlich erleichtert und beschleunigt, und sind bereit, neue Logik, Strukturen und Regeln zu lernen? Dann sind E-Mail-Frameworks mit eigenen Tags das Richtige für Sie.

Sie suchen ein Tool oder eine Plattform, die Sie beim Programmieren begleitet, mehr Struktur hineinbringt und keine neue Sprache mit neuen Regeln verlangt? Dann sind E-Mail-Frameworks ohne eigene Tags Ihre Wahl.

Wenn Sie eher eine Art Assistenten brauchen, greifen Sie zu anderen Tools (die manchmal ebenfalls Frameworks genannt werden): HTML-Boilerplates, Vorlagen und Patterns.

Und falls Ihnen in diesem oder einem anderen Artikel unseres Blogs Fehler oder Ungereimtheiten auffallen, schreiben Sie uns gern an support@useblocks.io. Wir reagieren und korrigieren alles so schnell wie möglich.