Mobile E-Mail: Wie man dem Trend zu Responsive Layouts gerecht wird

Der Anteil derjenigen, die über mobile Endgeräte online gehen, ist im Vergleich zum Vorjahr um 13 Prozentpunkte auf 40 Prozent gestiegen, so die aktuelle Studie Internetnutzung der Initiative D21. Eine aktuelle Studie des EMail-Softwareanbieters Return Path    zeigt, dass inzwischen 37 Prozent der EMail-Öffnungsraten via Mobilgerät stattfinden. Damit überholt die mobile Öffnungsrate die der stationären Rechner um glatte sieben Prozent. Insgesamt stiegen die Raten über mobile Endgeräte seit 2010 um 300 Prozent.

Den größten Anteil am mobilen Zugriff auf E-Mails verbuchen die Branchen Einzelhandel (40 Prozent), Konsumgüter (40 Prozent) und Immobilien (38 Prozent). Die Ergebnisse der Studie deuten zudem auf einen möglichen Zusammenhang zwischen dem Inhalt der E-Mail und dem Anteil der mobilen EMail-Öffnungen hin. So war festzustellen, dass ein signifikanter Anteil Banking-bezogener E-Mails (60 Prozent) nach wie vor auf dem Desktop geöffnet wird, wahrscheinlich aus Sicherheitsgründen.

Wie Marketer jetzt handeln müssen

"E-Marketer, die auf Basis ihrer eigenen Abonnentendaten entscheiden, ihre EMail-Kommunikation für die von ihren Subscribern bevorzugten mobilen Endgeräte zu optimieren, können jetzt punkten. EMail-Intelligence-Analysen sind in der Lage, Marketing-Verantwortlichen aufzuzeigen, wann und wo sie Ressourcen in eine mobile Marketingstrategie investieren sollten, um ihr Budget optimal einzusetzen", kommentiert Matt Blumberg , CEO von Return Path, die Ergebnisse. "E-Marketer, die sich nur auf die Öffnungsraten stützen um den Kampagnenerfolg zu evaluieren und moderne Kennzahlen außen vor lassen, müssen in Zukunft auf deutliche Umsatzeinbußen gefasst sein."
E-Marketer müssen sich heute zwingend mit diesem Thema auseinandersetzen, da E-Mail einen fast doppelt so hohen Beitrag zum Umsatz leistet wie Search-Marketing und den ROI aus Social Media sogar um das Siebenfache übersteigt (Monetate, 2012). Da aber nach wie vor der Großteil der Online-Einkäufe von einem Desktop-Computer aus getätigt wird, ist folglich die Optimierung für beide Plattformen unerlässlich.

Smartphones und Tablets haben das Informationsverhalten der Nutzer verändert. Kunden und Interessenten erwarten heute an jedem Ort passgenaue Informationen und Angebote. Zugleich ist eine benutzerfreundliche und mediengerechte Darstellung von E-Mails auf mobilen Endgeräten unerlässlich. Was bedeutet das für den Marketer? Wie kann er auf dieses Nutzerverhalten eingehen?

Designing for Touch

Bei der mobilen Gestaltung müssen die Touch-Navigation, kleinere Bildschirme sowie technische Besonderheiten berücksichtigt werden. Deshalb sind Lösungen gefragt, die E-Mails auf Smartphones, Tablets und Desktop-Geräten dynamisch darstellen. Der Königsweg besteht wohl darin, die unterschiedlichen Ansichten einer E-Mail für die verschiedenen Endgeräte auf Template-Basis zu optimieren. Die EMail-Layouts werden hierbei für die unterschiedlichen Bildschirmauflösungen und Display-Größen variabel definiert. Zentrale Gestaltungselemente wie Bilder oder Call-to-Buttons können so automatisiert verschoben und optimiert platziert werden.

Technische Voraussetzungen

Responsive EMail-Layouts basieren auf so genannten CSS3 Media Queries  . Diese ermöglichen es, mobile Endgeräte und die maßgeblichen Geräteeigenschaften gezielt anzusprechen und dabei die speziellen Eigenschaften und Fähigkeiten des Endgeräts abzufragen. Auf diese Weise lassen sich die technischen Parameter ermitteln, die bei der mobilen EMail-Nutzung - und damit auch für das E-Mail-Marketing - eine Rolle spielen: Wie groß ist das Display des Geräts? Wie hoch ist seine Pixeldichte?

So kann festgelegt werden, wie mobile EMail-Layouts dargestellt werden, wenn der anzeigende Bildschirm innerhalb einer bestimmten Pixel-Bandbreite liegt. Die verschiedenen Design-Elemente erhalten für jede Auflösung z. B. einen optimalen Prozentanteil am Layout zugewiesen. Anstatt vieler unterschiedlicher Code-Varianten existiert nur noch eine einzige, deren visuelle Darstellung sich ganz von selbst dem Endgerät des Nutzers anpasst.

Sieben Tipps für Responsive Layouts

Nachfolgend sieben Tipps für mobile EMail-Layouts:

1. Aufmerksamkeit erzeugen
   Auf den Betreff kommt es an, denn er ist die Schlüsselinformation, die am einfachsten Neugierde wecken und Interesse erzeugen kann. E-Mails mit einem kurzen und prägnanten Betreff öffnen Abonnenten deutlich häufiger - das ist bei Smartphones und Tablets nicht anders als bei PCs und Notebooks. Lange Betreffzeilen, bei denen Schlüsselwörter zu weit nach hinten rutschen, sollten nach Möglichkeit vermieden werden, da diese auf Smartphones unter Umständen nicht angezeigt werden. Für den Mobil-Kanal sollten spezielle Snippet-Texte verwendet werden. Diese werden auf Smartphones wie dem iPhone unterhalb des Betreffs angezeigt und sind deshalb eine gute Ergänzung zur klassischen Betreffzeile.
   
   
2. Für Touch-Navigation optimieren
   Touchscreen-optimierte Klick-Elemente sorgen für eine hohe Response. Im Mobil-Kanal empfehlen sich z. B. flexible Schrift- und Bildgrößen sowie einfach klickbare Call-to-Action-Buttons. Bilder, Grafiken und Buttons sollten klein, aber trotzdem klar erkennbar designt werden. Links sollten in einem ausreichenden Abstand voneinander platziert werden, damit der Daumen auf dem Touchscreen problemlos navigieren kann. Als Faustregel gilt, dass der Daumen eines erwachsenen Nutzers ca. 40 x 40 Pixel benötigt. Zudem sollte horizontales Scrollen nach links und rechts vermieden werden. Besonders anwenderfreundlich sind einspaltige Layouts, bei denen die Inhalte übereinander gestapelt werden.
   
   
3. Aufs Wesentliche konzentrieren
   Das Credo des mobilen EMail-Marketings lautet: Weniger ist mehr. Und diese Philosophie deckt sich mit den Erwartungen der meisten Nutzer - dem Wunsch nach einfacher und intuitiver Bedienung. Der Einsatz von Design und Inhalten sollte sich deshalb im mobilen Kanal auf das Wesentliche beschränken. Text und Grafik sorgen im Body-Text für die nötige Aufmerksamkeit. Auf keinen Fall die Landingpage hinter einem Newsletter-Link vergessen. Sie muss ebenfalls für die mobile Nutzung ausgelegt werden. Denn nur dann kann sie für die gewünschte Conversion sorgen.
   
   
   
4. Above-the-fold-Bereich beachten
   Auf mobilen Geräten ist das Scrollen deutlich mühsamer als auf dem Desktop. Umso wichtiger ist der Kopfbereich einer E-Mail. "Above the fold" bezeichnet den Einstiegsbereich einer E-Mail, der unmittelbar sichtbar ist, ohne dass der Nutzer nach unten navigieren muss. Für Smartphones & Co. gilt ganz besonders: Die wichtigsten Botschaften sollten gleich zu Beginn platziert werden, weil sich die Aufmerksamkeit der Nutzer auf den oberen Bereich konzentriert. Dies empfiehlt sich vor allem für wichtige Layout-Elemente wie Call-to-Action-Buttons. Solche Buttons sollten eine eindeutige Handlungsaufforderung beinhalten und zum "Durchklicken" animieren.
   
   
5. Einspaltige Layouts
   Am besten fahren die Marketer mit einspaltigen Smartphone-Layouts. Die Umsetzung ist unkompliziert und die Darstellung mit den verschiedenen EMail-Diensten ist meist unproblematisch. Bei mehrspaltigen Layouts ist dagegen Vorsicht geboten und ist mit Testaufwand verbunden. Outlook.com unterstützt CSS-Floating sowie Margins nicht mehr. So ist es also nicht möglich, ein zweispaltiges Layout mit Media Queries zu einem einspaltigen Layout umzuformatieren. Zweispaltige Tabellen lassen sich auch nicht umbrechen.
   
   
6. Alt-Attribute nutzen
   Auf Apple-Geräten werden Bilder automatisch geladen und dargestellt. Ansonsten kann der Marketer dagegen nie ganz sicher sein, ob Bilder in der mobilen Inbox auch gleich dargestellt werden. Deshalb sollten Bilder, Grafiken und Buttons mit einem beschreibenden und aktivierenden Alternativ-Text versehen werden. Diese Information wird in der Regel auch bei nicht geladenen Bildern angezeigt. Hierfür empfehlen sich die aus dem "stationären" Bereich bekannten sogenannten Alt-Attribute.
   
   
7. Regelmäßig testen
   EMail-Layouts sollten auf den gängigen Endgeräten getestet werden. Vor allem zu Beginn, also bei der Template-Entwicklung. Aber auch später während der Regelkommunikation. Denn mit aktualisierten Postfach-Versionen und neuen Geräten ändert sich häufig auch die Darstellung des bestehenden EMail-HMTL-Codes. Um Darstellungsfehlern vorzubeugen sind Checks also unerlässlich. Darstellungstests sind in professionellen Versandlösungen meist bereits integriert. Für besonders detaillierte Tests stehen dem Marketer auch die US-Spezialisten Litmus und Return Path zur Verfügung.

---

iBusiness-Autor Rene Kulka ist als EMail-Marketingevangelist beim Dienstleister Optivo tätig. Neben Beratungsprojekten betreut er federführend das Wissensportal Optivo Campfire   .