Klickstarke Buttons im E‑Mail-Design: Workaround für Outlook

Die Gestaltung von Call-to-Action Elementen im E‑Mail Marketing kann recht müh­sam sein: Auf der einen Seite emp­fiehlt es sich, einen Button als Grafik- / HTML-Kombination (far­bige Tabellenzelle mit Hintergrundgrafik) umzu­set­zen, damit der Button auch bei unter­drück­ten Grafiken als sol­cher wahr­ge­nom­men wird.

Auf der ande­ren Seite unter­stützt Outlook keine Hintergrundgrafiken. Im Ergebnis würde in Outlook auch bei akti­vier­ten Grafiken ledig­lich die far­bige Tabellenzelle ohne Grafik dargestellt:

Call to Action Button im E-Mail-Design
Darstellung in Outlook: Keine Hintergrundgrafik trotz akti­vier­ter Grafiken

Wie so oft im E‑Mail Design gibt es aber zum Glück auch hier einen Workaround. Ein paar Zeilen VML-Code füh­ren dazu, dass der Button auch in Outlook mit Hintergrundgrafik (in die­sem Fall der Farbverlauf) dar­ge­stellt wird:

Email Button / Call to Action gestalten
Funktioniert auch in Outlook: Der Button mit Hintergrundgrafik

Der Workaround nutzt den nach­fol­gen­den Code, um Outlook zu “über­lis­ten”:

[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/>
<cen­ter>
<![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>

[/box]

Der Beispielcode stammt von Campaign Monitor, die freund­li­cher­weise ein kos­ten­lo­ses Tool bereit­stel­len, um sol­che “Bulletproof Email Buttons” mit weni­gen Klicks zu erstel­len. Aus dem glei­chen Hause gibt es ein eben­falls kos­ten­lo­ses Tool, mit dem “Bulletproof back­ground images” für die Gestaltung von E‑Mails umge­setzt wer­den können.

Total
0
Shares
Ähnliche Beiträge

KOSTENLOSER NEWSLETTER

Mehr Tipps für profitable Kundenbeziehungen

Jetzt den kostenlosen Newsletter anfordern und 1x pro Monat neue Empfehlung für Dein CRM erhalten.

Total
0
Share