Im World Wide Web finden sich bereits zahlreiche Berichte und praktische Tipps zum Thema “Erstellung eines HTML-Newsletters”. Da ich selbst das Vergnügen hatte, Newsletter zu erstellen, habe ich mich entschieden einen eigenen Beitrag (aus der praktischen Sicht) zu verfassen.
Als ich zum ersten Mal die Aufgabe bekommen habe, einen Newsletter zu erstellen, habe ich nicht ahnen können, dass man, um allen E-Mail-Clients gerecht zu werden, so viele Dinge beachten muss. Vor allem seit der neuen Outlook-Version 2007 hat sich in der Newsletter-Programmierung einiges getan. Oder besser gesagt – “zurück entwickelt”.
Kurze Erklärung: Outlook 2007 verwendet zum Interpretieren von HTML keine Internet-Explorer-Engine mehr sondern eine Word-2007-Engine. Und da die HTML-Anzeige von Word 2007 beispielsweise keine CSS-Positionierung unterstützt, werden zur Positionierung wieder veraltete Tabellenlayouts verwendet. Begründet wird diese Änderung durch z.B. mehr Sicherheit, einheitliche Darstellung, etc.
Outlook hat im B2B-Bereich einen Marktanteil von ungefähr 75% , daher hat bei der Erstellung eines HTML-Layouts eine Optimierung für Outlook höchste Priorität!
Im Folgenden finden Sie ein paar nützliche Tipps zur Erstellung eines Outlook-2007-konformen HTML-Newsletters versehen mit ein paar Beispielen und Kommentaren:
1. Formulare werden in Outlook 2007 nicht mehr unterstützt:
Das HTML-Element form wird hier nicht mehr unterstützt. Aber nicht nur Outlook 2007 unterstützt die integrierten Formulare nicht, sondern auch andere wichtige Webmail-Clients.
Tipp: Es empfiehlt sich eine Verlagerung auf die Landing-Page.
2. Im Allgemeinen gilt für Outlook 2007 –> Tabellen- und Inline-CSS-Verwendung!
| E-Mail-Client |
Technische Umsetzung |
| Yahoo! Mail |
CSS |
| Hotmail |
CSS |
| Gmail |
Tabellen und Inline-CSS |
| Outlook 2003 and Outlook Express |
CSS |
| Outlook 2007 |
Tabellen und Inline-CSS |
| Lotus Notes |
Tabellen und Inline-CSS |
| AOL 9 |
CSS |
| Thunderbird |
CSS |
| Mac Mail |
CSS |
| Entourage |
CSS |
| Eudora (Mac) |
Tabellen und kein CSS |
- keine Unterstützung für Hintergrundbilder (CSS) –> background-image, background-position oder background-repeat
CSS-Eigenschaften background-image zur Festlegung Hintergrundgrafiken, background-position und deren Positionierung und background-repeat um eine Wiederholung der Hintegrundgraphik in x- oder/und y-Achse hervorzurufen, werden von Outlook 2007 nicht unterstützt.
Tipp: Über das HTML-Attribut background ist es möglich, in Outlook 2007 eine Hintergrundgrafik für body zu realisieren. Hintergrundbilder für Tabelle table, Tabellenzeile tr oder Tabellenspalte td sind hier jedoch nicht möglich.
Zudem sollte für andere Grafiken ein Alternativtext über das Attribut alt angegeben werden. Dieser erscheint, falls die Anzeige von Grafiken im Browser oder als Standardeinstellung in Outlook 2007 deaktiviert ist.
Beispiel: <body background=”http://www.beispiel.de/hintergrund.gif”>></body>
<img src=”http://www.beispiel.de/banner.jpg” alt=”[Bild:Banner]“/>
- keine Unterstützung für Positionierung (CSS) –> position
CSS-Eigenschaft position legt die Art der Positionierung der Elemente fest. Durch position:static z.B. wird ein Element in der Reihenfolge angezeigt, wie es im Dokument definiert ist; position:absolute zeigt das Element dort an, wo es positioniert wurde und position:relative richtet das Element am vorhergehenden aus.
Outlook 2007 positioniert die Elemente in jedem Fall untereinander, d.h. Eigenschaft position wird nicht unterstützt.
Tipp: Für die Positionierung müssen alternativ ineinander verschachtelte Tabellenlayouts verwendet werden.
- keine Unterstützung für Anzeigeart (CSS) –> display
mit der CSS-Eigenschaft display kann bestimmt werden, wie ein Element angezeigt wird (display: block, inline etc.) und ob überhaupt (display:none).
Tipp: Für die Umsetzung der einzelnen Anzeigearten müssen hier Tabellenlayouts bzw. die entsprechenden HTML-Tags verwendet werden.
- keine Unterstützung für Textumfluss (CSS) –> float
die CSS-Eigenschaft float bestimmt für ein Element, ob nachfolgende Elemente dieses umfließen sollen. float:left bedeutet, dass das Element links steht und rechts umflossen wird, für float:right – umgekehrt. float:none steht für “kein Umfluss”.
Tipp: Hier könnte man zwar HTML-Attribute des img-Tags für die Realisierung eines Textumflusses verwenden (align, vspace, hspace), jedoch werden diese mittlerweile als veraltet gekennzeichnet. Daher bleibt als Alternative wieder mal der Umweg über ein Tabellenlayout.
Beispiel: <img src=“bs.jpg“ align=“left“ vspace=“15“ hspace=“15“ />
<p> Hier erscheint Ihr Beispiel Text, das das Bild rechts umfließt</p>
3. Animierte Grafiken/GIFs werden von Outlook 2007 nicht mehr unterstützt.
Angezeigt wird nur eine statische Version.
4. Genau so wie Adobe Flash und andere Plug-Ins.
An Stelle eines Flashs wird das typische rote X angezeigt.
Tipp: Hier besteht die Möglichkeit einen Screenshot aus der Flash-Animation zu machen und in die E-Mail einzubinden, und anschließend mit dem Flash-Film zu verlinken.
5. Außerdem werden weitere HTML-Elemente wie applet, bdo, button, iframe, input, isindex, menu, noframes, noscript, object, optgroup, option, param, q, script, select nicht unterstützt.
6. Weitere CSS-Eigenschaften, die nicht unterstützt werden, sind: border-spacing, bottom, clear, content, left, list-style-image, list-style-position, max-height, max-width, outline, table-layout, text-transform, text-shadow …
Eine gute Übersicht erhält man hier:
http://msdn.microsoft.com/de-de/library/aa338201(en-us).aspx#Word2007MailHTMLandCSS_Introduction
Außerdem sind folgende Links zu empfehlen:
http://www.sitepackage.de/service/tutorials/css-unterstuetzung-in-webmail-systemen.html
http://www.sitepackage.de/service/tutorials/css-unterstuetzung-in-webmail-systemen-2.html
Fazit: Durch die Einführung von Outlook 2007 ist der Programmierer gezwungen den HTML-E-Mails mit CSS den Rücken zu kehren und für die optimale Anzeige wieder Tabellenlayouts und Inline-CSS zu verwenden! Somit bewegt sich der CSS-Support in Outlook 2007 ungefähr auf dem Niveau des Internet Explorers 5, was mit mehr Schreibarbeit und somit weitaus längerem Code verbunden ist.
Loading ...
