Erstellen von responsiven E-Mail-Vorlagen Teil 2 - Wie man eine gute HTML-Mail-Vorlage erstellt

Im vorherigen Teil des Artikels haben wir über die Bedeutung der Reaktionsfähigkeit von HTML-E-Mail-Vorlagen und einige bewährte Verfahren gesprochen. In diesem Teil werden wir mehr über den Entwicklungsprozess verraten.

Wie viele Beispiele aus den Bereichen Design, Marketing und Softwareentwicklung zeigen, muss eine gute HTML-Vorlage in Zusammenarbeit mit Spezialisten aus allen Bereichen erstellt werden. Wir sollten eine schön gestaltete Vorlage haben, die von Softwareentwicklern implementiert und gut getestet und von Marketingspezialisten mit dem richtigen Inhalt gefüllt wird. Um die Qualität sicherzustellen, müssen in den meisten Fällen alle Anforderungen von Analysten gesammelt und verwaltet werden.

Ein E-Mail-Text, manchmal mit Bildern (jetzt sogar mit Video), kann sich je nach Art der Nachricht stark unterscheiden. Daher sollten Grafikdesigner und Frontend-Entwickler, die an einer Vorlage arbeiten, eine Art Grundgerüst erstellen, das für jeden Inhalt geeignet ist. Dazu wird die gesamte E-Mail in eine Containertabelle eingefügt, die sich im HTML-Textkörper befindet, wie Sie in der folgenden Abbildung sehen können.

Jeder Teil wird dann innerhalb des übergeordneten Objekts platziert und durch dessen Eigenschaft align positioniert, anstatt zu schweben. Alle Abstände werden durch das Hinzufügen von Auffüllungen zu den übergeordneten Elementen und nicht durch das Hinzufügen von Rändern zu den untergeordneten Elementen erreicht - dies ist auf die fehlende Unterstützung des Box-Modells in Microsoft Outlook zurückzuführen. Die wichtigsten Dinge bei der Erstellung einer E-Mail-Vorlage sind also:

• Sie basieren auf fließenden HTML-Tabellen - die Breite ist auf 100% eingestellt, die maximale Breite entspricht der Breite Ihrer Vorlage (z.B. 600px).
• Verwenden Sie Geistertabellen - Tabellen-, Tabellenzeilen- und Tabellenzellen-Tags, die in einem HTML-Kommentar mit Microsoft Outlook-Anmerkung platziert werden. Die Breite muss in Pixel (px) und nicht in Prozent (%) angegeben werden, da Outlook keine Eigenschaft für die maximale Breite unterstützt. Mit diesem Workaround können wir die E-Mail für den Desktop so beibehalten, wie sie vor der mobilen Version war. Auf Mobiltelefonen wird diese kommentierte Tabelle nicht berücksichtigt, so dass wir eine Tabelle haben, die an die Gerätebreite angepasst ist.
• Verwenden Sie div-Tags, um den Inhalt als responsive Grid-Spalten darzustellen . Positionieren Sie Spalten, indem Sie die Eigenschaft align zu einem übergeordneten Element hinzufügen. Setzen Sie die Breite auf einen Prozentsatz der übergeordneten Breite und fügen Sie die Mindest- und Höchstbreite hinzu. Außerdem können Sie dieses Element in eine andere Ghost-Tabelle mit fester Breite einbinden.
• Machen Sie möglichst nichts kompliziert und bleiben Sie bei der progressiven Verbesserung - abgerundete Ecken sind ein gutes Beispiel. Setzen Sie alles auf Funktionen, die Sie nutzen können. Trotz progressiver Verbesserung muss die Grundfunktionalität auf jedem Client gewährleistet sein. Sie können also die @media-Abfrage in dem Bewusstsein verwenden, dass sie nicht überall unterstützt wird.
• Mobile first - Gmail unterstützt die oben erwähnten @media-Abfragen nicht, die für responsive Webinhalte verwendet werden. Gemäß der progressiven Verbesserung sollten wir also ein einfaches, responsives Raster für unsere Inhalte bereitstellen und dann, wenn alles funktioniert und richtig "schwimmt" (sogar bei Gmail), können wir Media Queries mit zusätzlichen Funktionen für andere Clients hinzufügen.

Wenn Sie Ihr eigenes Skelett erstellen möchten, sollten Sie sich ansehen, wie es von anderen gemacht wird. Eine der besten Vorlagen , die Sie finden können, ist Cerberus von Ted Goas. Sie ist auf Github verfügbar und wahrscheinlich wurden dort bereits alle Probleme gelöst, mit denen Sie zu kämpfen haben (z.B. unnötige Abstände zwischen den Gitterspalten bei 120dpi). Wir haben einige Tests mit dieser Vorlage auf EmailOnAcid durchgeführt und sie hat sich sehr gut bewährt. Wie kann man eine Vorlage erstellen, die bei fast jedem Kunden perfekt aussieht? Der Workflow ist das Wichtigste.

Arbeitsablauf

Jedes Projekt braucht einen individuellen Ansatz, aber wir können eine allgemeine To-Do-Liste festlegen. Dies kann uns helfen, Probleme in der Zukunft zu vermeiden, Zeit zu sparen und Frustration zu vermeiden. Die Durchführung dieser Maßnahmen nimmt nicht viel Zeit in Anspruch und gibt uns einen guten Ausgangspunkt für unsere Arbeit, wenn wir mehr als eine Vorlage zu erledigen haben.

Forschung

Prüfen Sie den Inhalt jedes Entwurfs oder jeder bestehenden Vorlage. Achten Sie auf Elemente wie Kopf- und Fußzeilen, Schaltflächen, Überschriften, Absatzstile, Listen, Symbole und Bilder... Bereiten Sie eine einfache Liste oder eine SASS/CSS-Datei mit deren Definitionen vor.

Einrichtung und Entwicklung

Es gibt einige Dienste, die die Erstellung einer E-Mail-Vorlage einfacher und viel schneller machen, als Inline-CSS für HTML-Tags von Hand zu schreiben. Litmus(Beispiel-Editor) oder EmailOnAcid haben Online-Editoren, die ganz nett sind (aber nicht kostenlos). Für kleine Projekte können wir auch andere Online-Tools wie Premailer oder Ink Inliner verwenden, die unsere Vorlage aus getrenntem HTML und CSS zu einer einzigen Datei als fertige E-Mail-Vorlage kompilieren. Für kompliziertere oder größere Projekte mit mehreren Vorlagen gibt es auch Frameworks, die für E-Mail-Vorlagen vorbereitet sind:

• Zurb Foundation for Emails 2 - kürzlich auf eine neue Version aktualisiert - ermöglicht es uns, E-Mails aus vorkonfigurierten Tags zu verfassen, die in Standard-HTML kompiliert werden. Dies ist ein großartiges Tool, aber Sie müssen sich auf einige Einschränkungen einstellen, wie z.B. die teilweise Unterstützung von Android Gmail.
• MJML - Ein weiteres schönes Framework, wie Zurb Foundation, das auf benutzerdefinierten Tags basiert und zu HTML kompiliert. Das einzige Problem ist, dass es kein CSS-Inlining-Tool enthält. Es basiert auf React und die vorgefertigten Komponenten machen die Arbeit recht schnell, aber wenn wir etwas in einer Komponente ändern müssen, kann das länger dauern und erfordert Kenntnisse in React.

Die Wahl des richtigen Tools für unsere Bedürfnisse ist nicht einfach. Für jedes Projekt ist eine gewisse Zeit für die Recherche und das Benchmarking zwischen den sich ständig weiterentwickelnden Lösungen, die derzeit verfügbar sind, erforderlich.

Aber manchmal passt keines dieser Programme zu unseren Bedürfnissen oder erfüllt die Anforderungen. In diesem Fall müssen wir unser eigenes Tool entwickeln. Wir können CSS lokal in unserer Entwicklungsumgebung einbinden, indem wir eine Offline-Version von Premailer oder Ink Inliner verwenden. Unser eigenes Tool bietet uns außerdem viele anpassbare Optionen. Auch wenn die Konfiguration anfangs mehr Zeit in Anspruch nimmt, sind wir damit so flexibel und konfigurierbar wie mit keiner anderen Lösung.

Bei der Arbeit an mehreren Mailing-Kampagnen ist es wichtig, dass Sie sich mit Ihrer Entwicklungsumgebung wohlfühlen. Wenn ein vorhandenes Framework die Anforderungen nicht erfüllt, muss eine Entscheidung getroffen werden: Passen wir uns an eine in Betracht gezogene Lösung an oder erstellen wir ein eigenes Build-Tool? Die Anpassung von Frameworks ist ziemlich riskant, denn sie kann Probleme mit Updates verursachen, erfordert Erfahrung und kann manchmal zu viel Zeit in Anspruch nehmen, ohne dass eine erfolgreiche Änderung garantiert werden kann.

Eigenes Werkzeug bauen

Es ist immer eine Herausforderung, ein spezielles Tool aufzugeben und etwas von Grund auf neu zu entwickeln. Können wir etwas Besseres schaffen als ein bestehendes Framework, das von vielen Beteiligten entwickelt wurde? In den meisten Fällen wahrscheinlich nicht, aber HTML-E-Mails sind etwas Besonderes. Natürlich können wir jede Vorlage von Hand schreiben, ohne Skripte zu erstellen, aber... Das kostet einfach zu viel Zeit und es ist schwierig, solchen Code zu pflegen. Deshalb wird jetzt sogar der Code für das Frontend kompiliert. Wenn wir Zweifel haben, ob ein Framework für unsere Bedürfnisse geeignet ist, und keine Zeit für Nachforschungen haben, lohnt es sich meiner Meinung nach immer, ein eigenes Tool zu entwickeln.

Die Entwicklung eines Tools klingt vielleicht nach viel Arbeit, ist aber eher wie das Stapeln von Legosteinen. Wir können es auf einer bekannten und beliebten Technologie wie Node.js aufbauen. Mit dem eingebauten Node Package Manager können wir Abhängigkeiten von Komponenten wie File Include, einem Styles-Präprozessor und Inliner, HTML-Code Minifier usw. zu unserem Projekt hinzufügen.

Wo sollten wir also anfangen? Die Projektstruktur steht an erster Stelle, um die Dinge zu organisieren:

• Src
  • Stile
    • Sass
    • CSS
  • HTML
    • Vorlagen
    • Teilweise
  • Bilder
• Bauen Sie
• Temp

Das ist natürlich nur ein Beispiel. Sie können Ihre Ressourcen so organisieren, wie Sie möchten. Dies ist nicht vorgeschrieben. Und was nun? E-Mail-HTML ist altmodisch, aber wir wollen keine HTML-Vorlage mit CSS in den Stilattributen codieren, wie es Entwickler vor vielen Jahren getan haben. Wir wollen nicht einmal CSS-Code von Hand schreiben. Wir wollen ihn modern, kompiliert und einfach zu pflegen. Wir brauchen also einen CSS-Präprozessor und den bereits erwähnten "Premailer", um Stile inline zu erstellen. Wir müssen unserem Paketmanager nur sagen, dass er diese Pakete herunterladen und für Entwicklungszwecke speichern soll. Wir brauchen auch eine Komponente, die alle anderen Komponenten beherrscht - wie Grunt oder Gulp. Zunächst müssen wir Node mitteilen, dass dieses Projekt seine Komponenten benötigt. Öffnen Sie Ihr Kommandozeilentool und geben Sie ein:

npm init

Node fragt nach dem Projektnamen, dem Autor, der Version, der Repository-URL usw. - ist nicht erforderlich, aber wenn möglich, sollten Sie keine Leerzeichen hinterlassen. Das kann anderen Entwicklern helfen, wenn jemand in Zukunft an diesem Code arbeiten muss. Jetzt sind wir bereit, alle Anforderungen zu spezifizieren: npm i -D del gulp gulp-sass gulp-cached gulp-file-include gulp-htmlmin gulp-livereload gulp-premailer gulp-remove-html-comments gulp-replace run-sequence

Das scheint eine Menge Pakete zu sein, aber es sollte nicht lange dauern, sie herunterzuladen. Was sind die Parameter i und -D? Dies sind Abkürzungen für den Befehl install und den Parameter --save-dev, der NPM anweist, alle heruntergeladenen Komponenten in den Entwicklungsabhängigkeiten Ihres Projekts zu speichern. Wenn Sie mit Node-Paketen nicht vertraut sind, lesen Sie diesen kurzen Artikel. Nun, da wir alle benötigten Tools haben, ist es an der Zeit, über unsere Vorlage nachzudenken.

Wir können sich wiederholende Elemente in Teildateien vorbereiten und sie mit gulp-file-include mit einigen anpassbaren Variablen einbinden. So können wir eine HTML-Tabelle einmal definieren und mehrfach verwenden, wobei wir jeden Parameter bei Bedarf ändern oder Standardwerte verwenden können. Unsere Hauptvorlage ist dann klein und einfach zu handhaben.

  @@include('partials/button.html',
  {"href": "http://www.pgs-software.com",
  "text": "Besuchen Sie die Webseite von PGS Software"})

 

Was ist mit Stilen? Es gibt immer weniger Entwickler, die reinen CSS-Code schreiben. Stattdessen gibt es Less und Sass-Präprozessoren, die es einfach besser und schneller machen. Er ist einfacher zu lesen und zu pflegen, bietet einige Optimierungen und erweiterte Funktionen im Vergleich zu CSS, dank der Variablen und Funktionen, die hier Mixins genannt werden.

Nach dem Einfügen von Teilbereichen und dem Inlining von Stilen können wir sogar den gesamten kompilierten Code minifizieren, um Zeit für das Herunterladen von E-Mails und die Datenübertragung durch gulp-htmlmin zu sparen .

Sehen Sie sich hier den Beispielcode für die Konfiguration des Gulp Task-Runners an.

Wenn Sie Gulp nicht kennen, können Sie sich hier über die Grundlagen informieren. Das sollte Ihnen helfen zu verstehen, was hier vor sich geht. Wir führen Gulp-Aufgaben in der richtigen Reihenfolge aus, um schließlich alle E-Mail-Zutaten zu einer würzigen, aber rohen HTML-CSS-Suppe zusammenzufügen, die von jedem Mailing-Anbieter versendet werden kann.

Nach dem Entwicklungsprozess sollten die Bilder auf einen eigenen Server verschoben und die Pfade in der Vorlage aktualisiert werden. Es gibt eine Möglichkeit, Bilder in base64 zu kodieren und sie als Text in eine E-Mail einzufügen oder als Anhang zu versenden, aber diese Lösungen haben mehr Nachteile als Vorteile. Größere Bilder sollten verlinkt werden, während kleinere Bilder wie Icons oder Logos in die E-Mail eingefügt werden können, aber es gibt keine spürbaren Vorteile und wir müssen die Bilder vorher vorbereiten.

Der dritte Teil unseres Artikels wird in Kürze erscheinen. Bleiben Sie dran!

Mehr aus dieser Serie

    
Building Responsive Email Templates - Part 1: Why We Should Pay Attention to Our HTML Emails
    
Building Responsive Email Templates - Part 2: How to Build a Good HTML Mail Template
    
Building Responsive Email Templates - Part 3: Testing