Naja, nun hat Microsoft beschlossen mit Outlook 2007 und wohl auch noch mit Outlook 2010 statt dem Internet Explorer nur noch Word zum Anzeigen von HTML-eMails zu nutzen. Die Begründung: “Unser Kunden sollen all die vielen tollen Features von Word auch in eMails nutzen können.”

Naja, dass fortan alle Nicht-Kunden (also Nutzer von Webmail-Clients oder nicht Outlook 2007/2010 Clients) diese tollen Mails nicht mehr korrekt sehen. Nicht zu vergessen die Leute (wie ich) die sich alle Mails standardmäßig in Text umwandeln lassen.

Auf der anderen Seite sind die 40% Outlook-Nutzer nun leider nicht mehr in der Lage korrektes HTML anzuzeigen. Und jetzt stehen wir armen Webworker da und müssen unseren Kunden erklären warum wahrscheinlich 40% der Empfänger (die Zahl gilt hauptsächlich für die USA, in Deutschland ist der Outlook-Anteil etwas geringer) den schön gestalteten HTML-Newsletter nicht richtig sehen können.

Es gibt natürlich eine Alternative: Man könnte beim Layout darauf achten, dass kein CSS, sondern nur Tabellen zur Positionierung und FONT-Tags zur Schriftgestaltung verwendet werden. Der Aufwand steigt grob geschätzt auf das 3-fache an. Es sei denn man nutzt fertige Layout-Templates.

Die Leute von Campaign Monitor (eine Firma die sich auf eMail-Marketing spezialisiert hat) haben mehr als 30 verschiedene frei verwendbare Layouts zusammengestellt und getestet. Zu finden ist die Liste hier: 30+ Free HTML email templates – Tried & Tested – Tips & Resources – Campaign Monitor.

<!– .textbg, .texttop {font-family:”Times New Roman”, Times, serif; font-size:70px;}
.textbg {color:red;}
.texttop {
color:#333333;
position:absolute; top:0; left:0;}
#topleft {position:absolute; top:-1px; left:-1px;}
#top {position:absolute; top:-1px; left:0px;}
#topright {position:absolute; top:-1px; left:1px;}
#bottomleft {position:absolute; top:1px; left:-1px;}
#bottom {position:absolute; top:1px; left:0px;}
#bottomright {position:absolute; top:1px; left:1px;}
#left {position:absolute; top:0px; left:-1px;}
#right {position:absolute; top:0px; left:1px;}
–>
<div class=”textholder”><span id=”topleft” class=”textbg”>Text Outlines</span>
<span id=”top” class=”textbg”>Text Outlines</span>
<span id=”topright” class=”textbg”>Text Outlines</span>
<span id=”bottomleft” class=”textbg”>Text Outlines</span>
<span id=”bottom” class=”textbg”>Text Outlines</span>
<span id=”bottomright” class=”textbg”>Text Outlines</span>
<span id=”left” class=”textbg”>Text Outlines</span>
<span id=”right” class=”textbg”>Text Outlines</span>
<span class=”texttop”>Text Outlines</span></div>

Gefunden bei Mike Wandling (Dort gibts auch ausführlichere Erläuterungen und ein Beispiel).