Responsive E-Mail-Design
Knapp ein halbes Jahrzehnt nachdem das Thema Responsive Webdesign mit Ethan Marcotte´s Artikel eine neue Ära in der Webentwicklung einläutete, sind Responsive Websites heute Standard und schmiegen sich mit Leichtigkeit an jedes Device und jeden Bildschirm.
Totgesagte leben länger!
Seit am 3. August 1984, ein Jahr bevor der Film „Back to the Future“ das erste Mal eine Leinwand beleuchtete, die erste E-Mail in Deutschland empfangen wurde, haben viele dem Format einen baldigen Untergang prophezeit.
Heute, 2014, ein Jahr vor der Erforschung des Hoverboards, sieht die Wahrheit ganz anders aus. Die E-Mail ist nicht tot. Ganz im Gegenteil: Sie ist vital - vital wie noch nie. Zusammen mit dem Ausbruch der Smartphone-Verkaufszahlen erfährt die E-Mail eine Renaissance. Ihr wollt einen Beweis? Schaut Euch doch einfach ein paar dieser schön bunten und lehrreichen Statistiken an, die wir auf Pinterest zusammengestellt haben.
Let me introduce to you, Mr. HTML Email
Viel wichtiger als die Vitalität der E-Mail, ist jedoch die Entwicklung des Formats. Seit geraumer Zeit unterstützen E-Mail-Provider und E-Mail-Clients nämlich HTML-E-Mails und erlauben damit die Gestaltung der sonst tristen und rein textbasierten, elektronischen Post. Aufmerksame Leser fragen sich nun natürlich:
„Okay, okay, Ihr könnt HTML-E-Mails schreiben, könnt ihr diese E-Mails dann auch „responsive“ gestalten?“
Die Vision ist groß: E-Mails, die sich unabhängig von Gerät, E-Mail-Dienst und -Client perfekt darstellen lassen. Der Weg dorthin leider steinig.
What´s the big deal?
„Ihr seid Profis im Erstellen von Responsive Websites, sollte es nicht einfach sein dieses Wissen auf E-Mails zu übertragen?“
Und hier liegt die Krux der ganzen Geschichte. Im Gegensatz zu HTML-Websites werden HTML-E-Mails nicht direkt vom Browser dargestellt, sondern durchlaufen einen sogenannten Präprozessor. Diese Präprozessoren sind der erste „Bad Boy“ auf dem Weg zur perfekten Darstellung. Ihre Aufgabe ist es, bestimmte Codezeilen aus der E-Mail zu entfernen, sodass die E-Mail keine Bedrohung für den Client darstellt. Sprich: kein merkwürdiges oder unsicheres Verhalten an den Tag legt, sobald sie im Client ankommt.
Hier beim Client, also bei uns, in unserer E-Mailsoftware oder App, egal ob Desktop, Smartphone oder Tablet, treffen wir beim Öffnen der E-Mail auf den zweiten „Bad Boy“: die Rendering Engine. Aufgabe der Rendering Engine ist es, den Code zu visualisieren. Sie ist es, die uns Entwicklern (übrigens auch bei der üblichen Webentwicklung) unter dem Thema „Crossbrowser-Kompatibilität“ zu schaffen macht. Blöd ist nur, dass auch sehr aktuelle E-Mail-Software meist noch sehr veraltete oder zweckentfremdete Engines nutzt. Ein gutes Beispiel dafür ist Microsoft Outlook, welches bis zur Version 2003 auf die Engine des Internet Explorers 7 setzte und nun – kaum zu glauben - die des beliebten Microsoft Office Programms Word einsetzt.
Ein Haufen Bäume hier im Wald und kein Licht am Ende des Tunnels?
Sehr viele Steine im Weg also, multipliziert dadurch, dass sich diese Restriktionen von ESP zu ESP (Email Service Provider) unterscheiden und uns vor eine große Herausforderung stellen.
Dennoch kein Grund Trübsal zu blasen. Wie damals das Responsive Webdesign, so befindet sich heute auch das E-Mail-Design noch in den Kinderschuhen. Zwar sind die Grenzen in diesem Bereich momentan noch etwas präsenter als beim großen Bruder, es gibt jedoch auch hier Vorreiter. Hierzu zählen beispielsweise die Apple Dienste, die mit ihrem Support schon nah an aktuelle Webbrowser heranreichen. Außerdem besteht die Hoffnung, dass die anderen Anbieter nachziehen – step by step. Bis dahin gibt es jedoch ein paar Richtlinien, die helfen uns im Dschungel der E-Mail-Restriktionen durchzuschlagen:
1. Coding like it´s 1999
Um all diesen Fesseln der diversen E-Mail-Clients zu entgehen, heißt es, einen Schritt zurück in die Vergangenheit zu machen: „Table is the Word“! Eine große, große Tabelle gefüllt mit weiteren Tabellen. Tabellen soweit das Auge reicht. Das macht den Code zwar sehr unübersichtlich, aber hat sich als kugelsicheres HTML-Layout bewiesen.
2. Keep it simple, but beautiful
Es wird Zeit ein paar Leute zu enttäuschen: Wie bereits erwähnt befindet sich die HTML-E-Mail noch in den Startlöchern. Auch bei viel Expertise bedeutet das: Nicht alles ist möglich! Dessen sollten sich Marketing, Konzeption sowie Design bewusst sein. Das muss aber nicht heißen, dass das Design langweilig sein muss. Hier ist eine gute Absprache zwischen den Abteilungen gefragt.
3. Kenne deine Zielgruppe
„90% der Personen die deinen Newsletter beziehen nutzen iOS? Du glücklicher, glücklicher Mensch!“
Wir können es nicht allen (E-Mail-Clients) recht machen. Deshalb sollten wir wissen, wem wir es recht machen sollten. Um das zu wissen, lohnt sich ein Blick in die Statistik des eigenen Newsletters bzw. der eigenen E-Mailings: Welche Clients und welche Betriebssysteme werden von den eigenen Abonnentinnen und Abonnenten bevorzugt genutzt? Und genau darauf sollte optimiert werden.
4. Testen, testen, testen!
Die wohl wichtigste Devise bei der HTML-E-Mail-Entwicklung. Auch wenn es nervt: Nichts ist wichtiger als die eigenen E-Mails bzw. Templates wieder und wieder durch die Inboxen zu jagen. Und das nicht erst am Ende, sondern von Anfang an. Damit ersparen wir uns nicht nur einige Tränen, sondern erfahren ein direktes Feedback, welches Styling wo scheitert.
Fazit
Responsive E-Mails sind ein schlagkräftiges Marketingtool auf das nicht verzichtet werden sollte. Möglicherweise wird das Ergebnis noch nicht jedes Display dieser Welt in vollem Glanz zieren, dennoch ist die responsive E-Mail ein wichtiger Schritt in die richtige Richtung.
Totgesagte leben länger!
Seit am 3. August 1984, ein Jahr bevor der Film „Back to the Future“ das erste Mal eine Leinwand beleuchtete, die erste E-Mail in Deutschland empfangen wurde, haben viele dem Format einen baldigen Untergang prophezeit.
Heute, 2014, ein Jahr vor der Erforschung des Hoverboards, sieht die Wahrheit ganz anders aus. Die E-Mail ist nicht tot. Ganz im Gegenteil: Sie ist vital - vital wie noch nie. Zusammen mit dem Ausbruch der Smartphone-Verkaufszahlen erfährt die E-Mail eine Renaissance. Ihr wollt einen Beweis? Schaut Euch doch einfach ein paar dieser schön bunten und lehrreichen Statistiken an, die wir auf Pinterest zusammengestellt haben.
Let me introduce to you, Mr. HTML Email
Viel wichtiger als die Vitalität der E-Mail, ist jedoch die Entwicklung des Formats. Seit geraumer Zeit unterstützen E-Mail-Provider und E-Mail-Clients nämlich HTML-E-Mails und erlauben damit die Gestaltung der sonst tristen und rein textbasierten, elektronischen Post. Aufmerksame Leser fragen sich nun natürlich:
„Okay, okay, Ihr könnt HTML-E-Mails schreiben, könnt ihr diese E-Mails dann auch „responsive“ gestalten?“
Die Vision ist groß: E-Mails, die sich unabhängig von Gerät, E-Mail-Dienst und -Client perfekt darstellen lassen. Der Weg dorthin leider steinig.
What´s the big deal?
„Ihr seid Profis im Erstellen von Responsive Websites, sollte es nicht einfach sein dieses Wissen auf E-Mails zu übertragen?“
Und hier liegt die Krux der ganzen Geschichte. Im Gegensatz zu HTML-Websites werden HTML-E-Mails nicht direkt vom Browser dargestellt, sondern durchlaufen einen sogenannten Präprozessor. Diese Präprozessoren sind der erste „Bad Boy“ auf dem Weg zur perfekten Darstellung. Ihre Aufgabe ist es, bestimmte Codezeilen aus der E-Mail zu entfernen, sodass die E-Mail keine Bedrohung für den Client darstellt. Sprich: kein merkwürdiges oder unsicheres Verhalten an den Tag legt, sobald sie im Client ankommt.
Hier beim Client, also bei uns, in unserer E-Mailsoftware oder App, egal ob Desktop, Smartphone oder Tablet, treffen wir beim Öffnen der E-Mail auf den zweiten „Bad Boy“: die Rendering Engine. Aufgabe der Rendering Engine ist es, den Code zu visualisieren. Sie ist es, die uns Entwicklern (übrigens auch bei der üblichen Webentwicklung) unter dem Thema „Crossbrowser-Kompatibilität“ zu schaffen macht. Blöd ist nur, dass auch sehr aktuelle E-Mail-Software meist noch sehr veraltete oder zweckentfremdete Engines nutzt. Ein gutes Beispiel dafür ist Microsoft Outlook, welches bis zur Version 2003 auf die Engine des Internet Explorers 7 setzte und nun – kaum zu glauben - die des beliebten Microsoft Office Programms Word einsetzt.
Ein Haufen Bäume hier im Wald und kein Licht am Ende des Tunnels?
Sehr viele Steine im Weg also, multipliziert dadurch, dass sich diese Restriktionen von ESP zu ESP (Email Service Provider) unterscheiden und uns vor eine große Herausforderung stellen.
Dennoch kein Grund Trübsal zu blasen. Wie damals das Responsive Webdesign, so befindet sich heute auch das E-Mail-Design noch in den Kinderschuhen. Zwar sind die Grenzen in diesem Bereich momentan noch etwas präsenter als beim großen Bruder, es gibt jedoch auch hier Vorreiter. Hierzu zählen beispielsweise die Apple Dienste, die mit ihrem Support schon nah an aktuelle Webbrowser heranreichen. Außerdem besteht die Hoffnung, dass die anderen Anbieter nachziehen – step by step. Bis dahin gibt es jedoch ein paar Richtlinien, die helfen uns im Dschungel der E-Mail-Restriktionen durchzuschlagen:
1. Coding like it´s 1999
Um all diesen Fesseln der diversen E-Mail-Clients zu entgehen, heißt es, einen Schritt zurück in die Vergangenheit zu machen: „Table is the Word“! Eine große, große Tabelle gefüllt mit weiteren Tabellen. Tabellen soweit das Auge reicht. Das macht den Code zwar sehr unübersichtlich, aber hat sich als kugelsicheres HTML-Layout bewiesen.
2. Keep it simple, but beautiful
Es wird Zeit ein paar Leute zu enttäuschen: Wie bereits erwähnt befindet sich die HTML-E-Mail noch in den Startlöchern. Auch bei viel Expertise bedeutet das: Nicht alles ist möglich! Dessen sollten sich Marketing, Konzeption sowie Design bewusst sein. Das muss aber nicht heißen, dass das Design langweilig sein muss. Hier ist eine gute Absprache zwischen den Abteilungen gefragt.
3. Kenne deine Zielgruppe
„90% der Personen die deinen Newsletter beziehen nutzen iOS? Du glücklicher, glücklicher Mensch!“
Wir können es nicht allen (E-Mail-Clients) recht machen. Deshalb sollten wir wissen, wem wir es recht machen sollten. Um das zu wissen, lohnt sich ein Blick in die Statistik des eigenen Newsletters bzw. der eigenen E-Mailings: Welche Clients und welche Betriebssysteme werden von den eigenen Abonnentinnen und Abonnenten bevorzugt genutzt? Und genau darauf sollte optimiert werden.
4. Testen, testen, testen!
Die wohl wichtigste Devise bei der HTML-E-Mail-Entwicklung. Auch wenn es nervt: Nichts ist wichtiger als die eigenen E-Mails bzw. Templates wieder und wieder durch die Inboxen zu jagen. Und das nicht erst am Ende, sondern von Anfang an. Damit ersparen wir uns nicht nur einige Tränen, sondern erfahren ein direktes Feedback, welches Styling wo scheitert.
Fazit
Responsive E-Mails sind ein schlagkräftiges Marketingtool auf das nicht verzichtet werden sollte. Möglicherweise wird das Ergebnis noch nicht jedes Display dieser Welt in vollem Glanz zieren, dennoch ist die responsive E-Mail ein wichtiger Schritt in die richtige Richtung.