Letzte Woche haben wir ein umfassendes Newsletter-Template umgesetzt. Dabei kamen auch die jeweiligen Spezialitäten der Mailclients an’s Tageslicht.

 

Auch in der heutigen Zeit fahren etliche Hersteller immer noch eigene Wege in der Interpretation von HTML Newslettern, insbesondere macht hier auch Outlook keine Ausnahme. Microsoft hat entschieden, in Outlook die HTML-Engine von Word zu verwenden, was unter anderem auch die Verwendung von Tabellen nötig macht.

 

Eines der Spezialthemen sind Hintergrundbilder im HTML Newsletter. Können diese für einige Mailclients noch per CSS implementiert werden, so muss für Outlook ein sehr spezieller Weg gegangen werden.

 

Der entsprechende HTML-Teil kann z.B. so aussehen:

<table>
 <tr>
  <td style="background-image: url(background.png);">
   <h1>Titel</h1>
   <p>Einiges an Text.</p>
  </td>
 </tr>
</table>

 

Möchte man nun die Funktionalität für Outlook umsetzen, so kommen ein paar Codezeilen dazu:

<table>
 <tr>
  <td style="background-image: url(background.png);">
   <!--[if gte mso 9]>
    <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:402px; width:600px;top:0;left:0;border:0;z-index:1;' src="background.png"/>
    <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:402px; width:600px;top:-5;left:-10;border:0;z-index:2;'>
    <div>
   <![endif]-->
   <h1>Titel</h1>
   <p>Einiges an Text.</p>
   <!--[if gte mso 9]>
    </div>
    </v:shape>
   <![endif]-->
  </td>
 </tr>
</table>

So hat man nun auch die Hintergrundfunktion für Outlook.

Achtung: Nicht vergessen, die Grösse des Hintergrundbildes im v:image und v:shape anzugeben.

 

Unter fixoutlook.org kann man eine Ansage gegen Microsoft via Twitter machen…