Outlook 2010 E-Mail-Design-Checkliste [update]

Bereits einige Zeit bevor Microsoft seine öffentliche Outlook 2010-Beta mitte November 2009 zum Download bereitstellte, formierte sich innerhalb der Online-Marketing-Gemeinde breiter Widerstand. Der Grund: Microsoft teilte frühzeitig mit, an Word zum Rendern der E-Mails festzuhalten.

Dass im Outlook-Blog-Post "The Power of Word in Outlook" (lol!) die Kommentar-Funktion bereits nach wenigen Tagen abgestellt werden musste, da Microsoft nur Hohn und Spott als Reaktion erntete, spricht für sich. Hätte, Wenn und Aber: Auch Outlook 2010 wird - wie Outlook 2007 - leider eine Textverarbeitung zur Darstellung der E-Mails nutzen, und nicht den Browser Internet Explorer, wie die vorangegangenen Outlook-Versionen.

 

Schlecht: Restriktive E-Mail-Darstellung in vielen Posteingängen

Der erneute Rückgriff auf "Word" bedeutet, dass die teils sehr eingeschränkten Newsletter-Gestaltungsmöglichkeiten auch in Outlook 2010 fortbestehen werden - natürlich nur, falls Outlook 07/10 bei der Gestaltung der kleinste gemeinsame Nenner sein soll. Denn werden beide innerhalb des E-Mail-Adressatenkreises kaum genutzt, kann eventuell von einer Berücksichtigung abgesehen werden.

Die Marktanteile von Outlook 2007 werden erfahrungsgemäß häufig überschätzt. Dennoch sind diese in der Regel zu hoch, um die Eigenheiten bei der Gestaltung unter den Tisch kehren zu können. Outlook 2007 genießt Fingerprintapp zufolge 10%. Und auch Outlook 2010 wird durch die öffentliche Beta bereits in messbarem Ausmaß genutzt; ab Juni beginnt der offizielle Verkauf. Genaueres über die Verbreitung lässt sich nur bei einer individuellen Verteiler-Analyse sagen (Techniktipp: Outlook 2007 identifiziert sich bei einem Hit über "Office 12" im User-Agent, Outlook 2010 über "Office 14").

 

Gut: Outlook 2007- und Outlook 2010-Darstellung gleich

Ein Gutes hat die Sache: Wer seine Newsletter bereits Outlook-2007-kompatibel gestaltet hat, ist auch für Outlook 2010 gerüstet. Die E-Mail-Darstellung unterscheidet sich Tests zufolge - abgesehen von einer um ca. 100px kleineren E-Mail-Vollansicht bei Outlook 2010 - nicht. Einige Anbieter, die sich auf Vorab-Tests von E-Mails spezialisiert haben, wie Litmusapp oder PreviewMyEmail bieten der Vollständigkeit halber seit geraumer Zeit auch Darstellungsüberprüfungen für Outlook 2010 an. Litmusapp hat kürzlich einen Acid-Darstellungs-Test auf Basis der Email Standard Project-Vorlage in verschiedenen Outlook-Versionen durchgeführt - Ergebnis: Outlook 2010 = Outlook 2007...

 

Abb.: Praktisch kein Unterschied zwischen Outlook 2007 und 2010 (Quelle: litmusapp.com)
Abb.: Praktisch kein Unterschied zwischen Outlook 2007 und 2010 (Quelle: Acid-Test von litmusapp.com)

 

Checklist: Die wichtigsten Outlook 07/10-Design-Vorschriften

Für diejenigen, die jetzt ihre Newsletter noch einmal auf Outlook 07/10-Verträglichkeit überprüfen möchten: Eine detaillierte Auflistung der Rendering-Fähigkeiten von Outlook 2007 liefert Microsoft hier und hier. Zudem wird ein Code-Validierungstool zur Verfügung gestellt. Die essenziellen Dinge im Überblick:
  • Hintergrundgrafiken Outlook 07/10 unterstützen keine Hintergrundgrafiken, die mittels CSS background-image:url(...) oder HTML <td background=...> eingebunden wurden. Einzige Ausnahme: Im <body> werden Hintergrundbilder dargestellt. Daher sollten etwa keine Schlüsselinformationen ausschließlich in Hintergrundbildern hinterlegt und Hintergrundfarben als Fallback spezifiziert werden. Generell empfehlenswert ist ggf. die Angabe einer Hintergrundfarbe. Diese sollte für jede Tabellenzelle <td...> mittels HTML und CSS angegeben werden, da z. B. die Farben innerhalb verschachtelter <div->- und <table>-Elemente nicht vererbt werden. Update 5.7.10: Brian Thies weist auf einen Workaround/Hack mittels Vector Markup Language (VML) hin, durch den scheinbar doch auch in Outlook 2007/2010 Hintergrundgrafiken genutzt werden können.
  • Animierte GIFs Von bewegten GIF-Grafiken stellen Outlook 07/10 nur das erste Bild ("Frame") statisch dar. Daher ist darauf zu achten, dass dieses Bild alle notwendigen Informationen enthält, um den Gesamteindruck der E-Mail nicht zu stören und die Botschaft der E-Mail zu unterstützen. Bei Video-E-Mails auf Basis eines animierten GIFs (vgl. Anleitung "Video-E-Mail erstellen" im vorangegangenen Artikel bzw. Beispiel hier) sollte das erste Bild einen Fake-Player mit vorgetäuschten Bedienelementen eines Videoplayers enthalten.
  • Formulare Formulare werden seitens Outlook 07/10 nicht unterstützt. Alle <form>-Elemente, wie z. B. <input>, werden entfernt. Daher sollten Formulare indirekt über einen Verweis auf die Website "eingebunden" werden.
  • CSS: float, position, padding, margin, ... Der CSS-Support von Outlook 07/10 ist mangelhaft. Position und Float werden nicht unterstützt. Hier sollten Gestalter auf Tabellen-Layouts zurückgreifen - möglichst ohne Rowspan/Colspan. Denn Colspan/Rowspan funktionieren nur unzuverlässig und erzeugen erfahrungsgemäß oft Brüche im Layout. Gleiches gilt für die Nutzung von padding/margin und auch border zwischen Spalten & Zeilen, die ebenfalls für ungewollte Verschiebungen verantwortlich sein können. Da die Fehlersuche im Nachhinein oft sehr zeitaufwändig ist, bietet es sich stattdessen an, Abstände von Beginn an jeweils über eine verschachtelte Tabelle, bei der die innere Tabelle kleiner und zentriert ist, zu erzeugen. Die Minimum-Höhe für Tabellen-Zellen beträgt bei outlook 07/10 2 Pixel.
  • HTML: <DIV>, <P>, ... <div> und <p> bieten in Outlook 07/10 nur begrenzte Formatierungsmöglichkeiten und rendern zudem mitunter inkonsistent. Stattdessen sollten z. B. <table>, <span> und <br> genutzt werden. Dies gilt insbesondere für eine umschließende Formatierung des gesamten E-Mail-Inhalts - empfehlenswert ist hier statt einem div-Container eine Tabelle nach dem <body>-Tag mit einer festen Breitenangabe in Pixeln.
  • Bilder und alt-Texte Bei Bildern sollte stets deren native Breite und Höhe unter width= bzw. height= angegeben werden; künstlich gedehnte Bilder, wie häufig bei Trennlinien oder Verläufen, können fehlerhaft dargestellt werden. Zudem empfiehlt es sich, keine Bilder einzubinden, die höher als 1728 Pixel sind, wie z. B. bei diesem kreativen Werbemittel - denn den überschüssigen Teil schneiden Outlook 07/10 oben ab. Alt-Texte für nicht dargestellte Bilder sollten zwar an den passenden Stellen gesetzt werden, jedoch werden diese in Outlook 07/10 meist vom Datenschutzhinweis verdrängt und somit kaum wahrgenommen. Besser daher: Text wo möglich, Bilder (nur) wo nötig.
  • Aufzählungen Das Setzen benutzerdefinierter Aufzähungszeichen via list-style-image ignorieren Outlook 07/10. Es empfiehlt sich bei kurzen Aufzählungen, diese mit einer HTML-Entität wie • &bull; oder ? &radic; und <br />-Zeilenumbrüchen manuell einzubinden.
 

Extra-Tipp: Outlook 2010 "Easter-Egg"

Paul von Litmusapp weist im Weblog darauf hin, dass Outlook 2010 einen Link zur Online-Version eines Newsletters in der Outlook-Bedienoberfläche selbst anzeigen kann:
If there are problems with how this email is displayed, click here to view it in a web browser.
Abb.: Outlook 2010 Hinweis auf die Online-Version einer E-Mail (Quelle: litmusapp.com)
Abb.: Outlook 2010 Hinweis auf die Online-Version einer E-Mail (Quelle: litmusapp.com)
 
Beim Klick hierauf erscheint zunächst ein Sicherheitshinweis und sodann öffnet sich die E-Mail im Internet Explorer, in dem die korrekte E-Mail-Darstellung zumeist sichergestellt ist. Um diese bislang scheinbar undokumentierte Funktion zu aktivieren, muss die E-Mail die CSS-Formatierung span { padding:0px; } enthalten.