Newsletter-Gestaltung

Marketingabteilungen und Agenturen sehen sich regelmäßig vor der Herausforderung, die zu versendenden Newsletter für viele unterschiedliche E-Mail-Programme und Webmailer design-konform aufzubereiten. Zugleich gehen neue Versionen und Web-Updates häufig mit neuen Gestaltungsregeln einher. Darüber hinaus ist die Anzahl der von den Empfängern genutzten Programme und Tools inzwischen beinahe unübersichtlich groß. Eine weitere Besonderheit der Newsletter-Gestaltung ist, dass beim HTML-Code deutliche Unterschiede zu der Erstellung für Webbrowser bestehen. Deshalb sind für die Erstellung von "richtigem" E-Mail-HTML neueste Web-Editoren und Gestaltungsprogramme nur sehr begrenzt brauchbar. Die HTML-Programmierung für E-Mail-Programme und Webmailer folgt eigenen Regeln. Da die Newsletter-Darstellung von Programm zu Programm variiert, leiden auch die E-Mail-Zustellraten unter Inkonsistenzen in diesem Bereich.


Dieses Dokument informiert über die wichtigsten Regeln bei der Newsletter-Erstellung. Die Hinweise basieren auf den langjährigen Erfahrungen des Optivo Entwicklerteams bei der Erstellung von E-Mail-HTML. Die nachfolgenden Informationen sind darauf ausgelegt, dass ein Newsletter beim Empfänger ankommt und dabei auch so aussieht, wie er soll.


HTML- und Text-Version versenden

Für den Newsletter-Versand empfehlen wir das Multipart-Format. Multipart ist das weltweit am häufigsten genutzte Format im Bereich werblicher E-Mails. Dabei enthält jeder versandte Newsletter alle Inhalte in zweifacher Ausfertigung: Einmal im Text- und einmal im HTML-Format. Beim Empfänger wird in den meisten Fällen die HTML-Variante angezeigt. Sofern der Empfänger einen älteren E-Mail-Client einsetzt, der kein HTML unterstützt, oder wenn die HTML-Anzeige deaktiviert wurde, wird die Textvariante angezeigt. Mit der Wahl dieses Versandformats stellt der Versender sicher, dass jeder Empfänger einen lesbaren Newsletter erhält.


Tipps für die Text-Version

  • Die Textversion sollte möglichst die gleichen Informationen wie die HTML-Version enthalten. Bei leistungsfähigen E-Mail-Systemen wird aus der HTML-Version meist automatisiert die Textversion erstellt.
  • Die Laufweite (also Zeilenlänge) darf maximal 68 Zeichen betragen.
  • Zur Gliederung der verschiedenen Elemente sollten gängige Trennungszeichen genutzt werden, die sich aus einzelnen Textzeichen zusammensetzen. Häufig werden Sterne **** oder Bindestriche ----verwendet.
  • Textauszeichnungen wie Fett, Kursiv oder Unterstrichen können in der Textversion nicht verwendet werden, da nur unformatierte Textelemente darstellbar sind.
  • Anders als bei der HTML-Version können Textelemente nicht mit "unsichtbaren" Links hinterlegt werden. Die Beschriftung eines Links und die Adresse einer Landing-Page werden stets getrennt voneinander ausgegeben.
  • Die Formatierung von URLs (farbliche Hervorhebung, Unterstreichung, Klick-Sensitivität usw.) ist vom eingesetzten E-Mail-Programm abhängig und kann vom Versender nicht beeinflusst werden.

E-Mail-HTML folgt eigenen Regeln

Viele E-Mail-Programme verwenden sogenannte "Rendering-Engines", welche oft nicht den neuesten (X)HTML-Spezifikationen entsprechen. Dadurch lassen sich viele Newsletter-Elemente nicht korrekt bzw. gar nicht anzeigen. Um dennoch eine möglichst optimale Darstellung in den unterschiedlichen Clients zu erzielen, sollte ein möglichst "altmodischer" HTML-Stil verwendet werden. Konkret empfehlen wir:

  • Die Nutzung von einfachstem HTML 4.01 Transitional.
  • Das HTML sollte generell in einem eher "älteren" Stil codiert werden.
  • Der BODY-Tag sollte nicht durch weitere Attribute ergänzt werden (keine Styles, bgcolor usw.).
  • Innerhalb des BODY-Bereichs sollten nur folgende Tags verwendet werden: "table", "td", "tr", "img", "a", "font", "i", "u" und "b".
  • Es sollte möglichst immer auf die Verwendung von Style-Definitionen verzichtet werden (einzige Ausnahme: direkte Formatierung von FONT-Tags – siehe nächster Punkt).
  • Nur Verwendung von vollen RGB-Farbwerten (Ideal: "#FFFFFF" – nicht empfehlenswert: "#FFF", "white" oder "FFFFFF").

So setzen Sie Schriftarten effektvoll und richtig ein

  • Schriftarten sollten immer mit FONT-Tags beschrieben werden.
  • Informationen, die durch den FONT-Tag abbildbar sind, können durch STYLE-Attributelemente ergänzt werden. Dabei sollte jedoch darauf geachtet werden, dass die Darstellung auch ohne diese zusätzlichen Definitionen angemessen ist. So könnte beispielsweise das FONT-Attribut size="1" mit dem STYLE-Attribut style="font-size:9px" ergänzt werden, wenn die STYLE-Definition näher an die tatsächlich gewünschte Schriftgröße herankommt. Sofern das STYLE-Attribut nicht interpretiert wird, wird automatisch auf das Font-Attribut size zurückgegriffen. Hierbei sollte folgende Anmerkung berücksichtigt werden: FONT-Tags stellen eine Ausnahme bezüglich des STYLE-Attribut-Verbots dar. Die verwendeten STYLE-Attribute überschreiben oftmals lediglich reguläre FONT-Attribute. Somit ist gewährleistet, dass E-Mail-Programme ohne STYLE-Interpreter auf die herkömmlichen Attribute zurückgreifen können und die Darstellung dadurch auf möglichst ähnliche Weise erfolgt.
  • Es sollten immer auch vergleichbare generische Schriftarten angegeben werden, da nicht alle Schriften auf jedem System vorhanden sind. Um also eine kontrollierte Darstellung auf allen Systemumgebungen zu gewährleisten, sollte beispielsweise Arial stets um Sans Serif ergänzt werden, Times New Roman um Serif und Courier New um Monospace (weitere generische Schriftfamilien: Cursive, Fantasy).

Beispiel: 


<u><font face="Arial,sans-serif" size="1" color="#FF0000" style="font-size:9px;"></font></u>

Grafiken richtig einsetzen

  • Als Grafikformate empfehlen wir die Verwendung von GIF oder JPEG. Andere Formate wie PNG werden von einigen E-Mail-Programmen nur unzureichend unterstützt.
  • Animierte GIFs können verwendet werden, allerdings sollten gewisse Einschränkungen berücksichtigt werden. Microsoft Outlook 2007 zeigt etwa immer nur das erste Frame eines animierten GIF-Bildes. Entsprechend sollte darauf geachtet werden, dass in den nachfolgenden Frames keine wesentlichen Informationen platziert sind, die eventuell verloren gehen.
  • Grafiken sind immer mit den Attributen "width" und "height" zu versehen. Viele E-Mail-Programme zeigen die Grafiken des Newsletters nicht sofort an, sondern erst dann, wenn diese explizit aktiviert werden. Solange die Grafiken nicht vom Server geladen wurden, ist die Größe des Bildes nicht bekannt. Dies führt dazu, dass Grafikumrisse in abweichenden Ausmaßen angezeigt werden, wenn die gewünschte Größe nicht im IMG-Tag spezifiziert wurde. Im Extremfall "bricht" der Newsletter hierdurch auseinander und ist unlesbar.
  • Es sollte immer ein ALT-Text angeben werden. Solange Grafiken nicht dargestellt werden (beispielsweise aufgrund von Ladezeiten bei langsamen Internetverbindungen oder aufgrund von Sicherheitssperren), wird ersatzweise der im ALT-Attribut angegebene Text angezeigt. Dieser Text sollte deshalb einen Hinweis auf die Funktion oder Art der platzierten Grafik geben bzw. einen in der Grafik vorkommenden Text wiedergeben. Die Angabe eines leeren Texts (alt="") ist auch möglich und sollte dem Weglassen des ALT-Attributs vorgezogen werden.
  • Verlinkte Bilder sollten das Attribut border="0" enthalten. Viele Clients erzeugen andernfalls automatisch einen blauen Rahmen um die verlinkten Bilder.
  • Bilder sollten nicht durch das ALIGN-Attribut ausgerichtet werden, sondern besser durch eine umgebende Tabelle. Bilder innerhalb eines A-Tags, welche mit Hilfe eines ALIGN-Attributs formatiert werden, lassen sich beispielsweise im Internet Explorer nicht anklicken.
  • Auf Definitionen außerhalb des BODY-Tags sollte verzichtet werden. Bei Webmailern werden die HEAD-Informationen oft abgetrennt. Deshalb sollten an dieser Stelle keine für die Darstellung relevanten Informationen hinterlegt werden.

Keine Hintergründe verwenden

Hierfür gibt es gute Gründe: Speziell Microsoft Outlook 2007 ist nicht in der Lage, Grafiken im Hintergrund anzuzeigen. Es sollten deshalb keine Hintergrund-Grafiken verwendet werden.


Interaktive und dynamische Elemente

  • Flash oder andere dynamische Elemente sind nicht empfehlenswert. Besser sollten repräsentative Grafiken (oder animierte GIF-Dateien) eingefügt werden, welche auf spezielle Landing-Pages führen. Dort können dann problemlos dynamische Inhalte abgespielt werden, da die Darstellung im Webbrowser der Empfänger erfolgt. In Newsletter eingebundene Flash- oder ähnliche Inhalte führen häufig zu Zustellungsproblemen oder werden im E-Mail-Programm nicht dargestellt.
  • In Newslettern sollte auf Eingabemasken im Internet verlinkt werden. Microsoft Outlook 2007 und viele Webmailer sind nicht in der Lage, Formulare zufriedenstellend darzustellen und auszuwerten.
  • Auf JavaScript sollte verzichtet werden. JavaScript wird von den meisten E-Mail-Programmen und Anti-Spam-Filtern als Spam-Attacke oder Phishing-Angriff interpretiert bzw. einfach nicht ausgeführt.

Layout klar und einfach definieren

  • Um ein Layout darzustellen, sollten ausschließlich Tabellen verwendet werden. Da einige E-Mail-Clients neuere Layout-Formatierungen wie beispielsweise DIV oder SPAN nicht korrekt darstellen, sollten Elemente nur mittels TABLE-Strukturen angeordnet und positioniert werden.
  • COLSPAN kann innerhalb von TABLE-Strukturen verwendet werden. ROWSPAN hingegen sollte unbedingt vermieden werden, da dieser Tag von einigen E-Mail-Programmen nicht korrekt umgesetzt wird.
  • Sofern Breite oder Höhe bekannt eines Elements (TABLE, TD etc.) bekannt sind, sollten diese Werte dem entsprechenden Element als width- und height-Attribut mitgegeben werden. Nur so ist eine möglichst stabile Darstellung sichergestellt.
  • Eine Grafik, welche in einer Tabellen-Zelle dargestellt wird, sollte ohne Leerzeichen auf den Beginn des Zellen-Bodys folgen und auch ohne Leerzeichen enden.
  • In vielen Webmailern und Vorschauansichten steht der E-Mail nur wenig Platz zur Verfügung. Für die Empfänger sollten die wichtigsten Informationen möglichst ohne Scrollen sichtbar sein. Der Newsletter sollte deshalb eine Breite von 600 Pixel nicht überschreiten.
  • Für die Erstellung von Rahmen und Strichen sollte auf das STYLE-Attribut "border" verzichtet werden. Ersatzweise können Linien durch leere und mit Hintergrundfarbe versehene Tabellenzellen gestaltet werden. Für eine horizontale Linie kann beispielsweise eine Tabellenzelle der Höhe 1 und Breite x genutzt werden. Entsprechend wird eine gerahmte Box folgendermaßen erzeugt:

Link-Auszeichnung

Bei Verlinkungen sollte im A-Tag die Farbe des Links zusätzlich durch ein STYLE-Attribut gesetzt werden (als Ausnahme des STYLE-Verbots). Die Verwendung des FONT-Tags zur farblichen Gestaltung von Links wirkt sich bei einigen E-Mail-Programmen nicht auf die Farbe der Link-Unterstreichung aus. Aus diesem Grund empfiehlt sich eine "doppelte" Einfärbung durch das FONT-Tag und A-Tag:


<a href="http://www.google.de" style="color:#FF0000;"><font size="0" color="#FF0000">Google-Suche</font></a>