Auswahl einer Responsive Email Framework: MJML vs. Foundation für E-Mails

0
28

Umsetzung von responsive E-Mail design kann ein bisschen ein ziehen. Gebäude-responsive E-Mails überhaupt nicht einfach ist, es ist wie eine Zeitmaschine zurück zu 2001, als wir alle coding-website-layouts in Tabellen mithilfe von Dreamweaver und Fireworks.

Aber es gibt Hoffnung! Wir haben Werkzeuge zur Verfügung, die machen, bauen E-Mail viel einfacher und mehr wie die Codierung einer modernen Website. Werfen wir einen Blick auf ein paar verschiedene frameworks, die zur Vereinfachung der Dinge für uns.

Erstens, die Situation

Sie müssen kompatibel sein mit vielen alten E-Mail-clients, von denen viele nicht einmal die Unterstützung der meisten grundlegenden web-standards (Schwimmer, anyone?). Sie müssen auch mit allen Arten von webmail-clients, die sich, aus Sicherheits-oder technischen Gründen gemacht haben, Ihre eigene subjektive Entscheidungen darüber, wie, um Ihre wertvolle E-Mail.

Außerdem, jetzt E-Mails werden gelesen von verschiedenen Geräten, mit sehr unterschiedlichen Ansichten und Anforderungen.

Die beste Lösung, wie es oft der Fall, wäre, Dinge einfach zu halten und halten Sie sich an grundlegenden ein-column-designs, über mehrere Spalten nur für Menüs oder einfache interface-Elemente der bekannten Breite. Produzieren Sie großartige, effektive designs mit nur einer Spalte, nachdem alle.

Aber die end-Benutzer und clients, die verwendet werden, um die “normalen” browser-basierten web, können Sie Ihre E-Mail-viewing-Erlebnis auf die gleichen hohen standards, die Sie für die Anzeige von web-Seiten in Sachen Grafik und Reaktionsfähigkeit. Daher, komplexe designs sind zu erwarten: mehrere Spalten, verschiedene Verhaltensweisen, die auf mobilen Geräten im Gegensatz zu desktops, viele Bilder etc., die haben all das umgesetzt werden, konsequent und pixel-perfekt in allen E-Mail clients. Welche Optionen sind verfügbar, um allen das passieren?

Option 1: Erstellen Sie Von Grund Auf Neu

Eine option, die Sie wählen konnten, ist die Kodierung jedes E-Mail von hand, halten Sie es einfach und testen Sie es, während Sie gehen. Dies ist eine praktikable option nur, wenn:

  1. Sie haben ein sehr einfaches design zu implementieren.
  2. Sie haben direkte Kontrolle über das design, so können Sie schließlich die Dinge zu vereinfachen, wenn Sie nicht rauskommen können mit einer einheitlichen Lösung für das, was Sie zu tun beabsichtigte.
  3. Können Sie akzeptieren, einige Grad des Abbaus auf einige ältere Kunden: Sie haben nichts dagegen, wenn Sie Ihre E-Mail wird nicht genau gleich Aussehen (oder auch nur schlecht) in der alten Outlook-clients, zum Beispiel.
  4. Sie haben eine Menge Zeit auf Ihre Hände.

Natürlich müssen Sie testen Sie Ihr design stark. Campaign Monitor hat eine große CSS-guide können Sie die Referenz, die während des build-Prozess und ist so in der Art wie Kann ich das Nutzen, aber für E-Mail. Danach empfehle ich die Verwendung von automatisierten test-Suiten, wie Litmus oder Email on Acid. Beide bieten Ihnen eine komplette Test-suite und eine Vorschau, wie Ihre E-Mail Aussehen wird, auf eine Vielzahl von E-Mail-clients. Erwarten Sie einige überraschungen, obwohl, weil oft das gleiche design sieht nicht korrekt ist, auch auf der gleichen E-Mail-client, wenn man auf verschiedenen Browsern oder auf verschiedenen Betriebssystemen. Fonts gerendert werden, die Margen werden sich ändern, und so weiter.

Screenshot von der gleichen E-Mail-design getestet auf verschiedenen Geräten auf E-Mail on Acid.

Option 2: Verwenden Sie eine Häufig verwendete Vorlage

Eine weitere option ist die Verwendung einer der verschiedenen Textbausteinen zur Verfügung, wie Sean Powelll, die Sie hier finden können. Textbausteinen bereits viele der Eigenheiten der verschiedenen E-Mail-clients und Plattformen. Dies ist sinnvoll, wenn:

  1. Sie arbeiten alleine oder in einem kleinen team.
  2. Sie haben viel Erfahrung, so dass Sie bereits wissen, die meisten der Eigenheiten von E-Mail-Formatierung, weil Sie getroffen haben, bevor Sie.
  3. Sie haben Ihre eigenen tools für die Verwaltung von Komponenten (für die verschiedenen Newsletter, die einige Stücke von design), inlining Stile (und ja, Sie sollten inlining Ihre Stile, wenn Sie Ihre E-Mails Ziel eines internationalen Publikums), und haben eine Art von Entwicklungs-toolkit im Ort (Gulp, Grunt oder etwas ähnliches), die eine Automatisierung für Sie.
  4. Sie haben die Art von Ansatz, wo Sie möchten, um zu kontrollieren alles, was in dem code, den Sie produzieren, und nicht, wie angewiesen, auf externe tools.
  5. Sie bevorzugen zu lösen, Ihre eigenen Fehler, anstatt Sie zu lösen, mögliche bugs, verursacht durch das Werkzeug, das Sie verwenden.

Option 3: Verwenden Sie einen Rahmen

Jedoch, wenn einer der folgenden Punkte gelten für Sie:

  1. Sie haben, um zu produzieren eine Menge von E-Mail-Vorlagen mit freigegebenen Komponenten.
  2. Der Auftrag durchgeführt werden muss, wird von einem team von Entwicklern, die vielleicht ändern und/oder ein variables Maß an Kompetenz und Erfahrung mit E-Mail-Implementierung.
  3. Sie haben wenig oder keinen Einfluss auf die original-design.

…dann werden Sie wahrscheinlich profitieren eine Menge von mit einem Rahmen.

Derzeit sind zwei der interessantesten und beliebtesten frameworks verfügbar sind MJML und die Grundlage für E-Mails. Die größten Vorteile in der Verwendung entweder framework ist, dass Sie bereits gelöst haben für Sie die meisten Macken von E-Mail-clients. Sie bieten Ihnen auch mit einem etablierten workflow, die Sie Folgen können, sowohl alleine und als team. Sie auch mit responsive design sehr gut, wenn auch unterschiedlich von einander.

Schauen wir uns eine übersicht über die beiden frameworks und vergleichen Sie die besten Anwendungsfälle für jede vor dem auftragen einige Schlussfolgerungen.

MJML

MJML ist ein Projekt, das erstellt wurde intern von Mailjet, ein Unternehmen, spezialisiert auf E-Mail-marketing-tools. Es war dann open-Source. Es arbeitet mit seinen eigenen, HTML-wie templating-Sprache, mit seinen eigenen tags. Zum Beispiel:

<mj-text “>Dein text hier</mj-text”>

Beim kompilieren der endgültige code, MJML konvertieren der tags in HTML für alles, was aus den Tabellen, um die benutzerdefinierten Komponenten, die Sie für Sie erstellt, der alle mit seiner internen engine. Es nimmt die schwere Arbeit für das erstellen von komplexen markup und es ist alles getestet worden.

MJML hat eine Reihe von standard-Komponenten. Sie enthalten Abschnitte, Spalten, Gruppen, Schaltflächen, Bilder, social-links (die sind sehr einfach zu erzeugen), Tabellen, Akkordeons, etc. Sie schließen sogar ein pre-styled-Karussell, das sollte in den meisten clients. Alle diese Komponenten lassen sich gut in ansprechende E-Mails, abgesehen von den “Rechnung” – Komponente, die ich nicht in meinen tests. Alle diese Komponenten haben Parameter, die Sie übergeben können, die in Ihrem code anpassen, Ihr Aussehen.

Zum Beispiel, die social-links-Komponente ermöglicht es Ihnen, stack-icons vertikal und horizontal, und wählen Sie hintergrund Farben für die zugehörigen Symbole. Es gibt tatsächlich eine Menge mehr Parameter, die Sie mit spielen können, alle mit der Absicht, ermöglicht größere Flexibilität. Auch die logo-Bild-Dateien sind bereits im Paket enthalten, das ist ein großes plus.

Hier ist eine Vorschau von eine einfache Konfiguration der social links-Komponente:

Screenshot aus der MJML website.

Sie können auch eigene benutzerdefinierte Komponenten erstellen, oder verwenden Sie Komponenten, die von der community erstellt. Es ist nur eine community-Komponente verfügbar im moment, aber.

MJML Griffe Reaktionsfähigkeit automatisch, was bedeutet, dass die Komponenten wechseln von multi-Spalte (mehrere Elemente in der gleichen Zeile), um einzelne Spalten (Elemente werden von einer unter dem anderen anstelle von side-by-side) ohne aktive intervention von Seiten der Entwickler. Dies ist eine sehr flexible Lösung und funktioniert in den meisten Fällen, aber es gibt dem Entwickler ein wenig weniger Kontrolle über das, was passiert genau in der Vorlage. Als die docs erwähnen, es ist Wert zu halten, daran, dass:

Für ästhetik Zwecke, MJML unterstützt derzeit maximal 4 Spalten pro Abschnitt.

Dies ist wahrscheinlich nicht nur eine ästhetische Präferenz, aber auch über die Begrenzung der möglichen Nachteile von zu vielen Spalten. Je mehr Spalten, desto unberechenbarer der Ausgang, denke ich.

Wie die Arbeit Mit MJML

MJML so arbeiten kann, wie ein Kommandozeilen-tool, das Sie installieren können mit npm, und geben Sie Ihre Dateien lokal, mit Befehlen wie:

$ mjml -r-index.mjml -o index.html

Dies kann integriert in Ihren build-Verfahren über Gulp oder dergleichen, und in Ihrer Entwicklung arbeiten, indem Sie einen watch-Befehl, die aktualisiert die Vorschau jedes mal, wenn Sie sparen:

$ mjml –Uhr-index.mjml -o index.html

MJML hat plugins für Atom und Sublime Text. In Atom, es auch liefert eine Echtzeit-Vorschau Ihres Layouts, die kann regeneriert werden bei jedem speichern. Ich habe nicht versucht, es nicht persönlich, aber es scheint sehr interessant:

Bild vom Atom.io

MJML hat auch seine eigene einfache desktop-app, und es ist kostenlos. Sie können Ihren code und Komponenten, die es haben bauen Sie Ihre Entwürfe für Sie, und bekommen Sie eine Echtzeit-Vorschau der Ergebnisse, sowohl für mobile und für desktop. Ich finde, dass es ziemlich gut funktioniert auf Ubuntu, aber der einzige Nachteil, die ich gefunden habe, ist, dass Sie sollten nie, nie, nie öffnen Sie Ihre Dateien mit einem anderen editor, während Sie sich öffnen, auf die app, weil die app abstürzt und der Inhalt der Datei geht verloren.

Hier sind einige screenshots der Vorschau bei der Arbeit:

Desktop-Vorschau von E-Mail
Handy-Vorschau der E-Mail

Die app kann auch integriert sein, mit einer kostenlosen Mailjet-Konto, das ermöglicht das senden von test-E-Mails sofort zu sich. Das ist sehr praktisch, um schnell zu überprüfen, problematische Kunden, wenn Sie Ihnen direkt zur Verfügung. (Ich würde vorschlagen, nehmen hin, dass die alten Windows-Maschine müssen Sie in den Vorratsraum, um zu überprüfen, Dinge, die Sie in Outlook, und tun es so oft wie möglich.) Allerdings würde ich noch empfehlen, entweder Litmus oder Email on Acid testen Sie Ihre E-Mails cross-client, bevor Sie Sie, weil man kann nie vorsichtig genug sein und standards für E-Mail ändern können, wie Sie in Browsern.

Insgesamt habe ich festgestellt, MJML sehr einfach zu bedienen. Allerdings, wenn ich versuchte, eine pixel perfekte Vorlage, die war identisch mit dem design unserer client angefordert, ich hatte einige Schwierigkeiten mit benutzerdefinierte Seitenränder für einige Bilder. Nicht alle der Komponente Parameter funktioniert wie erwartet, von Ihrer Beschreibung in der Dokumentation. Insbesondere hatte ich einige Probleme customizing-Bild Margen und Polsterung zwischen desktop und mobile.

Vorteile

  • Vorgefertigte Komponenten
  • Integration mit Mailjet
  • Einfach zu verwenden, mit sofortiger Vorschau Ihrer Arbeit (auf Atom-und Desktop-App)

Nachteile

  • Ein bisschen weniger zuverlässig als Grundlage für E-Mails, wenn Sie zu tun haben, pixelgenaue designs
  • Einige Komponenten haben Parameter, die nicht wie erwartet funktionieren
  • Desktop-App nicht absolut stabil
  • Kommt nicht mit einem strukturierten Satz von Ordnern, die für Ihren Inhalt (siehe Stiftung unten)

Grundlage für E-Mails

Grundlage für E-Mails (früher bekannt als Farbe — einfügen obligatorischen Prinzen zitieren) ist ein framework von Zurb, die gleichen Leute, die uns gebracht responsive front-end framework, Foundation for Websites.

Herunterladen, wenn Sie das Starter-Kit erhalten Sie eine vollständige Entwicklungsumgebung, die komplett mit Node.js Befehle, um das Projekt auszuführen. Es wird die Einrichtung zu einem Knoten routine und sogar öffnen Sie Ihren browser, um Ihnen eine sofortige Vorschau Ihrer Arbeit.

Die Dateien, die Sie verwenden, sind bereits in Ordnern und Unterordnern organisiert, mit einem klaren Hinweis, wo Ihre Sachen. Zum Beispiel, es hat Verzeichnisse, die speziell für partials, templates und Bilder. Ich finde dieses feature sehr wichtig, denn es ist sehr leicht, mit verschiedenen Ordnern, wenn Sie arbeiten in einem team, und dieses führt zu eine Menge verlorene Zeit auf der Suche nach Zeug, das ist nicht, wo Sie es erwarten werden. Die Durchsetzung der Konventionen wird nicht eine Einschränkung; wenn Sie in einem team arbeiten ist es unverzichtbar.

TFFKAI — Rahmen, Ehemals Bekannt Als Tinte

Grundlage für E-Mails kommt mit einer vorformulierten Vorlage, die den Ausgangspunkt für Ihren code. Es ist vollständig kommentiert, so dass Sie wissen, wie Sie erweitern mit Ihrem code. Es kommt mit SASS/SCSS-Unterstützung, das ist sehr sehr praktisch für komplexe Projekte. Es kommt auch mit seinen eigenen inliner, so dass Sie nicht haben, um sorgen über das konvertieren alle Ihre CSS (oder SASS/SCSS) in inline-styles.

Es gibt eine template-engine, die hinter diesem framework namens Inky. Und genau wie MJML, es hat benutzerdefinierte tags, die automatisch in HTML konvertieren, wenn es kompiliert. Gibt es tags wie <container>, <Zeile>, <Spalte>, die verwendet werden, um erstellen Sie Ihr raster. Das raster basiert auf einem 12-Spalten-system, das Ihnen erlaubt zu unterteilen Ihr layout sehr genau. Warum 12? Denn es ist teilbar durch 2, 3, 4 und 6, so dass es sehr einfach zu machen, ein 2-Spalte 3-Spalte 4-Spalte, oder 6-Spalten-layout.

Grundlage für E-Mails verwendet Panini, den code zu kompilieren. Panini ist eine benutzerdefinierte Bibliothek, die kompiliert HTML-Seiten durch die Verwendung von layouts. Es unterstützt die LENKER-syntax und es gibt einige Helfer, die Sie verwenden können, um das Verhalten anpassen von Komponenten, je nachdem, wo Sie benutzt werden. Sie können auch Ihre eigenen Helfer, wenn Sie benötigen und legen Sie jede Vorlage, die benutzerdefinierte Variablen mit benutzerdefinierten Daten. Dies ist sehr nützlich, wenn Sie mehrere Vorlagen, die dieselben Komponenten.

Es gibt mehrere vordefinierte E-Mail Vorlagen zur Verfügung, die Sie herunterladen können, die für viele standard-Anwendungsfälle für E-Mail wie Newsletter und Ankündigungen. Es gibt auch ein paar vorgefertigte Komponenten (mit Ihren eigenen benutzerdefinierten tags), einschließlich Schaltflächen, Menüs und Legenden (welche, ich muss zugeben, ich sehe nicht ein Zweck, für in E-Mails, aber nie Verstand).

Ein code-Beispiel aus einer Stiftung Vorlage für E-Mails.

Der wesentliche Unterschied zwischen Foundation für E-Mails mit MJML ist, die Grundlage für E-Mails standardmäßig auf desktop-Ansicht, dann skaliert für kleinere Bildschirme. Laut der docs, dies ist, weil viele desktop-clients nicht unterstützt Medien-Anfragen und standardmäßig auf den großen Bildschirm-layout macht es mehr konform über E-Mail-clients. Das heißt, es verwaltet nur einen Haltepunkt. Sie erstellen die desktop version und die mobile version und die mobile version schaltet unter einer bestimmten Anzahl von Pixeln, die konfiguriert werden können.

Sie können entscheiden, ob Sie einige Komponenten werden nur sichtbar, auf großen oder kleinen Bildschirmen mit praktischen vordefinierten Klassen wie .hide-for-large und .show-for-large (obwohl .hide-for-large möglicherweise nicht unterstützt werden von allen clients). Sie können auch entscheiden, wie viel Raum eine Spalte nehmen, indem Sie bestimmte Klassen. Zum Beispiel, Klasse .groß-6 und .klein-12 auf ein div-Element wird eine Spalte nimmt die Hälfte des Bildschirms auf den desktop und die ganze Bildschirm-Breite auf dem Handy. Dies ermöglicht eine sehr spezifische und vorhersagbare Ergebnisse layout.

Eine Vorschau der gleichen e-mail-Vorlage, entwickelt von Foundation für E-Mails auf Outlook 2007 (Links) und iPhoneX (rechts).

Grundlage für E-Mails ist ein wenig clunkier zu verwenden als MJML, meiner Meinung nach, aber es erlaubt für eine viel bessere Kontrolle über das layout. Das macht es ideal für Projekte, wo Sie brauchen, zu reproduzieren, pixelgenaue designs, die mit sehr spezifischen Unterschiede zwischen mobilen und desktop-layouts.

Vorteile

  • Eine mehr präzise Kontrolle über die end-Ergebnisse
  • Pre-built-Vorlagen
  • Sass-Unterstützung
  • Tolle Dokumentation

Nachteile

  • Die Projekt-Datei-Größe ist schwer und braucht viel Speicherplatz
  • Ein wenig weniger intuitiv zu bedienen als MJML den vordefinierten Parametern an Komponenten
  • Weniger Komponenten für benutzerdefinierte layouts

Schlussfolgerungen

Herstellung E-Mail-Vorlagen, auch weniger als front-end-Entwicklung, ist nicht eine exakte Wissenschaft. Es erfordert eine Menge von Versuch und Irrtum, und eine MENGE Tests. Was auch immer Werkzeug, das Sie verwenden, wenn Sie benötigen, um Unterstützung von alten Kunden, dann müssen Sie testen die Hölle aus Ihren layouts — vor allem, wenn Sie selbst das kleinste Maß an Komplexität. Zum Beispiel, wenn Sie text, muss sitzen neben ein Bild, ich empfehlen, dass das testen mit Inhalt an verschiedenen Längen und sehen, was passiert, in allen Mandanten. Wenn Sie text, die Bedürfnisse zu überlappen, ein Bild, es kann ein bisschen wie ein Alptraum.

Je komplexer das layout und die weniger Kontrolle hast du über das layout, dann die mehr nützlich es ist, den Rahmen über die hand-coding Ihre eigenen E-Mails, vor allem, wenn das design wird Ihnen ausgehändigt, die von einer Dritten Partei und umgesetzt werden muss.

Ich würde nicht sagen, dass man Rahmen besser ist als die andere und das ist nicht der Punkt von diesem post. Vielmehr würde ich empfehlen MJML und das Fundament für die E-Mails für verschiedene Anwendungsfälle:

  • MJML für Projekte, die einen schnellen turnaround, und es gibt Flexibilität im design.
  • Grundlage für E-Mails für Projekte, die erfordern eine stärkere Kontrolle über das layout und dem design ist super bestimmten.

Ressourcen und Links

  • Die MJML website
  • Die Grundlage für E-Mails-website
  • Lackmus-E-Mail-Prüfung
  • E-Mail on Acid-Tests
  • Ein Interessantes Gespräch auf der Lackmus-forum, das war in gewisser Weise der Ausgangspunkt für diesen Artikel.
  • Weitere Artikel von James Luterek, vergleicht diese frameworks