So sehen deine Newsletter auch in Outlook heiß aus

Probleme bei der Darstellung von Newslettern und Mailings für Microsoft Outlook 2007, 2010 und 2013 sind der Klassiker – und passieren immer wieder. Verantwortlich hierfür ist die berüchtigte Word Rendering Engine.

Für Webdesigner sind Newsletter technisch eigentlich eine nicht so anspruchsvolle Arbeit. Doch Outlook 2007, 2010 und 2013 stellen Webdesigner vor einige Herausforderungen…

Vor Microsoft Outlook 2007 konnten mit einigen wenigen Einschränkungen Newsletter ohne Probleme entwickelt und dargestellt werden, da Outlook als Standard die Rendering-Engine vom Internet Explorer benutzt hatte. Ab Outlook 2007 hat sich Microsoft dazu entschieden, zum Lesen von E-Mails die Rendering-Engine von Word zu benutzen.

Microsoft entschied sich für die Umstellung, um dem Outlook-Benutzer mehr Sicherheit zu bieten. Somit wurde zum Beispiel der Support von Flash-Objekten eingestellt. Denn bei solchen Content-Objekten, konnte Microsoft nicht selbst überprüfen, ob der Inhalt Viren enthält. Der Inhalt wurde mit der vorherigen Rendering-Engine dann sozusagen blind ausgeführt.

Die Umstellung auf die Word Rendering Engine hatte auch zur Folge, dass der CSS-Support extrem eingeschränkt wurde. Eine Begründung liegt darin, dass viele Features einfach nichts mit dem Lesen von E-Mails zu tun haben. Warum Features wie float, margin und padding für Designer nicht verfügbar oder nur eingeschränkt benutzbar sind, weiß keiner so genau.

Wen betrifft diese Umstellung?

Hauptsächlich betrifft es Webentwickler und Designer, welche E-Mail-Newsletter coden und Spammer. Webentwickler müssen viele Features umschreiben oder auch Bugs beheben, welche die Rendering-Engine automatisch verursacht (zum Beispiel ungewollte Lücken und Abstände). Spammer dagegen haben durch das Einschränken oder gar Weglassen von Features weniger Spielraum. Sehbehinderte sind auch stark betroffen, da durch die Umstellung der HTML Accessibility Support stark einschränkt wurde. Der Otto Normalverbraucher ist gar nicht eingeschränkt, dieser kann nämlich weiterhin ungestört seine E-Mails abrufen und lesen.

Zusammenfassend kann ich sagen, dass aus der Sicht von Microsoft diese Umstellung durchaus berechtigt ist und plausibel erscheint, da diese dem Benutzer ein sicheres Umfeld bieten wollen. Designer jedoch hegen einen Groll gegenüber dieser Umstellung weil somit das Entwickeln von Newslettern und E-Mail Marketing Kampagnen, um Jahre zurückgeworfen wurde. Jedoch müssen wir uns, und auch ich, mit dieser Entscheidung abfinden, denn Outlook ist schlicht weg der meistgenutzte E-Mail-Client und somit führt an den Microsoft spezifischen Anpassungen kein Weg vorbei.

amit Webentwickler und Designer nicht verzweifeln gibt es Tipps und Tricks zum Umgehen und zum Bugs beheben um trotzdem die gewünschte Darstellung zu entwickeln. Die wesentlichen habe ich im folgenden versucht zu dokumentieren.

Generell sollten Newsletter im Tabellenlayout (mit festen Breiten) erstellt und Divs vermieden werden. Styles sollten inline beschrieben werden da CSS im Header-Bereich einfach gelöscht wird.

1. Margin funktioniert generell nicht oder nur sehr stark eingeschränkt. Deshalb sollten für gewünschte Abstände padding oder Tabellenzellen mit festen Höhenangaben benutzt werden.
2. Outlook ignoriert margin und padding an Bildern. Um dies zu umgehen, sollte mit hspace und/oder vspace gearbeitet werden:

<img scr="http://www.test.de/test.jpg" align=“left“ vspace=“10“ hspace=“10“ />

3. Automatische Zeilenumbrüche must du bei zu langen Wörtern manuell mit inline-Style einer Tabellenzelle anpassen:

<td style="word-break: break-all;">

5. Outlook fügt automatisch eine 1px border um Zellen. Mit diesem Code, kannst du dies umgehen:

<td style="border-collapse: collapse;">

6. Listen solltest du vermeiden, wenn Spacing wichtig ist. Stattdessen solltest du Tabellen mit ihren Zellen nutzen.
7. Für Tabellen (<table>) solltest du cellpadding und cellspacing verwenden, da margin und padding öfters an ihre Tabellenzellen vererbt werden.
8. Hintergrundbilder (background-images) unterstützt Outlook gar nicht. Diese müsstest du in einem komplizierten Prozess per VML (Vector Markup Language) hinzufügen. Du kannst auch das Online-Tool (http://backgrounds.cm/) benutzen. Mit diesem kannst du dir bequem den passenden HTML-Code generieren lassen.
9. Tabellen erzeugen automatisch eine ungewollte Lücke, wenn diese eine Höhe von ungefähr 1790 Pixel überschreitet. Outlook möchte damit eine Unterteilung erzwingen. Das umgehst du am besten, indem du mit mehreren Tabellen arbeitest.
10. Bilder mit einer zu großen Höhe werden von oben an abgeschnitten, wenn diese Größer als 1728 Pixel sind. Ist das Bild zum Beispiel 2000 Pixel groß, so werden von oben 272 Pixel abgeschnitten. Um dies zu umgehen, sollte das Bild aufgeteilt und mit Tabellenzellen im Code wieder zusammengesetzt werden.
11. Bilder mit anderen Dimensionen als das Originalbild werden falsch dargestellt, also wenn es zum Beispiel gestreckt wird. Bilder sollten im HTML-Code immer korrekte Dimensionsangaben besitzen, wenn die Bilder für das Layout wichtig sind. Am besten sollten die Bilder schon vorab bearbeitet worden sein.
12. Animierte GIFs werden seit Outlook 2007 nicht mehr unterstützt. Stattdessen wird bei diesen immer das erste Bild der Animationsreihe angezeigt.
13. Ungewollte Abstände in Outlook 2007 und 2010 werden mit inline-Styles verhindert. Dazu werden zwei Schritte benötigt.
    1. Tabellen (<table>) sollten als inline-Style border-collapse: collapse; besitzen
    2. border, cellpadding und cellspacing sollten auf 0 gesetzt sein.

<table border="0" cellpadding="0" cellspacing="0">

13. Per HTML zusammengefügte Bilder können in Outlook 2013 ungewollte Abstände (ungefähr 10 Pixel) verursachen, während in Outlook 2010 und 2007 diese korrekt dargestellt werden. Dieses Problem taucht aber nur auf wenn die Einzelteile 20 Pixel groß sind. Warum das so ist, weiß man nicht genau, aber anscheinend wird dieser Bug mit dem Line-height-Attribut gelöst. Sprich: die Tabellenzellen (<td>) sollten als line-height die gleiche Höhe wie die Höhe des Bildausschnitts besitzen.

Hinter Newslettern und Marketing-Kampagnen steckt häufig eine Menge Arbeit dahinter. Deswegen wäre es schade, wenn diese im Spamordner des Empfängers landen. Um das Risiko zu minimieren, solltest du den Newsletter kurz und präzise gestalten.

Du solltest auch keine ganzen Artikel als Newsletter versenden, sondern lediglich nur Ausschnitte, die auf den vollständigen Artikel auf deiner Website verlinken. Texte sollten gegenüber Bildern überwiegen und du solltest Großbuchstaben sowie bestimmte Worte wie „gratis“ vermeiden, da dies dazu führen kann, dass Outlook deinen Newsletter automatisch als Spam klassifiziert.

Quellen und weitere Infos:

http://www.emailonacid.com/blog/details/C13/tips_and_tricks_outlook_07-13
http://www.zdnet.de/41005793/microsoft-verteidigt-html-rendering-von-outlook/