7 lebensrettende Tipps für die Entwicklung von E-Mail-Templates
If you are already familiar with web development, forget everything you know about it.
– Nicole Merlin, eine E-Mail-Designerin, über die Entwicklung von E-Mail-Templates.
Doch warum ist das so?
Es gibt für das Web inzwischen bestimmte Standards die von Browsern wie Firefox, Google Chrome oder manchmal auch Internet Explorer berücksichtig werden, damit eine standardkomform geschriebene Webseite auf all diesen Plattformen gleich angezeigt wird. Diese Standards existieren für E-Mails nicht. Es gibt außerdem viele unterschiedliche Clients um E-Mails zu betrachten. Eine Zusammenfassung von Nicole Merlin zeigt, wie umfangreich diese Liste schon 2013 war.
Im letzten Jahr musste ich einiges über die Entwicklung von E-Mail-Templates lernen, als ich zwei E-Mail-Templates mit striktem Cooperate Design für einen Kunden umgesetzt habe. Ich gebe nun Tipps weiter, die mir vor Entwicklungsstart einiges an Nerven und Frust erspart hätten.
Tipp 1: Versuche nicht auf eigene Faust zu handeln, es gibt genug im Internet
Die Grundlage sollte ein bestehendes Template bilden, das Rad muss nicht neu erfunden werden. Es gibt einige Vorlagen, bestenfalls eine die schon viele Elemente des Designs beinhaltet. Ich habe mit einer MailChimp-Vorlage gestartet, da später dort auch die Mails versendet werden sollten und schon einige Beispiele für die Umsetzung gegeben werden.
Tipp 2: wie früher – Tabellenlayout und Inline-CSS
Wie schon zuvor erwähnt: E-Mail-Templates sind wie Webseiten der 90iger-Jahre. Die Layouts sollten nicht mit <div> oder anderen Elementen definiert werden sondern mittels Tabellen. In der Webentwicklung ist diese Vorgehensweise schlechte Praxis, bei E-Mail-Templates für bestimmte Layouts unausweichlich.
Um sicherzugehen, dass alle CSS-Styles auch berücksichtigt werden, sollten diese Inline definiert werden. Man muss jetzt aber die Styles beim Entwickeln nicht direkt in die Element-Attribute schreiben sondern kann einen Generator verwenden, der einem schlussendlich das Template mit Inline-Styles generiert.
Einerseits macht MailChimp das bei Custom Templates bevor sie verschickt werden, man kann aber auf Nummer sicher gehen, oder falls man MailChimp nicht zum Versenden der Mails verwendet, und mit dem „CSS Inliner Tool“ sein E-Mail-Template umwandeln lassen.
Tipp 3: eine Textbeschreibung die nur in der Mailübersicht angezeigt wird
Einleitungstexte von E-Mails im Posteingang sind wichtig, damit Empfängerinnen und Empfänger einen Eindruck vom Inhalt bekommen und somit die E-Mail schlussendlich auch öffnen. Zwei Beispiele für diesen Text sind im Bild oben zu sehen. Um einen solchen Text in das Template einzubauen, ohne dass der Text an der ersten Stelle des Templates sichtbar ist, gibt es folgenden Code:
<div style="display: none;
font-size: 1px;
color: #ffffff;
line-height: 1px;
max-height: 0px;
max-width: 0px;
opacity: 0;
overflow: hidden;">
Ihre Traumziele warten auf Sie – buchen Sie jetzt!
</div>Der Text wird nur in der Übersicht angezeigt und die ersten sichtbaren Elemente im Template können andere Elemente wie Bilder oder die Anrede sein.
Tipp 4: padding zu wenig oder zu viel?
Der Abstand wird nicht und nicht angezeigt? Oft setzt man auf HTML-Elemente einen padding-Style der zum Beispiel in Outlook nicht greift. Eine zuverlässige Lösung bietet eine table-Struktur um das betroffene Element. Dem td-Element der Tabelle wird dann der padding-Style gegeben. So wird der Abstand bestimmt in allen Mail-Clients angezeigt.
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top" style=„padding-bottom: 10px; padding-top: 5px;“>
…
</td>
</tr>
</table>Es ist auch besser, padding nicht allgemein, sondern für alle Richtungen (top, right, bottom, left) extra zu setzen, damit das Template in allen Clients gleich aussieht.
Werden mysteriöse Abstände bei einer Tabelle angezeigt, die nicht gesetzt wurden? Hier hilft es, die Attribute border, cellpadding und cellspacing der Tabelle auf 0 zu setzen.
<table border="0" cellpadding="0" cellspacing="0"></table>Tipp 5: Entwicklung für MailChimp
Wird das E-Mail-Template in MailChimp umgesetzt, kommt man nicht um die Verwendung von „Merge Tags“ herum. Es gibt eine Reihe solcher Merge Tags die den Newsletter personalisieren wie FNAME und LNAME. Interessant ist auch die Möglichkeit, sie selbst zu definieren.
Um das aktuelle Jahr auszugeben gibt es den Merge Tag CURRENT_YEAR. Möchte man jedoch ein individuelleres Datum ausgeben gibt es DATE, weshalb ich diesen Merge Tag bevorzugen würde. Die Regeln für das Datumsformat stammen von PHP.
Es folgen zwei Beispiele wie ich DATE im Code eingebaut habe:
<div>
Newsletter | <span style="white-space: nowrap">*|DATE:d. m. o|*</span>
</div>
<p>Copyright © Unternehmen *|DATE:Y|*, alle Rechte vorbehalten.</p>Wie an den Beispielen zu sehen ist, werden alle Merge Tags wie folgt eingebunden: *|MERGE_TAG_NAME|*
Mit Merge Tags sind auch Bedingungen möglich. Zum Beispiel kann abgefragt werden, ob sich Userinnen und User/Nutzerinnen und Nutzer gerade auf der Browseransicht (ARCHIVE_PAGE) befinden. Dort kann man dann den Text „im Browser ansehen“ ausblenden.
*|IF:ARCHIVE_PAGE|*
*|ELSE:|*
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td style="background-color: #ffffff;"></td>
<td align="center" valign="top" width="600" style="background-color: #ffffff; text-align: right; padding-top: 10px; padding-bottom: 10px; padding-right: 20px; padding-left: 20px;">
Wird diese E-Mail nicht korrekt dargestellt?
<a href="*|ARCHIVE|*" target="_blank">Im Browser ansehen > </a>
</td>
<td style="background-color: #ffffff;"></td>
</tr>
</table>
*|END:IF|*Ein wichtiger Merge Tag ist REWARDS, für die Einbindung des MailChimp-Buttons. Wird dieser in einem selbstgeschriebenen Template nicht hinzugefügt, hängt MailChimp bei kostenlosen Accounts einen eigenen Footer ans Ende der E-Mail, welcher natürlich keine Rücksicht auf das Design des Templates nimmt.
<div style="margin-top: 30px; text-align: center">
*|IF:REWARDS|* *|REWARDS|* *|END:IF|*
</div>Es empfiehlt sich auch bei einem bezahlten Account eine Abfrage und den REWARDS Merge Tag einzubauen, falls der Account ausläuft, um den MailChimp-Footer zu verhindern.
Wie bei REWARDS ist auch der UNSUB Merge Tag für einen Link zur Abmeldung vom Newsletter verpflichtend, um den von MailChimp angehängten Footer zu verhindern. Man kann ihn wie folgt einsetzen:
<a href="*|UNSUB|*" target="_blank">vom Newsletter abmelden</a>Eine Auflistung aller Merge Tags befindet sich hier: kb.mailchimp.com/merge-tags/all-the-merge-tags-cheat-sheet
Sollen Newsletter-Redakteure die Möglichkeit bekommen, das Layout, Elemente oder auch Farben im Template zu ändern, gibt es von MailChimp eine eigene Template-Sprache. Ein paar Beispiele dazu befinden sich in meinem vorherigen Blogartikel über die Umsetzung eines E-Mail-Templates mit Teaserliste. Ich empfehle die Dokumentation dazu ausführlich zu lesen, da sich dort einige hilfreiche Tipps finden lassen.
Tipp 6: Immer wieder testen und testen und testen
Je schneller man einen Darstellungsfehler entdeckt umso einfacher ist es ihn zu lösen. E-Mail-Templates werden mit den verschachtelten Tabellenstrukturen und dem Inline-CSS schnell komplex. Deshalb gilt: nach jeder noch so kleinen Änderung immer auf allen Clients testen auf denen das E-Mail-Template gut aussehen muss!
Idealerweise besitzt man alle Endgeräte, auf denen das E-Mail-Template gut aussehen soll und kann dort direkt immer wieder die Funktionalität und das Aussehen testen. Alternativ können Tools wie Litmus oder Campaignmonitor verwendet werden. MailChimp bietet auch die Möglichkeit (für bezahlte Accounts) auf unterschiedlichen Endgeräten und Mail-Clients zu testen.
Weiß man mal gar nicht mehr weiter, kann auch das Validieren des Templates Fehler zum Vorschein bringen (zum Beispiel mit Premailer).
Tipp 7: „Don’t get angry, get even.“
Je erfahrener eine Webentwicklerin/ein Webentwickler ist umso schwieriger ist es, sich von den modernen Technologien zu verabschieden und alles umständlicher zu schreiben, als man es gewohnt ist. Deshalb ist das Schreiben eines E-Mail-Templates so ein nervenaufreibender Prozess. Auf der Suche nach Problemlösungen stellt man fest, dass sich viele andere Entwicklerinnen und Entwicklerin in der selben Situation befinden. Das alleine ist schon ein beruhigender Gedanke.
Beispielsweise bin ich während der Entwicklung auf einen Blog-Beitrag mit dem Titel „How To Create HTML Email Newsletters To Look The Same – Even In Outlook“ von Rob Cubbon gestoßen. Er hat für mich magische Worte geschrieben:
Don’t bang on the table, pull your hair out or write vitriolic attacks against Microsoft in your Twitter feed like I did – it won’t get you anywhere. Instead have a cup of tea, breathe deeply and affirm "I will beat this. I will do this. I will finish this."
Seit ich auf diesen Artikel gestoßen bin, hängt dieses Zitat im Büro an der Wand gegenüber.
Veröffentlicht am: 07.09.2016
Autorin
Mirjam Zenz
Wir haben noch mehr super interessante Blogartikel!