PresseKat - Checkliste Optimierung Ihres Newsletters für mobile Endgeräte

(PresseBox) - Im Folgenden eine Liste, welche Punkte Sie beachten sollten.
Ideal und Wirklichkeit
Bei der Optimierung von Webseiten ist klar: responsives Design ist die Methode der Wahl, um sicherzustellen, dass Inhalte auch für Smartphones und Tablets optimal zugänglich sind.
Per CSS (Cascading Style Sheets, genauer: (at)Media Queries) wird die HTML-Seite so dargestellt, dass sie jeweils optimal aussieht. Dabei berücksichtigt man meist:
- Fensterbreite bzw. Bildschirmgröße
- Orientierung (Hoch- oder Querformat)
- verwendeter Browser
Für unterschiedliche Anzeigegeräte wird dabei die gleiche HTML-Seite ausgeliefert, die der jeweilige Browser unterschiedlich darstellt. Auf dem Smartphone wird z.B. die Seitenleiste ausgeblendet und die horizontale Navigation als vertikale Liste gezeigt.
Probleme mit mobile eMail-Clients
Leider unterstützen aber nicht alle eMail-Programme responsives Design. Vor allem spielen nicht mit:
- Windows Phone 8
- Yahoo!-App (iOS und Android)
- Gmail-App (iOS und Android)
Deshalb raten die Experten von stylecampaign etwa ganz von responsivem Design ab (siehe hier im Blog Responsive Design für eMails).
Immer mehr Marketer geben sich aber damit nicht zufrieden und machen sich die Mühe, dennoch responsive eMails zu gestalten. Wichtig ist dabei dann aber, dass Sie sicherstellen, dass die Mails dennoch auch auf den Geräten/mit den Clients ordentlich angezeigt werden, die responsives Design nicht erlauben.
Konzept
1. Es hat sich bewährt, nach dem Grundsatz ?Mobile First!? zu konzipieren und zu gestalten. Es ist wesentlich leichter, von einer einfachen mobil-Version ausgehend Inhalte und Funktionen zu ergänzen als umgekehrt abzuspecken.
2. Sehen Sie sich als erstes aktuelle Öffnungs-Statistiken Ihres eigenen Newsletters an. So finden Sie heraus, welche Geräte und Mailprogramme Ihre Abonnenten überhaupt nutzen.

3. Kommen Sie in Ihren Texten im Newsletter sehr schnell auf den Punkt. Unterwegs haben Nutzer noch weniger Geduld als sonst.
Inhalt/Text
1. Machen Sie die Betreffzeile nicht zu lang, 30 Zeichen sind gut, mehr als 40 ungünstig.
2. Bringen Sie relevante Wörter am Anfang des Betreffs, vor allem, wenn Sie sich in der Länge nicht beschränken können.
3. Prüfen Sie Ihre Preheader, damit in der Übersichtsliste der Mails aussagekräftige Texte zu lesen sind (siehe Höhere Öffnungsraten dank Snippets).
4. Achten Sie auf geringe Datenmengen. 100 KB als Obergröße für ein Mail haben sich sich bewährt.
Es gibt immer noch etliche Nutzer, die keine Datenflatrate haben bzw. deren Downloadgeschwindigkeit gedrosselt wird, wenn sie einen bestimmten Durchsatz überschreiten.
Inhalt/Bilder
1. Schreiben Sie aussagekräftige Alt-Texte (werden angezeigt, wenn Bilder [noch] nicht geladen sind).
2. Liefern Sie Bilder nur in der Auflösung aus, in der sie gebraucht werden.
3. Suchen Sie die Bilder so aus, dass sie auch auf kleinen Screens noch die notwendigen Details zeigen.
4. Bieten Sie für die hoch aufgelösten Displays (?Retina?) entsprechend hoch aufgelöste Bilder an.
Die Landing-Page mitdenken
Nicht nur die Newsletter selbst müssen mobil funktionieren, das gilt auch für Landingpages, auf die Sie in Ihren Mails verweisen.
Hier können Sie aber glücklicherweise davon ausgehen, dass responsives Design voll unterstützt wird ? alle einigermaßen aktuellen Browser können mit den (at)meda-Queries umgehen.
Gestaltung
1. Legen Sie die Mails für nicht mehr als 600 Pixel Breite an.
2. Buttons sollten nicht kleiner als 44 x 44 Pixel sein (Apples Empfehlung, Microsoft reichen 38 x 38?)
3. Nutzen Sie mindestens 13 Pixel Schriftgröße für Fließtext.
4. Nutzen Sie mindestens 20 Pixel für Überschriften.
5. Die einfachste und sicherste Lösung ist ein einspaltiges Layout.
6. Links oben ist der wichtigste Punkt ? und der ist auf Smartphones deutlich kleiner als auf PCs. Der Bildschirm der immer noch weit verbreiteten ersten iPhone-Generationen ist z.B. 480 x 320 Pixel groß. Doch der Bereich, der sichtbar ist, ist deutlich kleiner wegen der Kopf- und Fußleiste des Mailprogramms. Effektiv haben solche Geräte nur ca. 400 Pixel in der Höhe zur Verfügung (bei vertikaler Orientierung).
7. Stellen Sie sicher, dass also auf den ersten 400 Pixeln in der Höhe etwas zu sehen oder lesen ist, was die Aufmerksamkeit der Nutzer fesselt und sie zum Lesen/Scrollen bringt.
Technik
Umgehen Sie technische Hürden (wie gesagt gilt das auch für die Landingpages):
1. Kein Flash
2. Kein JavaScript
3. Keine Frames
4. Keine Popups
Nutzen Sie die Möglichkeit nur mit Bedacht, Inhalte zu verstecken und erst auf Tipp zugänglich zu machen ? das erhöht die Datenmenge unnötig, wenn die meisten Nutzer diese Inhalte gar nicht ansehen.
Testen
Da wie erwähnt nicht alle Programme auf Smartphones responsives Design unterstützen, ist es sehr wichtig, Ihre Templates auf möglichst vielen Plattformen mit möglichst vielen Programmen zu testen. Ihr für iPhone/Mail optimiertes Mailing ist unter Umständen mit dem Gmail-Client unbenutzbar.
Testen Sie aber nicht nur technisch. Sondern testen sie am besten auch mit echten Nutzern, bei dem Sie bzw. eine spezialisierte Agentur beobachtet, wie diese auf ihren eigenen Geräten mit Ihrem Newsletter umgehen.