Hands-on Tipps: E-Mails für Smartphones optimieren

Damit die E-Mails korrekt dargestellt werden, gilt es jedoch Einiges zu beachten.

Der mobile Leser: Studien und Fakten

Viele unterschiedliche Studien haben sich in der Vergangenheit bereits mit der mobilen Nutzung der E-Mail Funktion beschäftigt. Vorweg deshalb ein paar Fakten zur mobilen E-Mail Nutzung:

Unternehmen verschlafen mobiles Web

Trotz dieser klaren Fakten hat nach wie vor ein Drittel der deutschen Unternehmen beim Thema Mobil-Optimierung von E-Mail und Newsletter seine Hausaufgaben noch nicht gemacht. Um E-Mails auch mobil lesbar zu machen, sollten die Templates deshalb grundlegend überarbeitet werden. Bei der Umgestaltung bestehender Layouts in mobil-optimierte E-Mails und Newsletter gilt es jedoch ein paar Regeln zu beachten.

Anders als bei Webseiten versagen bei E-Mail Templates beispielsweise die klassischen Regeln des Responsive Design.

Der Grund: Bei Webseiten kann bereits VOR Auslieferung des HTML-Codes abgefragt werden, ob die Webseite auf einem Smartphones gelesen wird. Bei E-Mails ist der HTML-Code jedoch bereits beim Empfänger, wenn die E-Mail geöffnet wird. Dies schränkt die Gestaltungsmöglichkeiten deutlich ein.

Folgende Hands-on Tipps helfen Dir dabei, Deine E-Mails auch für Smartphones gut lesbar zu machen:

1. Das Wichtigste vorab: Messen von Mobil-Nutzern

Damit Du weißt, wie viele Deiner Leser wirklich von Mobilgeräten kommen, solltest Du im Vorfeld eine Auswertung erstellen. Jeder gute Email Service Provider (ESP) besitzt diese Zahlen. Schaue deshalb, ob es Unterschiede bei Deinen verschiedenen Verteilern und E-Mailings gibt. Nur ein Mausklick und Du bist schlauer.

Abbildung 1: Messe vorab den Anteil Deiner mobilen Nutzer.

2. Absender und Betreff noch weiter kürzen

Der Vorsatz "Wichtiges nach vorn!" gilt auch für Absender und Betreff. Diese beiden Angaben werden auf Smartphones - und noch mehr auf der Smartwatch – radikal abgeschnitten. Daher sollte der Absender bereits in den ersten 20 Zeichen deutlich erkennbar sein, in den ersten 30 Zeichen der Betreff.

Abbildung 2: Ein kurzer Betreff ist mobil von Vorteil.

3. Vorschau verbessern – Pre-Header einbauen

Mobil wird schnell gelesen und gelöscht. Oftmals wird die Vorschau so eingestellt, dass die nur ersten 3 Zeilen einer E-Mail lesbar sind. Dieser "Pre-Header" besteht aus dem ersten in der E-Mail sichtbaren Text.

Nutze deshalb die ersten 50 Zeichen für eine Kurzbeschreibung des Inhalts und beginne bitte nicht mit "Haben Sie Probleme beim Lesen dieser E-Mail.."!

4. Text vergrößern

Der Text einer E-Mail sollte auch für mobile Leser bequem lesbar sein. Schriftgröße 12 und ein Zeilenabstand von 17 Punkten haben sich hierbei bewährt. Von einer kleineren Schriftgröße ist eher abzuraten.

5. Bilder anpassen

Bitte nicht alles in Bildern anzeigen, denn Bilder brauchen mobil oft ewig um zu laden. Deutschland liegt weltweit auf Rang 34 der LTE-Geschwindigkeit und in der Abdeckung sind wir sogar nur auf Rang 49. Nutze also stattdessen HTML und Text, wo immer Du kannst.

Zudem ist es möglich für Mobilnutzer kleinere Bilder ausliefern, als für PC-Leser. Oft wird das Nachladen von Bildern auch unterdrückt, um einer Drosselung der Bandbreite vorzubeugen, die beim Aufbrauchen des Freikontingents droht.

6. Telefonnummer als Text anzeigen

Wer die Telefonnummer in der E-Mail als Bild versteckt, kann nicht angerufen werden. Als Text hingegen reicht nur ein Klick, um per Telefon erreichbar zu sein.

7. Wurstfinger klicken anders

Wer kennt das nicht: Weil die Links zu eng aneinander liegen, wird der falsche Link geklickt. Als Daumenregel gilt, dass der klickbare Bereich 44 Pixel breit sein sollte, damit nicht daneben geklickt wird.

8. Inhalte verstecken – Spalten reduzieren

So wie man Bilder komprimieren kann, lassen sich auch ganze Bereiche der E-Mail verstecken, damit Mobilnutzer weniger Inhalt sehen. Außerdem sollte auf die Mehrspaltigkeit verzichtet werden und die E-Mail auf dem Smartphone lediglich einspaltig angezeigt werden.

Abbildung 3: Mobil lässt sich eine einspaltige E-Mail besser lesen.

9. Landing Page anpassen

Die beste mobiloptimierte E-Mail hilft nichts, wenn die dahinter liegende Landingpage nicht für Smartphones optimiert ist. Wichtig: Auch einen Link auf die Desktop-Version setzen, damit der Leser zur Not eventuell vermisste Elemente in der vertrauten PC-Ansicht wiederfindet.

10. Kontrastreiches Design besser in der Sonne

Weil Smartphones oft unter freiem Himmel genutzt werden, ist es hilfreich, mit starken Kontrasten zu arbeiten. Schwarz auf weiß liest sich nun mal besser als dunkelgrau auf hellgrau.

11. Smartwatches lieben die Textversion

Jede HTML-Mail hat auch eine Textversion – oder sollte das zumindest haben. Sowohl der Blackberry als auch die Smartwatch bestehen darauf und senden böse Fehlermeldungen, wenn es keine Textversion gibt.

Fazit

Je mehr Menschen das Smartphone als Ersatz oder Ergänzung zum PC nutzen, desto wichtiger wird auch die ansprechende Gestaltung mobiler E-Mails. Die ersten Unternehmen gehen bereits über zu einer "Mobile-First"-Strategie. Am Smartphone wird die E-Mail sogar noch wichtiger, weil viele Menschen unterwegs anders als am PC mehr Zeit haben, die E-Mails auch wirklich zu lesen.

Alle Tipps als Graphik findest Du hier: