Hinweise zur Newslettergestaltung - HTML- und Text-Newsletter, Schriftarten, Grafiken sowie gestalterische und interaktive Elemente

1 Version: Nov 07, 2007 White Paper Hinweise zur Newslettergestaltung HTML- und Text-Newsletter, Schriftarten, Grafiken sowie gestalterische und interaktive Elemente White Paper Hinweise zur Newslettergestaltung E-Mail-HTML folgt eigenen Regeln Marketingabteilungen und Agenturen sehen sich regelmäßig Gestaltungsprogramme nur sehr begrenzt brauchbar. Die vor der Herausforderung, die zu versendenden Newsletter HTML-Programmierung für E-Mail-Clients und Webmailer folgt für viele unterschiedliche E-Mail-Clients und Webmailer design- eigenen Regeln. Da die Newsletterdarstellung von Programm konform aufzubereiten. Zugleich gehen neue Versionen und zu Programm variiert, leiden auch die E-Mail-Zustellraten unter Web-Updates häufig mit neuen Gestaltungsregeln einher. Inkonsistenzen in diesem Bereich. Darüber hinaus ist die Anzahl der von den Empfängern genutzten Programme und Tools inzwischen beinahe unüber- Dieses White Paper informiert über die wichtigsten Regeln sichtlich groß. bei der Newlettererstellung. Die Hinweise basieren auf den langjährigen Erfahrungen des optivo Entwicklerteams bei der Eine weitere Besonderheit der Newslettergestaltung ist, dass Erstellung von E-Mail-HTML. Die nachfolgenden Informationen beim HTML-Code deutliche Unterschiede zu der Erstellung sind darauf ausgelegt, dass ein Newsletter beim Empfänger für Webbrowser bestehen. Deshalb sind für die Erstellung von ankommt und dabei auch so aussieht, wie er soll. "richtigem" E-Mail-HTML neueste Webeditoren und HTML- und Text-Version versenden Für den Newsletterversand empfehlen wir das Multipart-Format. Sofern der Empfänger einen älteren E-Mail-Client einsetzt, Multipart ist das weltweit am häufigsten genutzte Format der kein HTML unterstützt, oder wenn die HTML-Anzeige im Bereich werblicher E-Mails. Dabei enthält jeder versandte deaktiviert wurde, wird die Textvariante angezeigt. Mit der Wahl Newsletter alle Inhalte in zweifacher Ausfertigung: Einmal dieses Versandformats stellt der Versender sicher, dass jeder im Text- und einmal im HTML-Format. Beim Empfänger wird Empfänger einen lesbaren Newsletter erhält. in den meisten Fällen die HTML-Variante angezeigt. Besonderheiten bei der Text-Version Bei der Erstellung der Textversion gilt es zu berücksichtigen: » Anders als bei der HTML-Version können Textelemente nicht » Die Textversion sollte möglichst die gleichen Informationen mit "unsichtbaren" Links hinterlegt werden. Die Beschriftung wie die HTML-Version enthalten. Bei leistungsfähigen E-Mail- eines Links und die Adresse einer Landing Page werden Systemen wird aus der HTML-Version meist automatisiert stets getrennt voneinander ausgegeben. die Textversion erstellt. » Die Laufweite (also Zeilenlänge) sollte maximal Beispiel: 68 Zeichen betragen. Newsletter abbestellen: http://www.optivo.de/ » Zur Gliederung der verschiedenen Elemente sollten gängige unsubscribe?email=name@adresse.de Trennungszeichen genutzt werden, die sich aus einzelnen Textzeichen zusammensetzen. Häufig werden Sterne **** » Die Formatierung von URLs (farbliche Hervorhebung, oder Bindestriche ---- verwendet. Unterstreichung, Klick-Sensitivität etc.) ist vom eingesetzten » Textauszeichnungen wie Fett, Kursiv oder Unterstrichen E-Mail-Client abhängig und kann vom Versender nicht können in der Textversion nicht verwendet werden, da nur beeinflusst werden. unformatierte Textelemente darstellbar sind. optivo GmbH Tel.: +49(0)30-41 72 42 30 info@optivo.de www.optivo.de 2 White Paper Hinweise zur Newslettergestaltung Besonderheiten bei der HTML-Version Viele E-Mail-Clients verwenden so genannte Rendering Engines, » Der BODY-Tag sollte nicht durch weitere Attribute ergänzt welche oft nicht den neuesten (X)HTML-Spezifikationen ent- werden (keine Styles, bgcolor etc.). sprechen. Dadurch lassen sich viele Newsletterelemente nicht » Innerhalb des BODY-Bereichs sollten nur folgende Tags korrekt bzw. gar nicht anzeigen. Um dennoch eine möglichst verwendet werden: "table", "td", "tr", "img", "a", "font", optimale Darstellung in den unterschiedlichen Clients zu erzielen, "i", "u" und "b". sollte ein möglichst "altmodischer" HTML-Stil verwendet werden. » Es sollte möglichst immer auf die Verwendung von Style- Definitionen verzichtet werden (einzige Ausnahme: direkte Konkret empfehlen wir: Formatierung von FONT-Tags – siehe nächster Punkt). » Die Nutzung von einfachstem HTML 4.01 Transitional. » Nur Verwendung von vollen RGB-Farbwerten (Ideal: » Das HTML sollte generell in einem eher "älteren" Stil "#FFFFFF" – nicht empfehlenswert: "#FFF", "white" codiert werden. oder "FFFFFF"). Schriftarten effektiv einsetzen Bei den Schriftarten sollte der Versender einige Grundsätze Attribut-Verbots dar. Die verwendeten STYLE-Attribute berücksichtigen: überschreiben oftmals lediglich reguläre FONT-Attribute. » Schriftarten sollten immer mit FONT-Tags beschrieben Somit ist gewährleistet, dass E-Mail-Clients ohne STYLE- werden. Interpreter auf die herkömmlichen Attribute zurückgreifen » Informationen, die durch den FONT-Tag abbildbar sind, können und die Darstellung dadurch auf möglichst ähnliche können durch STYLE-Attributelemente ergänzt werden. Weise erfolgt. Dabei sollte jedoch darauf geachtet werden, dass die » Es sollten immer auch vergleichbare generische Schriftarten Darstellung auch ohne diese zusätzlichen Definitionen angegeben werden, da nicht alle Schriften auf jedem System angemessen ist. So könnte beispielsweise das FONT- vorhanden sind. Um also eine kontrollierte Darstellung auf Attribut size="1" mit dem STYLE-Attribut style= allen Systemumgebungen zu gewährleisten, sollte beispiels- "font-size:9px" ergänzt werden, wenn die STYLE- weise Arial stets um Sans Serif ergänzt werden, Times New Definition näher an die tatsächlich gewünschte Schriftgröße Roman um Serif und Courier New um Monospace (weitere herankommt. Sofern das STYLE-Attribut nicht interpretiert generische Schriftfamilien: Cursive, Fantasy). wird, wird automatisch auf das Font-Attribut size zurückge- griffen. Beispiel: Hierbei sollte folgende Anmerkung berücksichtigt werden: <u><font face="Arial,sans-serif" size="1" FONT-Tags stellen eine Ausnahme bezüglich des STYLE color="#FF0000" style="font-size:9px;"></font></u> optivo GmbH Tel.: +49(0)30-41 72 42 30 info@optivo.de www.optivo.de 3 White Paper Hinweise zur Newslettergestaltung Grafiken richtig platzieren Bei der grafischen Gestaltung sind einige Punkte unerlässlich: » Es sollte immer ein ALT-Text angeben werden. Solange » Als Grafikformate empfehlen wir die Verwendung von GIF Grafiken nicht dargestellt werden (beispielsweise aufgrund oder JPEG. Andere Formate wie PNG werden von einigen von Ladezeiten bei langsamen Internetverbindungen oder E-Mail-Clients nur unzureichend unterstützt. aufgrund von Sicherheitssperren), wird ersatzweise der im » Animierte GIFs können verwendet werden, allerdings sollten ALT-Attribut angegebene Text angezeigt. Dieser Text sollte gewisse Einschränkungen berücksichtigt werden. Microsoft deshalb einen Hinweis auf die Funktion oder Art der Outlook 2007 zeigt etwa immer nur das erste Frame eines platzierten Grafik geben bzw. einen in der Grafik vorkom- animierten GIF-Bildes. Entsprechend sollte darauf geachtet menden Text wiedergeben. Die Angabe eines leeren Texts werden, dass in den nachfolgenden Frames keine wesent- (alt=" ist auch möglich und sollte dem Weglassen des ") lichen Informationen platziert sind, die eventuell verloren ALT-Attributs vorgezogen werden. gehen. » Verlinkte Bilder sollten das Attribut border="0" enthalten. » Grafiken sind immer mit den Attributen width und height Viele Clients erzeugen andernfalls automatisch einen blauen zu versehen. Viele E-Mail-Clients zeigen die Grafiken des Rahmen um die verlinkten Bilder. Newsletters nicht sofort an, sondern erst dann, wenn diese » Bilder sollten nicht durch das ALIGN-Attribut ausgerichtet explizit aktiviert werden. Solange die Grafiken nicht vom werden, sondern besser durch eine umgebende Tabelle. Server geladen wurden, ist die Größe des Bildes nicht be- Bilder innerhalb eines A-Tags, welche mit Hilfe eines ALIGN- kannt.