Responsive Newsletter Design

Immer mehr und mehr Nutzer rufen ihre E-Mails unterwegs mit dem Smartphone ab, aktuelle Statistiken sagen sogar im Schnitt sechs Mal pro Tag. Zudem werden seit April 2012 laut litmus.com mehr Newsletter-E-Mails auf dem Mobile-Gerät als am Desktop-Rechner geöffnet. In den letzten 18 Monaten stieg die Öffnungsrate auf mobilen Geräten um 123 Prozent. Viele Gründe also, um sich einmal die Möglichkeiten für responsive HTML-Newsletter genauer anzuschauen.

Responsive Webdesign setzen mittlerweile schon viele Webentwickler ein. Die Grundlagen wie Flexibles Layout, sich anpassende Bilder und CSS3 media queries sind vielen sicherlich schon vertraut. Christoph Zillgens hat ein sehr gutes Buch zum dem Thema geschrieben, mit dem man einen einfachen Einstieg in die Thematik bekommt, wenn man sich noch nicht näher mit Responsive Webdesign auseinander gesetzt hat.

Doch wer sich mit der Problematik “HTML-Newsletter” schon 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 Motto “Coding like 1999″ funktioniert. Einen umfangreichen Artikel mit allgemeinen Tipps zu diesem Thema kann man auf http://maddesigns.de/html-newsletter-1030.html finden.

Des Weiteren ist zu empfehlen den Kontrast zu erhöhen, da man die Umgebung des Nutzen nicht kennt. Außerdem sollten markante Linkfarben verwendet werden. Ein CSS-Tipp um die automatische Schriftgrößenanpassung von iOS zu verhindern:

 

  1. body {
  2. -webkit-text-size-adjust: 100%;
  3. }
  4. 

Microsoft hat die spezifische Webkit-Anweisung auch für WindowsPhone ab Version 7.5 integriert. Mit diesen Anpassungen hat man schon die Usability erhöht und kann möglicherweise die Konversionsrate steigern.

Responsive Table-Layout

Möchte man nicht oder kann 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.

 

  1. <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 suggerieren würde, was die E-Mail demzufolge sehr klein darstellt. 650px ist in dem Fall die Breite Inhaltscontainers, so dass die Newsletter E-Mail auch optimal in Outlook & Co. dargestellt wird.

Einige Newsletter-Versender bieten bereits einen Link zur mobile-optimierten Version ihres Newsletters an, wie zum Beispiel HRS.

HRS Desktop Mobile Version

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 550px.

 

  1. <div style="width:90%; max-width:550px">

Man sollte sich auch über ein einspaltiges Layout Gedanken machen. Die Umsetzung ist recht einfach und man kämpft nicht so schnell mit den Layout-Bugs der Mail-Clients.

Mit mehrspaltigen Layouts sollte man vorsichtig umgehen, hier muss man viel testen. Outlook.com sowie Hotmail unterstützen CSS-Floating sowie Margins nicht mehr. Quelle: http://www.campaignmonitor.com/blog/post/3921/outlook.com-drops-margin-and-float-support-entirely So ist es also nicht möglich, ein zweispaltiges Layout mit CSS3 media queries zu einem einspaltigen Layout umzuformatieren. Zweispaltige Tabellen lassen sich leider auch nicht umbrechen.

Responsive Images

 

twitter comp
Responsive E-Mail-Newsletter sehen geräteübergreifend gut aus.

 

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

 

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

setzt.

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

 

  1. <img
  2. style="-ms-interpolation-mode: bicubic; width:90%; max-width:550px; max-height:237px"
  3. border="0"
  4. alt="Alt-Texte nicht vergessen!"
  5. align="middle"
  6. src="image.jpg">

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.

 

 

CSS3 Media-Queries

Die Downloadgröße der E-Mail wird mit der Verwendung von zusätzlichem CSS für mobile optimierte Newsletter größer, das sollten Webworker bedenken. Sonst kann sich die Menge des CSS schnell verdoppel. Der Support von @media queries ist zudem noch suboptimal. Android, iOS sowie WindowsPhone ab 7.5 und Blackberry ab OS 7 unterstützen @media {} und können so optimierte Newsletter-Kampagnen empfangen. Leider unterstützen die Desktop-Anwendung Outlook & Co. keine media queries, selbst die 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 buggy und es bleibt festzuhalten, dass folgender media query verlässlich für eine Anpassung auf mobile Devices funktioniert:

 

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

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 den Attribut-Selektoren im <style>-Block verwenden. Das ist nicht die schönste Variante, aber es funktioniert.

 

  1. @media only screen and (max-width: 480px) {
  2. table[class=table], td[class=cell] { width: 300px !important; }
  3. table[class=promotable], td[class=promocell] { width: 325px !important; }
  4. }

Webfonts in Newslettern

Webfonts werden zwar in 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 recht simpel:

 

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

Laut Campaignmonitor unterstützen iOS Mail, Apple Mail, Android und Thunderbird Webfonts, Outlook 2000 auch, die neueren Version sowie Outlook.com leider nicht.

 

webfonts in email
Diese E-Mail-Clients unterstützen Web-Fonts.

 

Fazit

Auch mit kleinen Änderungen kann man bereits ein mobile-freundlichen Newsletter an seine Kunden senden. Wer allerdings einen großen Geschäftsumsatz durch Newsletter-Marketing erzielt, sollte sich dringend mit der Optimierung für mobile Endgeräte beschäftigen und hier das optimale herausholen. Sehr gute Quellen sowie fertige Vorlagen-Templates bieten die Newsletter-Dienste MailChimp und Campaignmonitor , sowie der Blog von STYLEcampaign . Ganz wichtig ist selbstverständlich, dass die Landingpage, die in der Newsletter-Kampagne beworben wird auch mobile-optimiert ist. Und als letzte Regel: Keine QR-Codes verwenden. Niemals.

 

 

 

gefunden bei: http://t3n.de/news/responsive-html-email-newsletter-446979/

more: http://maddesigns.de/html-newsletter-1030.html