Responsive Newsletter – Einschränkungen und Möglichkeiten

2. Oktober 2015 at 16:28
beitrag-responsive-emails

Die Anzahl an E-Mails die mit Smartphones geöffnet werden ist in den vergangenen Jahren stark gestiegen

 

Immer mehr Nutzer rufen ihre E-Mails unterwegs mit dem Smartphone ab, aktuelle Statistiken besagen sogar dass bis zu sechs Mal pro Tag mit einem mobilen Endgerät in das Postfach geschaut wird. Laut litmus.com wurden seit April 2012 mehr Newsletter E-Mails auf dem Smartphone als auf dem Desktop-PC geöffnet. In den letzten 18 Monaten stiegen die Öffnungsraten auf mobilen Geräten auf 123 Prozent. Es gibt also viele Gründe, um sich einmal die Möglichkeiten für responsive Newsletter genauer anzuschauen.

Technische Einschränkungen

Wer sich mit der Problematik „HTML-Newsletter“ schon einmal näher beschäftigt hat, wird wissen, dass das Erstellen von HTML-Newslettern nichts mit der modernen Webentwicklung zu tun hat, sondern eher nach dem Prinzip „Coding like 1999“ funktioniert.

Um eine übereinstimmende Darstellung in den verschiedenen Clients zu gewährleisten, muss heutzutage noch auf veraltete Techniken, wie z.B. verschachtelte Tabellen, Font-Tags und Inline-CSS zurückgegriffen werden. Zudem ist keine CSS-Positionierung über floats möglich.

Medieninhalte, wie z.B. Video, Aufio und Flash können in HTML-Newslettern ebenfalls nicht wiedergegeben werden. Desktop-Mail-Clients können keine Formulare und aus Sicherheitsgründen auch kein <script> verarbeiten. Eine weitere Hürde die beachtet werden muss, sind nutzerspezifische Einstellungen. Durch die verschiedenen möglichen Fensteransichten werden jeweils unterschiedliche Teile eines Newsletters im Vorschaufenster angezeigt. Grundlegend kann von einem Fensterausschnitt mit einer Größe von 250x250px ausgegangen werden. Wichtig ist, dass der Newsletter eine Gesamtbreite von 550-600px nicht übersteigen sollte, um ein lästiges horizontales Scrollen zu vermeiden.

Optimierte Darstellung für mobile Endgeräte

Möchte man nicht so schnell auf komplett responsive Layouts umstellen, sollte man allerdings die Meta-Angabe für Viewport in den <head> einfügen um damit die Darstellung noch ein wenig zu optimieren.

<meta name="viewport" content="width=650">

Hierdurch wird die Ansicht in der Mail-App auf 650px Breite gezoomt, da iOS sonst eine Breite von 980px verwenden würde, was die E-Mail demzufolge sehr klein darstellt. 650px ist in dem Fall die Breite des Inhaltscontainers, so dass die Newsletter E-Mail auch optimal in Outlook & Co. dargestellt wird.

Für die Flexibilität der Inhaltscontainer verwenden wir prozentuale Breiten und begrenzen diese wiederum mit einer Maximalbreite. Als Beispiel definieren wir den Inhalt mit CSS-Inline-Styles auf maximal 600px.

<div style="width: 100%; max-width: 600px;"></div>

Für eingebundene Bilder gilt die gleiche Vorgehensweise, die man auch für Responsive Websites anwendet. Flexible Bilder mit CSS erreicht man indem man eine prozentuale Breite definiert:

img {max-width: 100%; height: auto;}

Eine Einbindung eines Bildes in den HTML-Newsletter könnte so aussehen:

<img style="-ms-interpolation-mode: bicubic; width: 100%; max-width: 600px; display: block; outline: none;" src="image.jpg" alt="Alt-Texte nicht vergessen!" width="“Wert“" height="“Wert“" border="0" />

Schon passt sich das Bild auf die Größe des Containers an. Die CSS- Anweisung -ms-interpolation-mode: bicubic; hilft im Outlook die Qualität der skalierten Bilder zu erhöhen, das allerdings nur bis einschließlich Internet Explorer 8.

@Media Queries

Der Support von @media queries ist zurzeit noch suboptimal. Android, iOS sowie WindowsPhone ab 7.5 und Blackberry ab OS 7 unterstützen @media {} und können so optimierte Newsletter empfangen. Leider unterstützen die Desktop-Anwendung Outlook & Co. keine media queries, selbst die Mail-Anwendung auf Microsofts Surface Tablet nicht. Gmail unterstützt weder in der Browser-Anwendung, noch in der Android-App media queries, da der <head> Bereich aus der Mail entfernt wird und @media im Style-Attribut nicht funktioniert. Auf älteren Android-Geräten ist der Support von CSS3-Eigenschaften leider etwas fehlerbehaftet und somit funktioniert der folgende media query verlässlich nur auf neueren mobilen Devices:

@media only screen and (max-width: 480px) { /* your mobile CSS */ }

Yahoo! Mail, das vor allem international noch häufig verwendet wird, gewichtet CSS im @media-Block höher als Inline-Styles und somit wird immer die mobile Variante darstellt. Um diesen Bug zu umgehen muss man die Attribut-Selektoren im <style> -Block verwenden. Das ist nicht die schönste Variante, aber es funktioniert.

Ähnlich wie bei den media queries ist es auch bei der Verwendung von Webfonts. Sie werden nur von modernen Mail-Clients unterstützt, aber auch hier sollte man die Performance im Hinterkopf haben. Das Nachladen der Schrift von Google Fonts im mobilen Netz kann einige Zeit beanspruchen. Die Einbindung ist aber recht simpel:

<style>@import url(http://fonts.googleapis.com/css?family=Merienda); /* All your usual CSS here */ </style>

 

Fazit:

Man kann schon mit kleinen Änderungen einen mobile-freundlichen Newsletter an seine Kunden versenden. Wenn man aber einen großen Geschäftsumsatz durch Newsletter-Marketing erzielen möchte, sollte man sich mit der Optimierung für mobile Endgeräte beschäftigen um hier das Optimum raus zu holen.

Nützliche Quellen sowie fertige Vorlagen findet Ihr hier:

mailChimp: http://templates.mailchimp.com/?_ga=1.133813318.975245083.1443443579

CampaignMonitor: https://www.campaignmonitor.com/blog/

StyleCampaign: http://stylecampaign.com/blog/