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

Transkript

1 1 Version: Nov 07, 2007 White Paper HTML- und Text-Newsletter, Schriftarten, Grafiken sowie gestalterische und interaktive Elemente

2 -HTML folgt eigenen Regeln Marketingabteilungen und Agenturen sehen sich regelmäßig vor der Herausforderung, die zu versendenden Newsletter für viele unterschiedliche -Clients und Webmailer designkonform 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 Newslettergestaltung ist, dass beim HTML-Code deutliche Unterschiede zu der Erstellung für Webbrowser bestehen. Deshalb sind für die Erstellung von "richtigem" -HTML neueste Webeditoren und Gestaltungsprogramme nur sehr begrenzt brauchbar. Die HTML-Programmierung für -Clients und Webmailer folgt eigenen Regeln. Da die Newsletterdarstellung von Programm zu Programm variiert, leiden auch die -Zustellraten unter Inkonsistenzen in diesem Bereich. Dieses White Paper informiert über die wichtigsten Regeln bei der Newlettererstellung. Die Hinweise basieren auf den langjährigen Erfahrungen des optivo Entwicklerteams bei der Erstellung von -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 Newsletterversand empfehlen wir das Multipart-Format. Multipart ist das weltweit am häufigsten genutzte Format im Bereich werblicher s. 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 -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. Besonderheiten bei der Text-Version Bei der Erstellung der Textversion gilt es zu berücksichtigen:» Die Textversion sollte möglichst die gleichen Informationen wie die HTML-Version enthalten. Bei leistungsfähigen - Systemen wird aus der HTML-Version meist automatisiert die Textversion erstellt.» Die Laufweite (also Zeilenlänge) sollte 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. Newsletter abbestellen: Die Formatierung von URLs (farbliche Hervorhebung, Unterstreichung, Klick-Sensitivität etc.) ist vom eingesetzten -Client abhängig und kann vom Versender nicht beeinflusst werden. optivo GmbH Tel.: +49(0) info@optivo.de 2

3 Besonderheiten bei der HTML-Version Viele -Clients verwenden so genannte Rendering Engines, welche oft nicht den neuesten (X)HTML-Spezifikationen entsprechen. Dadurch lassen sich viele Newsletterelemente 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 etc.).» 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"). Schriftarten effektiv einsetzen Bei den Schriftarten sollte der Versender einige Grundsätze berücksichtigen:» 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 -Clients 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). <u><font face="arial,sans-serif" size="1" color="#ff0000" style="font-size:9px;"></font></u> optivo GmbH Tel.: +49(0) info@optivo.de 3

4 Grafiken richtig platzieren Bei der grafischen Gestaltung sind einige Punkte unerlässlich:» Als Grafikformate empfehlen wir die Verwendung von GIF oder JPEG. Andere Formate wie PNG werden von einigen -Clients 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 -Clients 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. 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.» 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. Auf interaktive Elemente verlinken Im Bereich interaktiver und dynamischer Inhalte sollte berücksichtigt werden:» 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 -Client 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 -Clients und Anti-Spam-Filtern als Spam- Attacke oder Phishing-Angriff interpretiert bzw. einfach nicht ausgeführt. optivo GmbH Tel.: +49(0) info@optivo.de 4

5 Layout klar definieren Im gestalterischen Bereich sollte besonders beachtet werden:» Um ein Layout darzustellen, sollten ausschließlich Tabellen verwendet werden. Da einige -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 -Clients nicht korrekt umgesetzt wird.» Sofern die Breite oder Höhe 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 Whitespaces auf den Beginn des Zellen-Bodys folgen und auch ohne Whitespace enden. <td><img src="abc.jpg" width="100" height="100"/></td> Beispielsweise entstehen beim Internet Explorer bei integrierten Whitespaces störende Abstände.» In vielen Webmailern und Vorschauansichten steht der 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: <table cellpadding="0" cellspacing="0" border="0" width="100" height="100"> <!-- obere horizontale Linie --> <td colspan="3" height="1" width="100" bgcolor="#000000"></td> <!-- linke vertikale Linie --> <td height="98" width="1" bgcolor="#000000"></td> <td height="98" width="98"> Text in the box! </td> <!-- rechte vertikale Linie --> <td height="98" width="1" bgcolor="#000000"></td> <!-- untere horizontale Linie --> <td colspan="3" height="1" width="100" bgcolor="#000000"></td> </table> Links farblich auszeichnen Folgender Hinweis sollte bei Links berücksichtigt werden:» 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 -Clients 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=" style="color: #FF0000;"><font size="0" color="#ff0000">google- Suche</font></a> Kontakt: Für Fragen und weitere Informationen stehen wir gerne zur Verfügung. Wenden Sie sich bitte per an die info@optivo.de oder telefonisch an die +49(0) optivo GmbH Tel.: +49(0) info@optivo.de 5