E-Mails werden mittlerweile vermehrt am Smartphone abgerufen, weshalb es wichtig ist, beim Versand von E-Mails und Newslettern auf eine korrekte Darstellung auf mobilen Geräten zu achten. Die sogenannte responsive Darstellung sorgt für eine automatische Anpassung für das jeweilige mobile Endgerät. Bei auf HTML basierten Mailings kann diese nicht mehr gewährleistet werden ‒ ein paar Tipps können jedoch dabei helfen.
💡 Tipps für eine responsive Darstellung von HTML-E-Mails
Bevor Sie viel Arbeit investieren, um Ihr HTML-Mailing „mobilfreundlich” zu machen, sollten Sie in einem ersten Schritt messen, ob und wie viele Ihrer Empfänger den Newsletter tatsächlich mit einem mobilen Gerät öffnen. Mit rapidmail wird nach Versand automatisch eine Statistik generiert, mit der Sie auswerten können, ob sich die Optimierung der mobilen Darstellung im Hinblick auf Ihre Empfängergewohnheiten tatsächlich lohnt.
Damit den Empfängern auch auf mobilen Geräten alle wichtigen Informationen aus dem Betreff angezeigt werden, ist es wichtig, die Betreffzeile möglichst kurz zu halten. Wir raten dazu die Anzahl von 35 Zeichen für den Betreff nicht zu überschreiten. So stellen Sie sicher, dass der Betreff bei allen E-Mail-Clients und auf allen Endgeräten vollständig angezeigt wird.
Um Ihren Betreff zu vervollständigen, können Sie den Preheader nutzen. Dieser wird bei vielen mobilen Endgeräten und E-Mail-Programmen direkt unter dem E-Mail-Betreff angezeigt und kann somit als Ergänzung dienen.
Auch hier gilt: Je kürzer, desto besser. Denn je länger Betreff und Preheader sind, desto mehr Platz nehmen sie auf dem kleineren mobilen Bildschirm ein. Dies führt ggf. dazu, dass wichtige Informationen in den Bereich geschoben werden, der auf den ersten Blick nicht sichtbar ist.
Damit Ihre Newsletter auch auf den kleineren Smartphone-Bildschirmen ohne Probleme gelesen werden können, sollten Sie die Schriftgröße auf 22 px für Überschriften und mindestens 12 px für den Fließtext einstellen. Um Ihren Abonnenten das Lesen zu erleichtern, sollten Sie außerdem einen Zeilenabstand von etwa 17 px einhalten.
Für eine „mobilfreundliche” Darstellung Ihrer Newsletter sollten Sie darauf achten, dass Sie Ihren Empfängern eine einfache Touch-Navigation in der E-Mail ermöglichen. Das heißt, Ihre Leser sollten mit dem Finger problemlos auf alle Links und interaktiven Elemente tippen können, ohne dass sie dabei unbeabsichtigt einen anderen Link öffnen. Die sogenannte Touch-Area sollte dafür mindestens 38 x 38 px betragen.
Möchten Sie eine Telefonnummer in Ihr Mailing einfügen, sollten Sie diese in jedem Fall als Text und nicht als Bild einfügen. Indem Sie die Zahlenfolge mit der entsprechenden Telefonnummer verlinken, kann diese bei einigen E-Mail-Clients direkt für einen Anruf angewählt werden.
Da E-Mails mit mobilen Endgeräten oftmals im Freien gelesen werden, sollten kontraststarke Farben im Mailing verwendet werden, damit die Inhalte gut erkennbar bleiben. Auch die Farbe der eingebauten Links sollte sich deutlich vom restlichen Fließtext unterscheiden, damit die Empfänger die Verlinkung sofort wahrnehmen.
Vor allem wenn Ihre Empfänger mobile Daten nutzen, um ihre E-Mails abzurufen, ist es von Nachteil, wenn ein Newsletter zu viele Bilder enthält. Die Folge ist eine erhöhte Ladezeit, teilweise werden die Bilder überhaupt nicht nachgeladen. Sie sollten sich in Ihrem Mailing daher auf eine moderate Menge kleiner Bilder beschränken.
Für die Bilder, Call-to-Action-Buttons und Grafiken, die Sie in Ihr Mailing einbauen, sollten Sie jeweils einen Alternativ-Text festlegen, der die Abbildung zusammenfasst bzw. beschreibt. Dieser wird auch dann in der E-Mail angezeigt, wenn das entsprechende Bild nicht dargestellt werden kann.
Damit Ihre Empfänger am Smartphone-Screen nicht ständig nach links und rechts scrollen müssen, raten wir dazu, auf ein mehrspaltiges Layout zu verzichten, sodass die Inhalte untereinander angezeigt werden.
Bevor Sie Ihr Mailing versenden, das auf eigenem HTML basiert, sollten Sie prüfen, ob das Mailing auf mobilen Geräten tatsächlich korrekt angezeigt wird. Je nach E-Mail-Programm, Endgerät und genutzter App kann die Darstellung unterschiedlich ausfallen. Mit rapidmail können Sie hierfür u. a. den Darstellungstest, die Vorschau sowie den Versand von Testmails nutzen.
💡 In unserem umfangreichen Schritt-für-Schritt Guide zeigen wir anhand weiterer nützlicher Tipps, wie Sie die Zustellbarkeit Ihrer E-Mails verbessern.
