DOs and DON‘Ts bei der Erstellung von HTML-Newsletter

Obwohl HTML-E-Mails nicht nur optisch, sondern auch funktional mehr zu bieten haben als reine Text-E-Mails, ist die Umsetzung nicht zu unterschätzen. Vor allem durch die Verwendung unterschiedlichster E-Mail-Clients und Browser wird eine einheitliche Darstellung erschwert. Mit ein paar Regeln können jedoch moderne und ansprechende Newsletter erstellt werden, die dem Kunden gefallen und ihm als Bereicherung dienen.

E-Mail-Clients

E-Mail-Programme lassen sich in drei Gruppen einordnen: Desktop, Web und Mobile. Die wichtigsten Vertreter von betriebssystemnahen Programmen (Desktop) sind Outlook und Apple Mail – aber auch Entourage, Thunderbird und Lotus Notes finden verbreitet Anhänger. Auch wenn Microsoft mit seiner Outlook-Reihe die meisten Nutzer für sich entscheiden kann, bereitet gerade die veraltete Word-Renderengine seit Outlook 2007 erhebliche Schwierigkeiten bei der homogenen Darstellung einer HTML-E-Mail.

Webmailer wie Gmail, Yahoo! Mail, Hotmail oder AOL machen sich die Renderengine des verwendeten Browsers zunutze und haben durch ihre browsertypischen Eigenheiten auch ihre Tücken.

Im Bereich Mobile gibt es noch mehr zu beachten, denn hier kommt noch zusätzlich das Problem eines kleineren Displays hinzu, welches ferner einer speziellen Umsetzung bedarf.

Struktur

Um dieses Thema noch überschaubar zu halten, möchte ich nachfolgend nur auf die wesentlichen Regeln bei der Erstellung von HTML-Newsletter eingehen. Gerade durch die enorme Vielfalt an genutzten E-Mail-Clients empfiehlt es sich „back to the roots“ zu gehen und auf eine eher veraltete Tabellenstruktur zurückzugreifen – diese „garantiert“ noch am ehesten eine einheitliche Darstellung. Darüber hinaus ist der komplette Verzicht auf external Stylesheets ebenso zu empfehlen, wie die generelle Vermeidung von inline Stylesheets – einige Clients entfernen nämlich sämtliche Stylesheets aus dem Header und andere wiederrum ignorieren die inline Stylesheets völlig. Hier gilt die Regel, mit so wenig CSS auszukommen wie möglich. Abstände sollten daher besser durch ein transparentes Pixel in einer Zelle, mit einer bestimmten Höhe und Breite erreicht werden, anstatt dies mit „padding“ oder „margin“ zu erzielen. Auf „rowspan“ sollte ebenfalls verzichtet werden – besser mit geschachtelten Tabellen arbeiten.

Schrift

Mit einem <font>-Tag im Gegensatz zu den <p>-Tags oder sogar jeglicher Headline-Tags ist man ebenfalls auf der sichereren Seite. Noch ein Tipp: Outlook 2007 / 2010 erkennen problemlos line-heights bis zu 18pt, danach besitzen diese E-Mail-Clients allerdings ihre eigene Definition von Maßeinheiten. Es gibt bestimmte work-arounds, welche das line-height Problem beheben – aus Erfahrung heraus sollte darauf allerdings besser verzichtet werden, da gegebenenfalls an anderen Stellen neue Probleme entstehen können. Aus diesem Grund wird in diesem Beitrag auch nicht weiter darauf eingegangen. Bei Sonderzeichen ist die Verwendung von HTML-Entities immer vorzuziehen, obwohl die UTF-8-Codierung meist zuverlässige Arbeit leistet. Auch wenn eine schöne Hintergrundfarbe im Body den Newsletter durchaus unterstützen kann, sollte einem bewusst sein, dass auch dieser gegebenenfalls ungewollter Weise von einem weißen Hintergrund ersetzt wird – es empfiehlt sich daher die Auswahl einer Hintergrundfarbe, welche unabhängig vom eigentlichen Content visuell unterstützend wirkt.

Bilder

Die Verwendung von ansprechenden Bildern ist natürlich gern gesehen, obgleich es auch hier wieder Einiges zu beachten gibt. Die wichtigste Regel besagt: Der Newsletter sollte auch immer ohne Bilder klar verständlich und gut lesbar sein. Bilder werden gerne vom E-Mail-Client geblockt, wodurch der Leser auf den ersten Blick nur alle Textinformationen dargestellt bekommt – Bildmotive werden durch Platzhalter ersetzt und dienen daher nicht als Kommunikationsmittel. Die Verwendung von ausdruckstarken ALT-Tags kann somit sehr nützlich sein. Darüber hinaus werden seit Outlook 2007 leider keine Hintergrundbilder dargestellt. Aus diesen Gründen bietet sich die Übermittlung der Kernbotschaft in textlicher Form besser an und verringert gleichzeitig noch die Chance, dass der Newsletter im Spam-Filter landet, welcher HTML-E-Mails, mit höherem Bild- als Textanteil gerne aussortiert. Nebenbei sind auch Preisangaben und $- oder €-Zeichen bei Spam-Filtern gern gesehen – gerade im Betreff! Generell ist eine Breiten- und Höhenangabe bei Bildern ratsam, um die Chance einer unbeabsichtigten Darstellung zu minimieren. Die Dateigröße bei Bildern sollte natürlich auch so klein wie möglich gehalten werden und die Bilder idealerweise auf einem Server abgelegt und per absolutem Pfad verlinkt sein, um die Gesamtgröße der HTML-E-Mail zu verringern. Eine kleine Besonderheit bei Gmail im Firefox bedarf noch zusätzlicher Aufmerksamkeit: Dieser Client stellt gerne kleine Abstände bei Bildern dar, welche dem Gesamtdesign, gerade bei aufeinanderfolgenden Bildern, sehr schaden können. Lösung: Wenn man jedes Image auf „display: block“ setzt, wird diese ungewünschte Besonderheit aufgehoben und es entsteht auch bei keinem anderen Client ein Problem.

Abb. 1: Weiße Abstände bei Gmail (Firefox) Keine Abstände mit „display: block“ bei Gmail (Firefox)

Usability

Zu guter Letzt empfiehlt es sich immer einen Link zur Webversion des Newsletters anzubieten, falls das E-Mail-Programm doch noch etwas an dem mühsam erarbeiteten Code auszusetzen hat (siehe Abb. 2). Desweiteren freut sich der Kunde über klare Aussagen im Betreff und übersichtlich strukturierten Content. Eine persönliche Anrede klingt freundlich und erhöht in der Regel auch die Konvertierungsrate. Ein Impressum wirkt nicht nur seriöser, sondern ist in Deutschland sogar Pflicht, ebenso wie ein Abmelde-Link! Abgesehen davon, sollte dieser auch nicht versteckt werden, sondern schnell auffindbar sein – gewöhnlich am Ende des Newsletters.

Abb. 2: Noch vor dem Header zu Beginn des Newsletters ist ein Link zur Webversion positioniert

Testing

Wenn nun schlussendlich der Newsletter angefertigt worden ist, will man ihn in der Regel nicht ungetestet verschicken – hier kann das Testing Tool Litmus weiterhelfen. Es bietet die Möglichkeit die HTML-E-Mail auf sämtliche im Umlauf befindlichen E-Mail-Programme zu testen. Nach einer bestimmten Wartezeit (abhängig von der Anzahl an E-Mail-Clients) liefert Litmus einen Screenshot der versendeten HTML-E-Mail zu jedem Client und man kann seinen Newsletter und die abweichenden Darstellungen gezielt unter die Lupe nehmen (siehe Abb. 3).

Abb. 3: Screenshots sämtlicher E-Mail-Clients unter Litmus (Übersichtsansicht)

Abschließend will noch gesagt sein, dass diese Tipps als Hilfestellung dienen sollen und kein Patentrezept darstellen. Jeder hat seinen eigenen Entwicklerstil und sich vielleicht auch andere Vorgehensweisen erarbeitet. Es gibt ebenso einige Firmen, die sich gezielt nur an die Darstellung bestimmter Clients orientieren, wie beispielsweise an Apple-Nutzer – hier kann ganz anders gearbeitet werden, denn die Darstellungen in Microsoft Outlook interessieren an dieser Stelle nicht. Wer aber eine Zielgruppe in einem breiten Spektrum ansprechen will, der kommt nicht herum sich weiter zu informieren und zu testen. Die Erstellung von Newslettern ist eben nicht ganz trivial und es ist in der Regel viel Erfahrung nötig, um exzellente Client-übergreifende Newsletter anzufertigen.



---

---