Interaktive E-Mail - geht das heute schon?
Da gibt es doch EMail-Marketing-Verantwortliche, die geben sich nicht mit schön gestalteten Mails zufrieden, die wollen mehr. Die träumen nicht nur von animierten Grafiken oder Videos in E-Mails. Die träumen von interaktiven Mails, von kleinen Spielen, Bildergalerien, Tabs oder sogar von Warenkörben mit Bestellfunktion direkt in der E-Mail.
Und, noch toller: Sie träumen nicht nur davon, sie haben das tatsächlich schon realisiert.
Während wir Normalsterbliche immer noch damit kämpfen, dass unsere schön gestalteten Mails in allen Clients einigermaßen ordentlich angezeigt werden. Noch immer bekommen wir immer wieder einmal Newsletter von Kollegen, die bei uns nicht korrekt dargestellt werden - oder es passiert uns sogar selbst, dass wir Formatierungsfehler in einer Aussendung haben, weil wir eine Besonderheit eines der vielen E-Mail-Clients nicht berücksichtigt haben.
Interaktivität ohne JavaScript
Alles nicht so beeindruckend, wenn man JavaScript nutzen würde. Mailclients unterstützen das nur teilweise und auch aus Sicherheitsgründen scheidet diese Möglichkeit aus.Ich habe ganz schön gestaunt, als ich gesehen habe, dass das auch nur mit HTML und CSS möglich ist. Ein Warenkorb, nur mit HTML und CSS umgesetzt. Ein einfaches Game, nur mit HTML und CSS umgesetzt.
Wenn man den Trick einmal kennt, dann fragt man sich allerdings. warum da andere nicht längst schon drauf gekommen ist. Das alles ist keine Zauberei, sondern eigentlich ganz einfach. Doch fangen wir von vorn an.
Prinzip Punched Card Coding
Der amerikanische Designer Mark Robbins sagt, er habe diese Technik erfunden, weil ihm zufällig die Ähnlichkeit von Radiobuttons zu Lochkarten (punched cards) aufgefallen sei.Lochkarten haben sozusagen als ganz einfache Schalter funktioniert, sie haben so viele Werte gespeichert, wie sie Positionen für Löcher hatten. Und nach dem gleichen Prinzip funktioniert eine Gruppen von Radiobuttons - sie können auch so viele Werte übermitteln, wie Buttons in der Gruppe sind. (Mit dem Unterschied, dass immer nur ein Button gedrückt sein kann.)
Der Trick, um mit Radiobuttons z.B. eine Bildergalerie bzw. Diashow zu zeigen ist, der: Ich nutze Radiobuttons (von denen ja in einer Gruppe immer nur einer gleichzeitig aktiv sein kann) und verknüpfe jeden einzelnen mit einem Bild. Der aktive Button ist der, der zum gerade angezeigten Bild gehört. Die anderen Buttons und Bilder werden einfach per CSS auf unsichtbar geschaltet.
Wo funktioniert es?
Leider gibt es einige Wermutstropfen: Natürlich funktioniert die Technik nur bei einigen wenigen Mailclients - das wäre sonst ja auch zu schön gewesen. Es gibt zwar für alle eine Fallback-Lösung, die ordentlich aussieht, dann sieht ein Empfänger mit nicht-kompatiblen Client eben nur das erste Bild.Man muss sich dabei dann natürlich gut überlegen, wie man die interaktiven Funktionen beschreibt bzw. zu deren Nutzung auffordert - wenn der Empfänger klickt, und nichts passiert, macht das sicher keinen guten Eindruck. Die Beschreibung der Interaktivität gehört also in ein eigenes Element, dass bei inkompatiblen Clients versteckt wird.
Die Interaktivität sollen folgende Clients unterstützen:
- Apple Mail
- iOS Mail
- Android
- Mailbox
