Jeder Screen ist anders - E-Mails responsive gestalten
Wenn Sie jetzt Smartphone oder Tablet antworten, gehören Sie zu den rund 50 Prozent der Bürger in Deutschland, die ihre E-Mails mit Vorliebe auf einem mobilen Endgerät lesen, oder es zumindest versuchen.
Denn beim Gestalten eines Newsletter-Templates werden leider oft unsere kleinen, täglichen Begleiter vergessen. Newsletter, die Sie auf dem Desktop hervorragend lesen können, werden auf einem kleinen Bildschirm schnell unleserlich: kleine Schriften, enge Zeilenabstände und unglückliche Umbrüche im Layout sind die Folge.
Eine Studie von Bluehornet ergab, dass 71,2 Prozent der Befragten, E-Mails, die auf einem Handy oder Tablet nicht richtig dargestellt werden, löschen. 16,3 Prozent der Befragten würden sich sogar vom Newsletter abmelden.
Erhöhen Sie die Usability Ihres Templates!
Niemand beschäftigt sich gerne mit einem unübersichtlichen Mailing, bei dem es eine Herausforderung ist, auf einen Link oder Button zu klicken. Um die Usability des Mailings zu steigern, müssen E-Mail-Kampagnen und Landing Pages mobilkonform geplant werden.
600 Pixel beträgt das Standardlayout eines Newsletters. Damit das Template auf einem Smartphone schnell geladen werden kann, muss die Pixel-Breite auf 80 Prozent der ursprünglichen Layout-Größe angepasst werden. Aber auch die Besonderheiten der verschiedenen Gerätetypen und Betriebssysteme dürfen nicht vergessen werden.
Achten Sie bei der Gestaltung Ihres Templates deshalb auf eine klare Struktur. Dabei sollte das Design des Newsletters so einfach wie möglich gehalten werden. Verwenden Sie Bildinhalte statt lange Texte. Zudem sollten Buttons vergrößert werden, um ein einfaches „klicken“ zu realisieren. Auf einem mobilen Endgerät stehen Ihnen zwei Vorschauzeilen, der sogenannte Pre-Header zur Verfügung. Nutzen Sie diese als Verlängerung der Betreffzeile, um die Neugierde des Lesers zu wecken. Beschränken Sie sich aufs Wesentliche und kürzen Sie die Desktop-Version Ihres Templates.
Ein Design für alle Endgeräte
Ein Lösungsansatz, um E-Mails für verschiedene Endgeräte zu optimieren lautet Responsive Design. Die technische Basis für reaktionsfähige Templates bilden HTML5 und, um die notwendigen Media Queries einsetzen zu können, CSS3.
Media Queries erkennen die Bildschirmgröße eines Gerätes unabhängig von der Marke und der Softwareversion und greifen auf die im Vorfeld definierten Regelungen für den jeweiligen Bildschirm zurück. Sie können eingesetzt werden, um beispielsweise das Layout des Mailings zu ändern, die Größe von Text, Bilder und Buttons anzupassen und in einigen Fällen Inhalte zu verstecken oder sogar zwischen Desktop- und mobilen Geräten auszutauschen.
Ein flexibles Raster, das aus festen Umbruchspunkten besteht, sorgt für die Anpassung des Layouts. Die Umbruchspunkte oder auch Breakpoints genannt, werden im CSS-Code gesetzt. Definiert man die Breite beispielsweise auf 550 Pixel, könnte ein passendes Stylesheet geladen werden, sobald die Viewport-Breite kleiner als 550 Pixel wird. Auch Bilder und Videos müssen responsive sein. Die definierten Breakpoints sorgen dann dafür, dass sie in einer alternativen Größe geladen werden.
Nicht alle CSS oder HTML5 Codes funktionieren in Verbindung mit Responsive Design. Harte Umbrüche im Layout sind nur bedingt möglich. Auch mehrspaltige Layouts und bestimmte Provider-Einstellungen können zu Darstellungsproblemen führen. Deshalb ist es wichtig, das Template vor dem Versand ausgiebig zu testen.
Checkliste Mobile Optimierung
- Template-Breite
320 bis 550 Pixel oder 80 % der ursprünglichen Breite
- Call-to-Action
Aufmerksamkeitsstark platzieren und „klickbar“ gestalten (mind. 44 x 44 Pixel)
- Layout
Klar strukturieren und einspaltig gestalten
- Pre-Header
Die beiden Vorschauzeilen als Verlängerung der Betreffzeile nutzen, um die Neugierde des Lesers zu wecken
- Usability
Schriften vergrößern, Zeilenabstände und Leerräume anpassen, Buttons ausreichend groß gestalten
- Testen, testen, testen
Vor jedem Versand die Darstellung des Templates auf den gängigsten Endgeräten testen
Denn beim Gestalten eines Newsletter-Templates werden leider oft unsere kleinen, täglichen Begleiter vergessen. Newsletter, die Sie auf dem Desktop hervorragend lesen können, werden auf einem kleinen Bildschirm schnell unleserlich: kleine Schriften, enge Zeilenabstände und unglückliche Umbrüche im Layout sind die Folge.
Eine Studie von Bluehornet ergab, dass 71,2 Prozent der Befragten, E-Mails, die auf einem Handy oder Tablet nicht richtig dargestellt werden, löschen. 16,3 Prozent der Befragten würden sich sogar vom Newsletter abmelden.
Erhöhen Sie die Usability Ihres Templates!
Niemand beschäftigt sich gerne mit einem unübersichtlichen Mailing, bei dem es eine Herausforderung ist, auf einen Link oder Button zu klicken. Um die Usability des Mailings zu steigern, müssen E-Mail-Kampagnen und Landing Pages mobilkonform geplant werden.
600 Pixel beträgt das Standardlayout eines Newsletters. Damit das Template auf einem Smartphone schnell geladen werden kann, muss die Pixel-Breite auf 80 Prozent der ursprünglichen Layout-Größe angepasst werden. Aber auch die Besonderheiten der verschiedenen Gerätetypen und Betriebssysteme dürfen nicht vergessen werden.
Achten Sie bei der Gestaltung Ihres Templates deshalb auf eine klare Struktur. Dabei sollte das Design des Newsletters so einfach wie möglich gehalten werden. Verwenden Sie Bildinhalte statt lange Texte. Zudem sollten Buttons vergrößert werden, um ein einfaches „klicken“ zu realisieren. Auf einem mobilen Endgerät stehen Ihnen zwei Vorschauzeilen, der sogenannte Pre-Header zur Verfügung. Nutzen Sie diese als Verlängerung der Betreffzeile, um die Neugierde des Lesers zu wecken. Beschränken Sie sich aufs Wesentliche und kürzen Sie die Desktop-Version Ihres Templates.
Ein Design für alle Endgeräte
Ein Lösungsansatz, um E-Mails für verschiedene Endgeräte zu optimieren lautet Responsive Design. Die technische Basis für reaktionsfähige Templates bilden HTML5 und, um die notwendigen Media Queries einsetzen zu können, CSS3.
Media Queries erkennen die Bildschirmgröße eines Gerätes unabhängig von der Marke und der Softwareversion und greifen auf die im Vorfeld definierten Regelungen für den jeweiligen Bildschirm zurück. Sie können eingesetzt werden, um beispielsweise das Layout des Mailings zu ändern, die Größe von Text, Bilder und Buttons anzupassen und in einigen Fällen Inhalte zu verstecken oder sogar zwischen Desktop- und mobilen Geräten auszutauschen.
Ein flexibles Raster, das aus festen Umbruchspunkten besteht, sorgt für die Anpassung des Layouts. Die Umbruchspunkte oder auch Breakpoints genannt, werden im CSS-Code gesetzt. Definiert man die Breite beispielsweise auf 550 Pixel, könnte ein passendes Stylesheet geladen werden, sobald die Viewport-Breite kleiner als 550 Pixel wird. Auch Bilder und Videos müssen responsive sein. Die definierten Breakpoints sorgen dann dafür, dass sie in einer alternativen Größe geladen werden.
Nicht alle CSS oder HTML5 Codes funktionieren in Verbindung mit Responsive Design. Harte Umbrüche im Layout sind nur bedingt möglich. Auch mehrspaltige Layouts und bestimmte Provider-Einstellungen können zu Darstellungsproblemen führen. Deshalb ist es wichtig, das Template vor dem Versand ausgiebig zu testen.
Checkliste Mobile Optimierung
- Template-Breite
320 bis 550 Pixel oder 80 % der ursprünglichen Breite
- Call-to-Action
Aufmerksamkeitsstark platzieren und „klickbar“ gestalten (mind. 44 x 44 Pixel)
- Layout
Klar strukturieren und einspaltig gestalten
- Pre-Header
Die beiden Vorschauzeilen als Verlängerung der Betreffzeile nutzen, um die Neugierde des Lesers zu wecken
- Usability
Schriften vergrößern, Zeilenabstände und Leerräume anpassen, Buttons ausreichend groß gestalten
- Testen, testen, testen
Vor jedem Versand die Darstellung des Templates auf den gängigsten Endgeräten testen