Die Gestaltung von Call-to-Action Elementen im E‑Mail Marketing kann recht mühsam sein: Auf der einen Seite empfiehlt es sich, einen Button als Grafik- / HTML-Kombination (farbige Tabellenzelle mit Hintergrundgrafik) umzusetzen, damit der Button auch bei unterdrückten Grafiken als solcher wahrgenommen wird.
Auf der anderen Seite unterstützt Outlook keine Hintergrundgrafiken. Im Ergebnis würde in Outlook auch bei aktivierten Grafiken lediglich die farbige Tabellenzelle ohne Grafik dargestellt:
Wie so oft im E‑Mail Design gibt es aber zum Glück auch hier einen Workaround. Ein paar Zeilen VML-Code führen dazu, dass der Button auch in Outlook mit Hintergrundgrafik (in diesem Fall der Farbverlauf) dargestellt wird:
Der Workaround nutzt den nachfolgenden Code, um Outlook zu “überlisten”:
[box]<div><!–[if mso]>
<v:roundrect xmlns:v=“urn:schemas-microsoft-com:vml” xmlns:w=“urn:schemas-microsoft-com:office:word” href=“http://” style=“height:38px;v‑text-anchor:middle;width:200px;” arcsize=“0%” stroke=“f” fillcolor=“#99c739”>
<w:anchorlock/>
<center>
<![endif]–>
<a href=“http://”
style=“background-color:#99c739;border-radius:px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:38px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;”>Button ohne Hintergrundgrafik</a>
<!–[if mso]>
</center>
</v:roundrect>
<![endif]–></div>
Der Beispielcode stammt von Campaign Monitor, die freundlicherweise ein kostenloses Tool bereitstellen, um solche “Bulletproof Email Buttons” mit wenigen Klicks zu erstellen. Aus dem gleichen Hause gibt es ein ebenfalls kostenloses Tool, mit dem “Bulletproof background images” für die Gestaltung von E‑Mails umgesetzt werden können.
