Share and Conquer: Werkzeuge zum Erstellen und Testen von Newslettern



    Das Auslegen von E-Mails ist ein Schmerz. Adaptive Buchstaben mit interaktiven (z. B. mit Formularen und Schiebereglern) zu tippen und zu testen, ist eine Belastung für das Quadrat. Allerdings ist nicht alles nicht so schlecht, wenn Sie die richtigen Werkzeuge wählen. Dieser Artikel wird Ihnen sagen, über E - Mail-Frameworks - MJML und Stiftung für E - Mails - und meine Lieblings - Ressourcen für das Senden von Test - Lackmus und die On Acid - Mail .

    Im vorigen Artikel haben wir erfahren, wie die Mailing-Geschichte begann und welche Rolle Outlook dabei spielte. Außerdem haben wir herausgefunden, welche Interaktivität wir jetzt in den Newsletter aufnehmen können und welche zukünftig. In diesem Artikel sprechen wir über Tools für diejenigen, die sich heute mit Mailinglisten beschäftigen.


    Angenommen, Sie möchten eine Liste erstellen


    Die erste Möglichkeit besteht darin, ein neues HTML-Dokument zu erstellen, eine vorgefertigte Zwischenablage (z. B. das beliebte Cerberus oder Responsive Email Framework ) zu erstellen und Tabellen mit Inline-Styles, Google im Prozess fehlender Hacks oder Korrekturen für das Layout zu erstellen , die plötzlich zu Gmail für Android gingen. Diese Option ist geeignet, wenn Sie über bestimmte Erfahrungen mit der Auferlegung von Briefen verfügen und genügend freie Zeit haben, und die Aufgabe darin besteht, einen einzelnen und einfachen Brief aufzulegen.



    Ein Beispiel für eine Briefvorlage, die sofort einsatzbereit ist, ist in Cerberus verfügbar


    Die zweite Option: Verwenden Sie den Online-Editor zum Erstellen einer Vorlage (z. B. Mosaico oder Stripo ). Dies ist der einfachste Weg. Es ist perfekt, wenn Sie kein Entwickler sind oder zum ersten Mal auf ein Layout stoßen und das Brieflayout recht einfach ist. Nahezu alle Online-Editoren bieten vorgefertigte Vorlagen an und enthalten auch Quellcode-Hacks für die korrekte Verwendung des Briefes in gängigen E-Mail-Clients. Mit diesen Tools können Sie jedoch praktisch nicht das Layout des Buchstabens an Ihr spezifisches Layout anpassen und haben im Allgemeinen sehr wenig Kontrolle über den Code und das Erscheinungsbild des Buchstabens.



    Änderungen der Briefvorlagen in Stripo Letter Designer


    Die dritte Option: Verwenden Sie das E-Mail-Framework. Wenn Sie regelmäßig einen Newsletter auferlegen müssen, wenn das Layout von Briefen komplex ist und die Anforderungen an sie streng sind und Sie Ihren Workflow und teilweise den Briefentwicklungsprozess automatisieren möchten, ist diese Option für Sie. Ich werde über die zwei leistungsfähigsten Tools sprechen : MJML und Foundation für E-Mails (in der Jugend als Tinte bekannt).


    Wir verwenden ein fertiges E-Mail-Framework. Mjml


    • Github: mjmlio / mjml
    • Entwickler: Mailjet
    • Veröffentlichungsdatum: 2016
    • Lizenz: MIT
    • Beliebtheit: 7662+ Sterne
    • Vorlagen-Designer: MJML

    Die wichtigsten Ideen, die im Rahmen enthalten sind:

    1. Reaktionsschnelle Vorlagen
    2. Vereinfachung der Arbeit mit dem Code durch eigene Template-Engine,
    3. ein Satz einsatzbereiter innerer Buchstabenbestandteile,
    4. komfortable Integration in den Mailinglisten-Entwicklungsprozess.

    Das Framework verwendet die Vorlage mit demselben Namen. Es ist einfach und gleichzeitig sehr mächtig. Vergessen Sie die Tags tags, thead, tbody, th, tr, td. Vergessen Sie das Schreiben von Stilen inline. Vergessen Sie die unlesbare komplexe Struktur des Buchstabencodes. So wird Ihre E-Mail mit MJML aussehen:

    <mjml><mj-head><mj-style>
          @media all and (max-width: 480px) {
            div[style*="color:#F45e46;"] {
              text-align: center !important
            }
          }
        </mj-style><mj-styleinline="inline">
          .link-nostyle {
            color: inherit;
            text-decoration: none
          }
        </mj-style></mj-head><mj-body><mj-section ><mj-column><mj-imagewidth="100"src="/assets/img/logo-small.png"></mj-image><mj-dividerborder-color="#F45E43"></mj-divider><mj-textfont-size="20px"color="#F45e46"font-family="helvetica">
              Hello <ahref="https://mjml.io"class="link-nostyle">World</a></mj-text></mj-column></mj-section></mj-body></mjml>

    Anstelle komplexer Konstrukte aus HTML-Tabellen mit unterschiedlichen Verschachtelungsstufen reicht es aus, buchstäblich einige Zeilen zu schreiben, die beim Erstellen des Projekts in einen gültigen HTML-Code des mit allen erforderlichen Hacks gewürzten Buchstabens umgewandelt werden.



    MJML bietet Plugins für gängige Texteditoren - Visual Studio Code, Atom und Sublime Text. Sie fügen die Syntaxhervorhebung der Sprache, einen Interpreter und eine Registerkarte mit einer Vorschau des Layoutbuchstabens im Editor selbst hinzu.

    Wenn Sie sich nicht mit CLI- oder Texteditoren beschäftigen möchten, gibt es eine separate offizielle Multi-Plattform-Desktopanwendung mit einem integrierten Code-Editor mit allen Funktionen, einem Viewer für vorgefertigte Briefvorlagen und einer Live-Vorschau Ihres Briefs.



    Neben einer Reihe von Standardkomponenten (z. B. einer Schaltfläche oder eines Karussells) gibt es fertige benutzerdefinierte Komponenten (z. B. eine Komponente zum Zeichnen von Diagrammen). Auf der Seite mit Ergänzungen aus der Community finden Sie nützliche Dienstprogramme, z. B. den MJML-Downloader für WebPack oder das Integrationstool in der MJML-Anwendung auf Laravel. Im Beta-Status wurde es vor kurzem möglich, mithilfe der MJML-API E-Mails direkt zu generieren, beispielsweise innerhalb einer mobilen Anwendung. Die Sache ist ziemlich spezifisch, aber sie wird sicherlich ihren Benutzer finden.


    Der Hauptnachteil des Frameworks ist gleichzeitig einer seiner Vorteile: "Responsibility". Das Framework übernimmt automatisch und ohne Eingreifen des Entwicklers, wie sich die Briefvorlage auf Geräten mit geringer Bildschirmbreite verhält. Dies führt zu einer Einschränkung von vier Spalten im Raster und dem Mangel an Möglichkeiten, das ansprechende Layoutverhalten an Ihre Anforderungen anzupassen.


    Ein kleines aber feines Detail: Auf der Website in der Dokumentation befindet sich ein Abschnitt mit einer SanIUse-ähnlichen Beschreibung der Unterstützung von MJML-Komponenten in verschiedenen E-Mail-Clients. Sie können die Website sofort überprüfen und nicht raten, wie sich der Brief beispielsweise in Outlook 2007 verhält.



    Fazit : MJML ist ein sehr leistungsfähiges und einfach zu erlernendes Werkzeug zum Erstellen von Antwortbriefen. Schwierigkeiten können nur auftreten, wenn Sie eine sehr subtile, pixelgenaue Anpassung der Vorlagen benötigen.


    Wir verwenden ein fertiges E-Mail-Framework. Grundlage für E-Mails


    • Github: zurb / foundation-emails
    • Entwickler: ZURB
    • Veröffentlichungsdatum: 2015
    • Lizenz: MIT
    • Beliebtheit: 6885+ Sterne
    • Vorlagen-Designer: Inky

    Wenn Sie nicht das erste Jahr in der Welt des Frontends sind, dann haben Sie wahrscheinlich schon gehört (aber - ich wette, Sie hätten es kaum benutzen können;)) über Foundation for Sites . Dieses von Entwicklern der Firma ZURB entwickelte Framework hat seinen Status als zweitbeliebtester (nach Bootstrap) unter den Front-End-Web-Frameworks konsolidiert.


    Die Stiftung für E-Mails wird von denselben Personen erstellt und ist im Wesentlichen Teil der Stiftung für Sites. Dies gibt ihm sowohl eine Reihe von Vorteilen (große Entwicklerfirma, eine recht große Community, alles, was Sie in Foundation für Sites mochten) als auch eine Reihe von Einschränkungen (alles, was Sie in Foundation für Sites nicht mochten, mag Foundation nicht gefallen E-Mails).


    Wenn Sie das Framework ausprobieren möchten, müssen Sie zunächst die Foundation CLI installieren:


    npm install --global foundation-cli

    Dann können Sie mit dem Befehl ein neues Projekt erstellen:


    foundation new --framework emails

    und fange an, einen Brief zu entwickeln.


    Es ist wahr, Sie müssen einige Minuten warten, bis alle erforderlichen Module und Komponenten geladen sind. Da viele Dateien heruntergeladen werden, wundern Sie sich nicht über die Größe des Ordners. Ein leeres Projekt wiegt mehr als 400 MB. Live Reload ist neben cli sofort einsatzbereit, eine Grundplatte mit allen erforderlichen Hacks, vorgefertigten Schablonen und Teilstücken sowie SASS-Unterstützung.



    Dateistruktur des Projekts für Foundation für E-Mails


    FfE hat eine eigene Template-Engine - Inky. Im Grunde macht es dasselbe wie die MJML-Template-Engine - es vereinfacht die Arbeit mit komplexen geschachtelten Tabellen mithilfe von Kurztags:


    <container><row><columnssmall="12"large="6">Column One</columns><columnssmall="12"large="6">Column Two</columns></row></container>

    Insgesamt gibt es etwa zehn Tags, von denen drei zum Erstellen des Gitters verwendet werden (siehe Beispiel oben), das Block-Grid-Tag wird zum Erstellen eines Blockgitters verwendet, zwei weitere Tags sind das Menü (Menü und Element), und die Namen der beiden anderen sprechen für sich: Schaltfläche und callout.


    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 Desktopstatus separat festlegen.


    Das System der Teilprogramme und Helfer wird mithilfe des Panini-Dateicompilers implementiert, der intern die einfache und praktische Handlebars-Vorlagen-Engine verwendet.


    Im Gegensatz zu MJML werden mit FfE zwei Versionen des Buchstabens erstellt - eine für Desktop-Clients und eine für Mobilgeräte. Dann entscheiden Sie, an welchem ​​Haltepunkt Sie den Desktop / Mobile-Status wechseln müssen, und Sie können mit Hilfe spezieller Klassen auch Blöcke Ihres Layouts aktivieren oder deaktivieren: .hide-for-large und .show-for-large.


    Fazit: Foundation for Emails bietet vollständige Kontrolle über das Layout eines Briefs sowohl für den Desktop als auch für den mobilen Status. Schwierigkeiten können beim Eintauchen in das Gerüst und beim Versuch, mit den Feinheiten umzugehen, auftreten, da es recht groß und komplex ist. Wenn Sie jedoch jeden Aspekt Ihrer Vorlage kontrollieren möchten - die Wahl der E-Mail-Stiftung.


    Testwerkzeuge


    Unser Newsletter ist also fertig. Im Browser sieht es toll aus. Was ist mit Outlook und mobilen E-Mail-Clients? Es ist an der Zeit, sich an spezialisierte Dienste zu wenden, um Mailings zu testen: Litmus und Email on Acid .


    Wir testen den Newsletter mit Litmus



    Litmus bietet eine Reihe von Tools, die Sie zum Testen von Mailings benötigen. Dies sind die Webide für das Editieren von HTML-Code (Builder), das Mailing-Analyse-System und eine Reihe von "Checklisten" - Tools zum Testen der Leistung, Überprüfen von Buchstaben auf "Spam" und vieles mehr.


    Die wichtigste Checkliste - E-Mail-Vorschau - ermöglicht das Abrufen von E-Mails in über 90 Desktop- / Mobile- / Web-E-Mail-Clients. Dies erfolgt mit ein paar Klicks. Sie müssen den Buchstabencode in den Builder einfügen, auf die Schaltfläche Test klicken und die gewünschten E-Mail-Clients auswählen.



    Vor kurzem haben die Entwickler eine coole Funktion hinzugefügt: den Inspector des vom E-Mail-Client verarbeiteten ht-Codes (verarbeitete html). Es ist ein bisschen wie der Inspektor aus den Entwicklertools Ihres Lieblingsbrowsers: Sie können einen bestimmten Bereich des Buchstabens auswählen und dessen Code anzeigen. Dies ist sehr hilfreich bei der Bearbeitung von kundenspezifischen Problemen, ohne auf die blinde Bearbeitung zurückzugreifen und das Ergebnis in der E-Mail-Vorschau anzuzeigen.



    Verarbeitetes HTML in Litmus anzeigen


    In Litmus habe ich zwei Nachteile gefunden. Die erste ist die mangelnde Reaktion der Benutzeroberfläche als Ganzes und die Verzögerung der E-Mail-Vorschau, die gelegentlich auftritt und Sie viel Zeit mit der Erstellung von Vorschau- und Wiederholungsprüfungen verbringen muss.


    Das zweite Minus: der Preis. Die minimale Abonnementoption kostet 80 US-Dollar / Monat. Darüber hinaus wirkt sich der ausgewählte Plan direkt auf die Anzahl der verfügbaren Buchstabenansichten aus. Daher rate ich Ihnen, sorgfältig zu überlegen, ob Sie Litmus wirklich brauchen oder mit einer billigeren Alternative auskommen.


    Test-E-Mail über den Acid-Newsletter


    Der zweite Service, über den ich gerne sprechen möchte, ist Email On Acid . Er kann in fast allen Aspekten als „kleiner Bruder“ bezeichnet werden.


    Überzeugen Sie sich selbst: Es gibt eine Webidee für die Bearbeitung des Mailings, es gibt Tools für die Analyse des Briefes, das Testen auf "Spam" und natürlich das E-Mail-Testen in über 70 Anwendungen.


    Die Vorschau der Buchstaben erfolgt fast genauso wie in Litmus. Die Unterschiede sind hauptsächlich im Aussehen, die Optionen / Einstellungen sind etwas kleiner, es gibt keinen Prüfer für den verarbeiteten Buchstabencode und einige andere weniger nützliche Werkzeuge. UI EoA ist jedoch komfortabler und einfacher als mit Litmus und arbeitet praktisch ohne Verzögerungen. Das Testen von Briefen ist etwa eineinhalb Mal schneller.



    Letzter wichtiger Faktor: Preis. Emails auf Acid sind doppelt so günstig wie Litmus mit sehr ähnlicher Funktionalität. Die Anzahl der Vorschauen Ihres Briefes ist nicht beschränkt. Dies sind zweifellos EoA-Weine.


    Was soll man wählen


    Die oben beschriebenen Tools kosten viel Geld. Meines Erachtens ist es sinnvoll, sie nur dann dauerhaft zu verwenden, wenn Sie zumindest mehrmals im Monat stabil sind, ziemlich komplexe Briefe auferlegen und strenge Anforderungen an ihre Unterstützung in verschiedenen E-Mail-Clients, insbesondere in mobilen, haben.


    Wenn Sie spontan Episoden machen, gibt es zwei Alternativen:


    1. Verwenden Sie die Testphase von Litmus / Email on Acid für 7/14 Tage (je nach Service) - das Geld für den ersten Monat wird auf Ihre Karte zurückerstattet.
    2. Verwenden Sie eine Kombination weniger beliebter Dienste, die kostenlose Pläne haben, und testen Sie die E-Mail-Clients manuell.

    Hier sind einige Dienste, die kostenlos genutzt werden können:


    1. PreviewMyEmail (Google Mail für Chrome / FF / IE, Thunderbird, Apple Mail für iOS7);
    2. InboxInspector (Thunderbird 2/3, Outlook 2003/2007/2010 / Outlook Express);
    3. DirectMail (Outlook 2003, Gmail in IE);
    4. Putsmail + PilotMailer (Online-Dienste zum Senden von Briefcodes an beliebige Adressen, bequem für manuelle Mailing-Tests);

    Was auch immer Sie wählen, die Hauptsache ist, dass das Werkzeug Ihren Bedürfnissen entspricht.


    Fazit


    Der Umfang der Tools für den Layouter hat inzwischen einen Entwicklungsstand erreicht, in dem wir nicht nur bequeme Frameworks verwenden können, um Briefe und Anwendungen zu entwickeln, sondern auch die richtigen für unsere Aufgaben und Fähigkeiten.


    Wenn Sie selten Briefe schreiben und diese im Allgemeinen einfach sind, nehmen Sie einfach die Grundplatte, den Schriftsatz und den Test "manuell". Alternativ können Sie die kostenlosen Dienste zum Testen nutzen.


    Wenn Sie sich regelmäßig mit dem Layout von Briefen beschäftigen müssen und die Layouts komplex und anpassungsfähig sind, müssen MJML und Foundation für E-Mail einige Sorgfalt walten lassen. Und Limus und Email on Acid sparen viel Zeit und Nervenzellen, um einige nervige Outlook oder Gmail auf Android zu besiegen.


    Und welchen Weg wählst du? Teilen Sie in den Kommentaren.


    Jetzt auch beliebt: