Das Schreiben von E-Mails ist ein Schmerz. Das Layout und Testen von adaptiven Buchstaben mit interaktiven Buchstaben (z. B. mit Formularen und Schiebereglern) ist ein Problem. Allerdings ist nicht alles so schlecht, wenn Sie die richtigen Werkzeuge auswählen. In diesem Artikel werde ich über E-Mail-Frameworks -
MJML und
Foundation for Emails - und meine bevorzugten Ressourcen zum Testen von Mailinglisten -
Litmus und
Email On Acid -
sprechen .
Im vorherigen Artikel haben wir erfahren, wie die Geschichte des Newsletters begann und welche Rolle Outlook darin spielte, und herausgefunden, welche Interaktivität wir dem Newsletter jetzt und in Zukunft hinzufügen können. In diesem Artikel werden Tools für diejenigen beschrieben, die sich heute mit Mailinglisten befassen.
Angenommen, Sie möchten den Newsletter zusammenstellen
Die erste Option: Erstellen Sie ein neues HTML-Dokument, nehmen Sie ein fertiges Boilerplate (z. B. das beliebte Cerberus oder das Responsive Email Framework ) und setzen Sie sich, um Tabellen mit Inline-Stilen zu schreiben, googeln Sie, während Hacks oder Korrekturen für ein Layout fehlen, das plötzlich zu Google Mail für Android ging. Diese Option ist geeignet, wenn Sie Erfahrung im Layout von Briefen haben, genügend Freizeit haben und die Aufgabe darin besteht, einen einzelnen und einfachen Brief zu gestalten.
Ein Beispiel für eine sofort einsatzbereite Briefvorlage, die in Cerberus verfügbar ist
Die zweite Option: Verwenden Sie den Online-Editor, um eine Vorlage zu erstellen (z. B. Mosaico oder Stripo ). Dies ist der einfachste Weg. Es ist perfekt, wenn Sie kein Entwickler sind oder wenn Sie zum ersten Mal mit dem Layout konfrontiert werden und das Layout des Briefes recht einfach ist. Fast alle Online-Editoren bieten vorgefertigte Vorlagen und enthalten auch Hacks im Quellcode der Vorlage für den korrekten Betrieb von E-Mails in gängigen E-Mail-Clients. Mit diesen Tools können Sie das Layout des Buchstabens jedoch praktisch nicht an Ihr spezifisches Layout anpassen und haben im Allgemeinen nur eine sehr geringe Kontrolle über den Code und das Erscheinungsbild des Buchstabens.
Änderungen an der Briefvorlage in Stripos Nachrichtendesigner
Dritte Option: Verwenden Sie ein E-Mail-Framework. Wenn Sie den Newsletter regelmäßig erstellen müssen, wenn das Layout der Briefe kompliziert und die Anforderungen streng sind und wenn Sie Ihren Workflow und teilweise den Prozess der Briefentwicklung automatisieren möchten, ist diese Option genau das Richtige für Sie. Ich werde über die zwei mächtigsten Werkzeuge sprechen : MJML und Foundation for Emails (in seiner Jugend als Ink bekannt).
Wir verwenden ein vorgefertigtes E-Mail-Framework. Mjml
- Github: mjmlio / mjml
- Entwickler: Mailjet
- Erscheinungsdatum: 2016
- Lizenz: MIT
- Beliebtheit: 7662+ Sterne
- Vorlage: MJML
Die wichtigsten im Framework eingebetteten Ideen:
- sofort einsatzbereite reaktionsfähige Vorlagen,
- Vereinfachung der Arbeit mit Code durch eigene Template-Engine,
- eine Reihe von Komponenten, die im Brief verwendet werden können,
- bequeme Integration in den Mailinglisten-Entwicklungsprozess.
Das Framework verwendet die gleichnamige Template-Engine. Es ist einfach und gleichzeitig sehr mächtig. Vergessen Sie die Tags-Tabelle, thead, tbody, th, tr, td. Vergessen Sie, dass Stile inline geschrieben werden müssen. Vergessen Sie die unlesbare komplexe Struktur des Buchstabencodes. So sieht Ihre E-Mail mit MJML aus:
<mjml> <mj-head> <mj-style> @media all and (max-width: 480px) { div[style*="color:#F45e46;"] { text-align: center !important } } </mj-style> <mj-style inline="inline"> .link-nostyle { color: inherit; text-decoration: none } </mj-style> </mj-head> <mj-body> <mj-section > <mj-column> <mj-image width="100" src="/assets/img/logo-small.png"></mj-image> <mj-divider border-color="#F45E43"></mj-divider> <mj-text font-size="20px" color="#F45e46" font-family="helvetica"> Hello <a href="https://mjml.io" class="link-nostyle">World</a> </mj-text> </mj-column> </mj-section> </mj-body> </mjml>
Anstelle komplexer Konstruktionen aus HTML-Tabellen mit unterschiedlichen Verschachtelungsebenen reicht es aus, nur wenige Zeilen zu schreiben, die beim Erstellen des Projekts in einen gültigen HTML-Code des Buchstabens umgewandelt werden, der mit allen erforderlichen Hacks "gewürzt" ist.
MJML bietet Plugins für gängige Texteditoren - Visual Studio Code, Atom und Sublime Text. Sie fügen eine Hervorhebung der Sprachsyntax, einen Linter und eine Registerkarte mit einer Vorschau des Satzes direkt im Editor selbst hinzu.
Wenn Sie sich nicht mit CLI- oder Texteditoren beschäftigen möchten, gibt es eine separate offizielle Desktop-Anwendung für mehrere Plattformen mit einem integrierten vollwertigen Code-Editor, einem Viewer für vorgefertigte Vorlagen für Briefe und einer Live-Vorschau Ihres Briefes.
Neben einer Reihe von Standardkomponenten (z. B. einer Schaltfläche oder einem Karussell) gibt es vorgefertigte benutzerdefinierte Komponenten (z. B. eine Komponente zum Zeichnen von Diagrammen). Auf der Community-Add-On- Seite finden Sie nützliche Dienstprogramme, z. B. den MJML-Loader für WebPack oder das Integrationstool für die Laravel MJML-Anwendung. Und vor nicht allzu langer Zeit wurde es im Beta-Status möglich, die MJML-API zu verwenden, um E-Mails direkt zu generieren, beispielsweise in einer mobilen Anwendung. Das Ding ist ziemlich spezifisch, aber es wird sicherlich seinen Benutzer finden.
Der Hauptnachteil des Frameworks ist gleichzeitig einer seiner Vorteile: „Reaktionsfähigkeit“. Das Framework sorgt automatisch und ohne Entwicklerintervention dafür, wie sich die Briefvorlage auf Geräten mit kleiner Bildschirmgröße verhält. Dies führt zu einer vierspaltigen Einschränkung im Raster und zu einer mangelnden Fähigkeit, das Verhalten des reaktionsschnellen Layouts an Ihre Anforderungen anzupassen.
Ein kleines, aber angenehmes Detail: Auf der Website im Abschnitt mit der Dokumentation befindet sich ein Abschnitt mit einer CanIUse-ähnlichen Beschreibung der Unterstützung von MJML-Komponenten in verschiedenen E-Mail-Clients. Sie können sofort auf der Site nachsehen und sich nicht wundern, wie sich der Brief beispielsweise in Outlook 2007 verhält.
Fazit : MJML ist ein sehr leistungsfähiges und leicht zu erlernendes Tool zum Erstellen von reaktionsschnellen E-Mails. Schwierigkeiten können nur auftreten, wenn Sie eine sehr feine, pixelgenaue Vorlagenanpassung benötigen.
Wir verwenden ein vorgefertigtes E-Mail-Framework. Grundlage für E-Mails
Wenn Sie nicht das erste Jahr in der Welt des Frontends sind, haben Sie wahrscheinlich von Foundation for Sites gehört (aber - ich wette - Sie haben es kaum benutzt;)). Dieses Framework, das von Entwicklern des Unternehmens ZURB erstellt wurde, hat seinen Status als zweitbeliebtestes (nach Bootstrap) unter den Front-End-Webframeworks lange gesichert.
Foundation for Emails wird von denselben Personen erstellt und ist im Wesentlichen Teil von Foundation for Sites. Dies gibt ihm sowohl eine Reihe von Vorteilen (eine große Entwicklungsfirma, eine ziemlich große Community, alles, was Ihnen an Foundation for Sites gefallen hat) als auch eine Reihe von Einschränkungen (alles, was Ihnen an Foundation for Sites nicht gefallen hat, wird bei Foundation for nicht gefallen E-Mails).
Wenn Sie das Framework ausprobieren möchten, müssen Sie zunächst die Foundation CLI installieren:
npm install --global foundation-cliAnschließend können Sie mit dem folgenden Befehl ein neues Projekt erstellen:
foundation new --framework emailsund fange an, den Brief zu entwickeln.
Richtig, Sie müssen einige Minuten warten, bis alle erforderlichen Module und Komponenten geladen sind. Da eine große Anzahl von Dateien heruntergeladen wird, wundern Sie sich nicht über die Größe des Ordners - ein leeres Projekt wiegt mehr als 400 MB. Zusätzlich zu cli ist Live Reload sofort verfügbar, eine grundlegende Boilerplate mit allen erforderlichen Hacks, vorgefertigten Vorlagen und Partials sowie SASS-Unterstützung.
Struktur der Foundation for Emails-Projektdatei
FfE hat eine eigene Template-Engine - Inky. Im Kern funktioniert es genauso wie die MJML-Vorlagen-Engine - es vereinfacht die Arbeit mit komplexen verschachtelten Tabellen mithilfe von Kurzschrift-Tags:
<container> <row> <columns small="12" large="6">Column One</columns> <columns small="12" large="6">Column Two</columns> </row> </container>
Insgesamt gibt es ungefähr zehn Tags, drei davon werden zum Erstellen eines Rasters verwendet (siehe Beispiel oben), das Block-Grid-Tag wird zum Erstellen eines Blockrasters verwendet, zwei weitere Tags sind ein Menü (Menü und Element) und die Namen von zwei weiteren sprechen für sich: Schaltfläche und Beschriftung.
FfE verwendet ein 12-Spalten-Raster, das auf 2, 3, 4 oder 6 Spalten vereinfacht werden kann. Außerdem können Sie die Anzahl der Spalten für Mobil- und Desktop-Status separat festlegen.
Das System der Partials und Helfer wird mithilfe des Panini-Datei-Compilers implementiert, der intern die einfache und bequeme Lenker-Vorlagen-Engine verwendet.
Im Gegensatz zu MJML werden bei Verwendung von FfE zwei Versionen des Briefes erstellt - eine für Desktop-Clients und eine für Mobilgeräte. Als Nächstes entscheiden Sie, für welchen Haltepunkt Sie den Desktop- / Mobilstatus wechseln möchten, und Sie können auch Blöcke Ihres Layouts mithilfe spezieller Klassen aktivieren oder deaktivieren: .hide-for-large und .show-for-large.
Fazit: Foundation for Emails bietet vollständige Kontrolle über das Layout des Briefes sowohl für den Desktop als auch für den mobilen Status. Beim Eintauchen in das Framework und beim Versuch, mit seinen Feinheiten umzugehen, können Schwierigkeiten auftreten, da es ziemlich groß und komplex ist. Wenn Sie jedoch jeden Aspekt Ihrer Vorlage steuern möchten, haben Sie die Wahl zwischen Foundation for Emails.
Newsletter-Testwerkzeuge
Unser Newsletter ist also fertig. In einem Browser sieht es gut aus. Was ist mit Outlook und mobilen E-Mail-Clients? Es ist Zeit, sich zum Testen des Newsletters an spezialisierte Dienste zu wenden: Lackmus und Email on Acid .
Testen des Lackmus-Newsletters
Litmus bietet einen vollständigen Satz von Tools, die Sie möglicherweise zum Testen von Mailinglisten benötigen. Dies ist eine Webidee zum Bearbeiten von HTML-Code (Builder), ein Mailing-Analysesystem und eine Reihe von „Checklisten“ - Leistungstest-Tools, Überprüfen von E-Mails auf Spam und vieles mehr.
Die wichtigste „Checkliste“ - E-Mail-Vorschau - ermöglicht das Abrufen von E-Mails in über 90 Desktop-, Mobil- und Web-E-Mail-Clients. Dies geschieht mit wenigen Klicks. Sie müssen den Buchstabencode in den Builder einfügen, auf die Testschaltfläche klicken und die erforderlichen E-Mail-Clients auswählen.
Vor kurzem haben Entwickler eine coole Funktion hinzugefügt: den Inspektor des verarbeiteten HTML-Codes durch den E-Mail-Client (verarbeitetes HTML). Es sieht ein bisschen wie der Inspektor aus den Entwicklertools Ihres Lieblingsbrowsers aus: Sie können einen bestimmten Bereich der Nachricht auswählen und dessen Code anzeigen. Dies hilft sehr, kundenspezifische Probleme zu analysieren, ohne auf blinde Änderungen zurückzugreifen und das Ergebnis dann in der E-Mail-Vorschau anzuzeigen.
Verarbeitetes HTML in Lackmus anzeigen
Ich habe zwei Minuspunkte mit Lackmus gefunden. Das erste Problem ist die Unempfindlichkeit der Benutzeroberfläche als Ganzes und die von Zeit zu Zeit auftretenden Verzögerungen bei der E-Mail-Vorschau, sodass Sie viel Zeit darauf warten müssen, dass die Vorschau erstellt und die Tests neu gestartet werden.
Zweites Minus: Preis. Die Mindestabonnementoption kostet 80 USD / Monat. Darüber hinaus wirkt sich der ausgewählte Plan direkt auf die Anzahl der verfügbaren Vorschaubilder aus. Ich rate Ihnen daher, sorgfältig zu überlegen, ob Sie Lackmus wirklich brauchen oder ob Sie mit einer günstigeren Alternative auskommen können.
Testen von E-Mails in Säure-Newslettern
Der zweite Dienst, über den ich sprechen möchte, ist Email On Acid . Es kann in fast allen Aspekten sicher als "kleiner Bruder" von Lackmus bezeichnet werden.
Überzeugen Sie sich selbst: Es gibt eine Web-Idee zum Bearbeiten des Newsletters, es gibt Tools zum Analysieren des Briefes, es gibt Tests auf Spam und natürlich gibt es auch E-Mail-Tests in über 70 Anwendungen.
Die Vorschau von Briefen erfolgt fast wie bei Lackmus. Die Unterschiede liegen hauptsächlich im Erscheinungsbild, die Optionen / Einstellungen sind etwas kleiner, es gibt keinen Inspektor für den verarbeiteten Buchstabencode und einige andere weniger nützliche Tools. Die Benutzeroberfläche EoA ist jedoch bequemer und einfacher als die von Lackmus und funktioniert praktisch ohne Verzögerungen. Das Testen von E-Mails erfolgt etwa eineinhalb Mal schneller.
Letzter wichtiger Faktor: Preis. E-Mail auf Säure ist der halbe Preis von Lackmus mit sehr ähnlichen Funktionen. Und es gibt keine Einschränkungen hinsichtlich der Anzahl der Vorschauen Ihres Briefes. Dies sind zweifellos die Weine von EoA.
Was soll ich wählen?
Die oben beschriebenen Tools kosten viel Geld. Meiner Meinung nach ist es nur dann sinnvoll, sie fortlaufend zu verwenden, wenn Sie regelmäßig, mindestens mehrmals im Monat, ziemlich komplexe E-Mails erstellen und wenn Sie strenge Anforderungen an deren Unterstützung in verschiedenen E-Mail-Clients haben, insbesondere in mobilen.
Wenn Sie gelegentlich Mailings durchführen, gibt es zwei alternative Optionen:
- Verwenden Sie die Testversion von Lackmus / Email on Acid für 7/14 Tage (je nach Service). Das Geld für den ersten Monat wird auf Ihre Karte zurückerstattet.
- Verwenden Sie eine Kombination aus weniger beliebten Diensten mit kostenlosen Plänen und testen Sie E-Mail-Clients manuell.
Hier sind einige Dienste, die in begrenztem Umfang kostenlos genutzt werden können:
- PreviewMyEmail (Google Mail für Chrome / FF / IE, Thunderbird, Apple Mail für iOS7);
- InboxInspector (Thunderbird 2/3, Outlook 2003/2007/2010 / Outlook Express);
- DirectMail (Outlook 2003, Google Mail im Internet Explorer );
- Putsmail + PilotMailer (Onlinedienste zum Senden eines Briefcodes an eine beliebige Adresse, bequem zum manuellen Testen des Newsletters);
Was auch immer Sie auf lange Sicht wählen, die Hauptsache ist, dass das Tool Ihren Anforderungen entspricht.
Fazit
Der Umfang der Tools für den Mailinglisten-Schriftsetzer hat diesen Entwicklungsstand erreicht, wenn wir nicht nur praktische Frameworks zum Entwickeln von Briefen und Anwendungen zum Testen verwenden, sondern auch die geeigneten für unsere Aufgaben und Fähigkeiten auswählen können.
Wenn Sie Buchstaben selten setzen und diese im Allgemeinen einfach sind, können Sie die Grundplatte nehmen, setzen und „manuell“ testen. Alternativ können Sie kostenlose Dienste zum Testen verwenden.
Wenn Sie sich regelmäßig mit Satzbriefen befassen müssen und Layouts komplex und anpassungsfähig sind, übernehmen MJML und Foundation for Email einige der Aufgaben. Und Limus und Email on Acid sparen viel Zeit und Nervenzellen, um lästiges Outlook oder Google Mail auf Android zu besiegen.
Und welchen Weg wählst du? Teilen Sie in den Kommentaren.