Mehr und mehr Nutzer rufen ihre E-Mails unterwegs mit dem Smartphone oder Tablet ab. Der Anteil derjenigen, die über mobile Endgeräte online gehen, ist im Vergleich zum Vorjahr um ganze 13 Prozentpunkte auf 40 % gestiegen (Initiative D21). Ein Fakt, dem sich Unternehmen, die auf den E-Mail-Kanal setzen, stellen müssen. Denn Nutzer, die sich unterwegs über zerschossene oder umständlich gestaltete Newsletter ärgern, gehen schnell ganz als Abonnent verloren. Abhilfe versprechen responsive E-Mail-Layouts auf Template-Basis.
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äte 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 E-Mail-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.
6 Tipps für responsive Layouts
Nachfolgend habe ich sechs Tipps für mobile E-Mail-Layouts zusammengefasst:
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 von links nach rechts vermieden werden. Besonders anwenderfreundlich sind einspaltige Layouts, bei denen die Inhalte übereinander gestapelt werden.
3. Aufs Wesentliche konzentrieren
Das Credo des mobilen E-Mail-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 Landing-Page 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. Alt-Attribute nutzen
Auf Apple-Geräten werden Bilder automatisch geladen und dargestellt. Ansonsten können die Unternehmen 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.
6. Regelmäßig testen
E-Mail-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 E-Mail-HMTL-Codes. Um Darstellungsfehlern vorzubeugen sind Checks also unerlässlich. Darstellungstests sind in professionellen Versandlösungen meist bereits integriert.
(Bild: © bloomua – Fotolia.de)
„Auf mobilen Geräten ist das Scrollen deutlich mühsamer als auf dem Desktop“ – ich frage mich, was für mobile Geräte Sie verwenden