Erstellung HTML Newsletter – Best Practices

This post is also available in: Deutsch (German)

Wer schon einmal einen HTML-Newsletter erstellt hat, weiß das dies mit einigen “Schmerzen” verbunden ist. Es gibt eine Menge Tools, um seine eMails zu lesen. Diese Tools unterteilen sich in zwei Kategorien:

• Desktop Tools: z.B. Outlook, Eudora, AOL, Thunderbird, Lotus Notes, Entourage, …
• Web-Based Tools: z.B. yahoo, hotmail, gmail, web.de, gmx, …

Jeder weiß, daß die “Cross-Browser”-Entwicklung ein aufwändiges und mitunter auch nerviges Unterfangen ist. Die Entwicklung eines HTML-Newsletters spielt bei der vielzahl an Clients in dieser Hinsicht in einer ganzen anderen Liga.

Man kann die ganzen Web-Standards vergessen, denn HTML eMails sind nicht das Web. Die meisten Mail-Clients sind Lichtjahre entfernt im Hinblick auf CSS Support.

Das heißt man benutzt Tabellenlayouts.

Layoutvarianten:

a) Einspaltiges bestehend aus

• Header
• Content
• Footer

b) Zweispaltiges bestehend aus

• Header
• schmale Spalte für Content
• breite Spalte für Content
• Footer

Die Benutzung von Tabellen ist die einzige brauchbare Vorgehensweise bei der Erstellung von HTML-Newslettern. Sie zu benutzen zwingt einen jedoch nicht komplett auf der HTML-Old-School Schiene zu bleiben.  Man kann z.B. für Schriftformatierungen auf das font-Tag verzichten.

…Mail-Cients sind Lichtjahre entfernt im Hinblick CSS Support…

Damit ist gemeint, dass bei der Benutzung von CSS einige Dinge zu beachten sind:

• kein CSS im head-Tag
• kein externen CSS Datei

Hierzu muss man sagen, dass die meisten Web-Mailer diese Angaben einfach entfernen.

Man sollte CSS in der Inline-Variante angeben ( <td style=”color:red”>Bla</td> ). Aber auch hier ist zu beachten, dass die CSS-Unterstützung sich von Client zu Client unterscheidet.
Hier eine gute Übersicht zu diesem Thema.

Beim Screendesign der HTML eMail sollte auf ein einfaches Design geachtet werden und die Breite sollte maximal 600px betragen. Des weiteren hat man durch die beengte Vorschauansicht in einigen Mail-Clients nur wenig Spielraum den User zum lesen des Newsletters zu animieren, deshalb sollte der Bereich (ca. 300 x 300px) links-oben nicht leer sein. Natürlich spielt die Wortwahl der Betreffzeile eine größere Rolle, aber das ist ein anderes Thema.

Textversion nicht vergessen

Bei der ganzen Arbeit mit der HTML eMail und dem Kampf mit den unterschiedlichen Clients, darf man nicht vergessen eine Textversion des Newsletters zu erstellen. Der Inhalt der Textversion sollte gleich dem der HTML-Version sein und nicht wie folgt lauten:

“Sie können leider keine HTML eMail empfangen bitte klicken Sie hier: http://www.example.com”

Bei der Textversion sollte man versuchen auf Grund der Lesbarkeit nicht mehr als 70 Zeichen pro Zeile zu verwenden. Als Strukturierungselemente kann man “—— / ******* / ###### / +++++++++” benutzen.

Special thanks to Microsoft

Ein besondere Erwähung gebührt Microsoft und ihrem Produkt Outlook ab Version 2007. Während die Vorgängerversionen zum rendern von HTML die IE Engine benutzen, kam irgendjemand bei MS auf die glorreiche Idee ab Outlook 2007 die Word HTML-Rendering-Engine einzubauen. Das wirft natürlich vieles über den Haufen und führt bei der Erstellung von Newslettern unweigerlich zu noch mehr “Schmerzen”.

Tipps und Tricks:

• Generelle Schriftangaben in td-Tags
• Bilder auf dem Server speichern und nicht löschen
• Wechsel von %-Breiten zu fixen Breiten kann auch zum Erfolg führen
• Design max. 600px breit
• Abstände erst mit cellspacing und cellpadding steuern. Wenn das nichts bringt, margin und padding benutzen
• </td>-Tag immer in eine Zeile mit <img>-Tag ( <img src=”bild.gif”></td> )
• Javascript, Flash usw. funktionieren “nicht”
• background-Attribut der Tabelle für Hintergrundbilder benutzen
• Hintergrundbild bzw. -farbe nicht in den body-Tag
• target=”_blank” bei Links benutzen
• Keine großes Bild am Anfang der eMail (Spam)
• HTML eMails müssen auch ohne Bilder brauchbar sein (alt Attribute benutzen)
• eMails als Schnittstelle zur WebSite nutzen
• CSS Positionierung geht nicht
• Auch ohne Inline CSS muss es lesbar sein
• Gute Balance zw. Bildern und Text
• Unsubcribe-Link nie vergessen
• Immer Textversion erstellen
• …

eMail-Standard

Es gibt einen “Verein”, der sich zu Aufgabe gemacht hat einen Standard ähnlich dem Web-Standard für eMails zu entwickeln. Dieser Verein besteht aus Web-Designern und eMail-Client Entwicklern. Den Stand ihrer Arbeit könnt ihr hier verfolgen.