Buttons, die immer dargestellt werden

Yvonne Perdelwitz von der E-Mail & Online Marketing Agentur postina.net über den gescheiterten Versuch Outlook 2007-2013 zu überlisten, Hintergrundbilder GUT darzustellen.

Die Idee ist klasse
Gerne probieren wir im Newsletter von Torsten Schwarz Neues aus. Diesmal testeten wir einen Programmierkniff, mit dem Outlook Hintergrundbilder darstellen sollte. Wir wollten, dass unsere „mehr-Buttons“ auch sichtbar sind, wenn die im Mailing enthaltenen Bilder nicht heruntergeladen sind. Die Klickaufforderung sollte also immer präsent sein und nicht nur als „x“ erscheinen.

Wie man eine immer präsente Klickaufforderung gestaltet
ButtonsTechnisch wird das gelöst, indem auf eine farbige Tabellenzelle der beschriftete Button gelegt wird. Darüber wird dann der Text in HTML geschrieben. Sind die Bilder nicht geladen, erscheint der Text schön auffällig auf der farbigen Tabellenzelle, sind sie geladen, ist die Schrift schick auf dem Button zu sehen. Gäbe es die technisch auf Word basierenden E-Mail Clients Outlook 2007 – 2013 nicht, wäre das alles auch kein Problem. Die obigen Outlook-Versionen stellen jedoch keine Hintergrundbilder dar. Aber es gibt eine Umgehungsprogrammierung, die anfänglich gut zu funktionieren schien, worüber wir schon berichteten (www.absolit-blog.de/gestaltung/praxistipp-mehr-klicks-mit-buttons.html).

Wie man an dieser Klickaufforderung scheitern kann
So einfach, wie es sich anhört, war es in der Praxis leider nicht. Die Positionierung der Schrift auf dem kleinen Button war ein heilloses „Gefummel“. Die Schrift für die übrigen Clients konnte recht gut positioniert werden. Schließlich hatten wir auch die Schrift für die Outlook Clients so positioniert, dass Sie in Outlook 2013 gut aussah. Allerdings tauchte von der Schrift, die in Outlook 2013 super „saß“, auf den Buttons in Outlook 2007 und 2010 nur der obere Teil des „M“s und „h“s als drei kleine Punkte auf (siehe nebenstehend). Gar nicht so schlecht sah es aus, wenn man sehr semiprofessionell einfach noch einmal „Mehr“ hineinschrieb und den Button etwas vergrößerte. Allerdings störte dann in Outlook 2007 und 2010 der obere Teil des für 2013 benötigten „M“s immer noch als Punkt vor dem „Mehr“ die perfekte Darstellung.

Ein weiteres (sehr technisches) Problem zeigte sich beim Versand mit ISO-Kodierung. Beim Juni-Newsletter wurden wir gebeten, dass Mailling in ISO Codierung zu versenden, da sonst Umlaute in der Kundenpersonalisierung falsch dargestellt würden. Schrieben wir aber charset=ISO-8859-1 in den Header unseres Mailingquellcodes statt charset=utf-8 wurde der Programmierkniff nicht interpretiert und die Outlookversionen 2007-2013 zeigten auch bei geladenen Bildern die Buttons nicht an. Man sah nur den Text auf der farbigen Tabellenzelle. Deswegen haben wir die Buttons im Juni schlussendlich als normale Bilder ohne farbige Hintergrundzellen eingebunden.

Zwischenzeitlich haben wir ein bisschen recherchiert: Theoretisch sollte auch ISO den Quellcode interpretieren können. Doch das ist ein sehr komplexes Thema und wie uns verschiedene Programmierer versicherten „ein Fass ohne Boden“. Heute konnten wir diese zweite Problematik auf eine sehr praktische Art und Weise doch noch lösen. Der Agnitas Support schaltete uns die Berechtigung frei, auch in utf8-Kodierung zu versenden. Das heißt die Mailingsoftware stellt uns die Adressdaten als utf8 zur Verfügung und somit können wir utf8 Mailings versenden. Die Buttons würden also in Outlook 2007-2013 bei geladenen Bildern wieder dargestellt werden.

Die Moral von der Geschichte
Die Idee ist wirklich gut. Aber man benötigt größere Buttons, die kleine Ungenauigkeiten in der Positionierung der Schrift erlauben. Nach sehr zeitintensiven Recherchen, Programmierungen und Testings haben wir uns entschlossen, die Buttons wieder als ganz normale Bilder darzustellen. Sie sehen also (überall) gut aus, wenn die Bilder geladen sind und werden nicht dargestellt, wenn die Bilder nicht geladen sind.

Hat Ihnen der Beitrag gefallen? Dann teilen Sie ihn doch mit anderen:
Der RSS-Feed für Kommentare zu diesem Artikel. Die TrackBack URI dieses Artikel.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Hat Ihnen der Beitrag gefallen? Dann teilen Sie ihn doch mit anderen: