Outlook 2007/2010: Hintergrundbilder gehen scheinbar doch!

Interessanter Tipp von Brian Thies (Thies Publishing) im Forum der Kollegen von CampaignMonitor: Outlook 2007 und 2010 unterstützen (abgesehen vom <BODY>-Tag) ja angeblich keine Hintergrundbilder. Egal ob diese mittels CSS background-image oder HTML background= eingebunden werden, weigert sich die für die Übersetzung verantwortliche Word-Rendering-Engine, ein Hintergrundbild darzustellen.

Für das Layout und die Gestaltung eines Newsletters ist dies eine erhebliche Einschränkung... Brian wollte sich nicht damit zufriedengeben und versuchte, durch Nutzung der Vector Markup Language (VML) im hier beschriebenen Stil das Problem zu umgehen. Scheinbar mit Erfolg, denn Outlook 2007 und 2010 zeigen Tests zufolge die Hintergrundgrafik tatsächlich an!

How to: Hintergrundbilder in Outlook 2007 und 2010

Gemäß der Anleitung von Brian sind drei Schritte erforderlich, um eine Hintergrundgrafik per VML auch Outlook 07/10 nutzen zu können:

  1. <html> ersetzen durch <html xmlns:v="urn:schemas-microsoft-com:vml">
  2. Für den CSS-Bereich folgende Deklaration hinzufügen: <style type="text/css">v\:* { behavior: url(#default#VML); display:inline-block; } </style>
  3. Hintergrundgrafik etwa einer Tabellenzelle hinzufügen, wie <table><tr><td background="http://meine_bild_url.jpg" width="600" style="width:600px; height:100px;background-image:url();">: <!--[if gte vml 1]> <v:image style='width:600px;height:100px;position:absolute;top:0;left:0;border:0;z-index:-1;' src="" /> <![endif]-->

Fazit

Ich habe mir die Resultate in den gängigen E-Mail-Clients und Webmailern angeschaut und bis dato keine Probleme entdeckt. Der erste Anschein lässt also die Vermutung aufkommen, dass alle bestehenden Whitepapers zum Thema "Outlook-kompatible E-Mails" einer Überarbeitung bedürfen, da der Einsatz von Hintergrundbildern über den beschriebenen Hack wohl doch möglich ist.   Dennoch bedarf die Variante zunächst noch ausgiebiger Tests: Ist tatsächlich sichergestellt, dass das Rendering flächendeckend bei anderen E-Mail-Clients nicht negativ beeinflusst wird? Reagieren möglicherweise Spam-Filter - aus welchen Gründen auch immer - auf VML in E-Mails negativ? Wird der Quelltext unter Umständen zu stark aufgebläht...?   Ich bin auf die kommenden Diskussionen hierzu gespannt. Vorerst gilt: Testen! :-)  

 

Update I, 6.7.10:

Von Paul kam ein Hinweis auf einen weiteren Blog-Artikel vom 23.4., wo der Workaround bereits vorgestellt und in den Kommentaren diskutiert wurde. Zusammen mit Brians gestrigen Kompatibilitäts-Tests wäre der aktuelle Stand der Dinge somit, dass die Variante Hintergrundbild + Vordergrundtext tatsächlich zuverlässig auch in Outlook 2007/2010 funktioniert und die Darstellung in den allermeisten anderen Webmailern und E-Mail-Clients auch nicht negativ beeinflusst wird.   Eine Ausnahme ist Lotus 6.5/7, die beide auch hiermit nicht zur Anzeige einer Hintergrundgrafik zu bewegen sind. Hierfür kann ggf. eine Fallback-Hintergrundfarbe gesetzt werden, die einen guten Kontrast zum Vordergrundtext bildet. Damit die Farbe nicht das per VML eingebundene Bild überschreibt, schlägt Edvin vor, einen weiteren Tabellen-Container allein für die Farb-Definition unter denjenigen anzulegen, der das Hintergrundbild beinhaltet. Ein Beispiel für eine solche verschachtelte Struktur, die z. B. für E-Mail-gerechte Call-To-Action-Buttonsgenutzt werden kann:

  • <table><tr><td bgcolor="#ff0000" width="600" style="background-color:#ff0000;width:600px; height:100px;">
    • <table><tr><td background="" width="600" style="width:600px; height:100px;background-image:url('');"><!--[if gte vml 1]> <v:image style='width:600px;height:100px;position:absolute;top:0;left:0;border:0;z-index:-1;' src="" /> <![endif]-->

 

Update II 13.4.11:

  • Anstatt der Bedingung [if gte vml 1] sollte [if !IE & gte vml 1] verwendet werden, da ansonsten der Internet Explorer im Kompatibilitätsmodus die E-Mail-Darstellung beeinträchtigen kann.
  • Einschränkung der Variante ist naturgemäß, dass ein Hintergrundbild nicht rechts oder unten wiederholt werden kann ("Wallpaper").
  • Breite und Höhe der Bilder sollten passen; falls das Bild zu breit ist, wird es z. B. gestaucht.
  • Bei T-Online werden Hintergrundbilder, die auf diese Weise eingebunden werden, leider nicht dargestellt.

 


Sie wollen keinen Artikel mehr verpassen?
Abonnieren Sie den Episerver Newsletter und erhalten Sie einmal im Monat die besten Expertentipps rund um E-Mail-Marketing, Content Management und E-Commerce.


Jetzt zum Newsletter anmelden