Praxistipp: Mehr Klicks mit Buttons

Wie Sie einen Hingucker gestalten …

Buttons können ein toller Hingucker sein und zum Klicken einladen. Schade nur, dass viele E-Mail Clients, wie Outlook und Thunderbird standardmäßig Bilder unterdrücken. Statt einer ansprechenden Klickaufforderung steht dann da ein rotes x und „Mit der rechten Maustaste hier klicken, um Bilder downzuloaden.“ Wenn das Bild groß genug ist, hat man Glück und der Alternativtext des Bildes wird anschließend noch angefügt.

Der „Mehr >>“-Button des absolit-Newsletters ist klein und bei nicht angezeigten Bildern steht einfach gar nichts da.

Dr. Torsten Schwarz wurde – wie so häufig – im Blog von Rene Kulka fündig. Detailgenau steht hier beschrieben, wie man Outlook 2007, 2010 und 2013 „austricksen“ kann, um einen E-Mail Button zu gestalten, der auch gut aussieht, wenn die Bilder nicht geladen sind (www.optivo.de/campfire/klickstarke-e-mail-buttons-gestalten-die-zweite/).

Hintergrund: Die drei genannten Outlook-Versionen stellen keine Hintergrundbilder dar und interpretieren auch nur sehr begrenzt CSS Style Angaben.

Vorgehen: Mit dem beschriebenen Programmierkniff kann man bei den obigen Outlook-Versionen ein Hintergrundbild darstellen lassen. In einer verschachtelten Tabellenstruktur haben wir also den unbeschrifteten Button als Hintergrundbild in eine Zeile eingefügt, die wir graublau eingefärbt haben. Die Beschriftung „Mehr >>“ wurde dann in HTML als ganz normaler Text geschrieben.

Ergebnis: Wenn die Bilder nicht heruntergeladen sind, steht das „Mehr“ nun schön auffällig in der grauen Tabellenzelle. Sind die Bilder geladen, wird der Button mit schimmerndem Hintergrundbild dargestellt. Das funktioniert mit allen E-Mail Clients und Smartphone-Apps, lediglich die alten Lotus Notes Versionen stellen den Button nicht wie gewünscht dar.

Am Rande bemerkt: Wie so oft steckt der Teufel im Detail. Trotz aller Recherche und vieler Testversendungen wurde der Button in Outlook 2007/2010/2013 einfach nicht mit Bild dargestellt. Der Clou: Die für die Testversendungen genutzte Mailingsoftware scheint beim Versand das Coding zu verändern. Mit einer anderen Mailingsoftware versendet, kommt der Newsletter wie gewünscht an.
Was sich im Nachhinein schnell und einfach anhört, war in Wahrheit also ganz schön „frickelig“. Danke noch einmal an Rene Kulka für Rat und Tat „in persona“.

Hier noch einmal die Ansicht des Newsletters ohne geladene Bilder. In dieser bildlosen Umgebung ein richtiger Hingucker, oder?