Vorheriger Artikel Nächster Artikel

So gestaltet man Responsive HTML-Newsletter

Immer mehr und mehr Nutzer rufen ihre E-Mails unterwegs mit dem 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.

So gestaltet man Responsive HTML-Newsletter

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.

Designing for Touch

Grundsätzlich sollte man immer seine bisherigen Nutzer-Statistiken bei der Entscheidung für oder gegen einen responsive HTML-Newsletter zu Rate ziehen. Wie viele Nutzer öffnen Newsletter bereits auf dem mobilen Endgerät? Wie sind die Konversionsraten vom Smartphone gegenüber Desktop? Die Statistiken von Litmus.com, einem Anbieter für E-Mail-Analytics zeigen, dass die Mail-App des iPhone mittlerweile die Top-10 der Mail-Clients mit 23% (für das erste Öffnen einer E-Mail) anführt und somit das bisher meistbenutzte Mail-Programm Microsoft Outlook abgelöst hat. Platz 3 mit 12% belegt das iPad. Der Trend geht also auch bei Newsletter-Mailing mehr zur mobilen Nutzung.

Für die Gestaltung von touchoptmierten Newsletter sollte man einige Grundsätze beachten, die sich aus der Webentwicklung ableiten lassen.

Die minimale Touch-Area beziffert Apple in seinen Design-Guidelines mit 44x44px (Microsoft geht hier von min. 38x38px aus). Vor allem die Call-To-Action-Buttons sollten genügend Abstand zueinander haben, sodass nicht unabsichtlich ein falscher Link gedrückt wird. In dem Zusammenhang sollten man auch darüber nachdenken, ob man nicht ganze Passagen verlinkt oder Button über die gesamte Breite streckt.

Schriftgrößen sollte man auf mindestens 14px für Fließtext und 22px für Überschriften erhöhen. Hierbei sollte man natürlich zwischen der optimalen Schriftgröße und der Optimierung für den "ersten Blick" abwägen. Der Viewport auf Smartphones ist natürlich viel kleiner als bei Desktop- Anwendung. Darum sollte man auch die Betreffzeilen möglichst kurz halten (25 Zeichen), da sie bei zusätzlicher Länge unnötigen Platz einnimmt. Gleiches gilt für Texte wie "Öffnen im Browser", die noch vor dem eigentlichen Logo platziert sind. Je länger die Texte sind, umso mehr schieben sie die wichtigen Informationen nach unten und möglicherweise aus dem Viewport.

Lange Betreffzeilen nehmen auf dem Smartphone-Display zu viel Platz ein, wie diese beiden Beispiele zeigen.

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:

body {
-webkit-text-size-adjust: 100%;
}


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.

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

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.

<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

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

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

setzt.

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

<img
style="-ms-interpolation-mode: bicubic; width:90%; max-width:550px; max-height:237px"
border="0"
alt="Alt-Texte nicht vergessen!"
align="middle"
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:

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

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

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:

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

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

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.

Über den Autor

Sven Wolfermann ist als freier Frontend-Entwickler mit seiner Firma maddesigns für Agenturen und Endkunden tätig. Er berät bei der Umsetzung von Responsive Webdesign, arbeitet mit Webstandards, , CSS3, jQuery sowie Sass & Compass und ist seit 2009 zertifizierter TYPO3 Integrator.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
6 Antworten
  1. von Hella am 13.03.2013 (22:37 Uhr)

    Hallo Sven,
    danke, dass war mal wieder sehr aufschlußreich.
    Erklärungsbedürftig ist für mich nur der letzte Satz: Gilt das für den Content der Mail oder ganz generell?
    Ich würde mich über Hinweise dazu freuen!
    Viele Grüße,
    Hella

    Antworten Teilen
  2. von Holger am 14.03.2013 (07:02 Uhr)

    Richtig Güter Artikel und grundsätzlich eine sehr interessante Idee.

    Schon witzig, was Microsoft einem da wieder für Steine in den Weg legt, vor allem, dass neuere Versionen einfach mal Dinge, die in früheren Versionen funktionierten, nicht mehr unterstützen -.-

    Antworten Teilen
  3. von Sven Wolfermann am 14.03.2013 (08:43 Uhr)

    @Hella QR-Codes? Das bezieht sich auch Emails. In der freien Wildbahn auf Plakaten und so, wo man auch bequem rankommt, ist das schon ok. Kennst du http://wtfqrcodes.com/ ? ;)

    Antworten Teilen
  4. von rolandlatzel am 15.03.2013 (12:52 Uhr)

    Schöner Artikel, Sven! Danke für die vielen Praxis-Beispiele.

    Antworten Teilen
  5. von Nicolas am 15.03.2013 (21:17 Uhr)

    guter Artikel! Best Practice für Responsive Design, den Lufthansa Newsletter abonnieren.

    Antworten Teilen
  6. von michsch am 16.03.2013 (17:12 Uhr)

    Eine gute Übersicht, welcher Client welche Features unterstützt oder eben nicht unterstützt, bietet das email standards project: http://www.email-standards.org/

    Zum Start kann ich das HTML Email Boilerplate (http://htmlemailboilerplate.com/) empfehlen, welches sich unter anderem auch den MailChimp Reset von Fabio Carneiro zu Nutze macht. Der Quelltext ist gut dokumentiert, so dass man auch direkt nachlesen kann, weshalb etwas auf welche Weise gelöst wurde.

    @Sven:
    1. Könnte man mit Media Queries nicht auch mehrspaltige Tabellen einspaltig darstellen? Das müsste doch mit td { display: block; } funktionieren, oder? Natürlich nur in Clients, die auch Media Queries unterstützen.
    2. Wenn Google Mail den -Bereich entfernt, was passiert dann mit im -Bereich? Wird der ignoriert bzw. interpretiert Google Mail dort auch keine Media Queries?

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Smartphone
Jetzt ein kaltes Bier: Kickstarter-Projekt macht Hardware-Hacker zu Braumeistern
Jetzt ein kaltes Bier: Kickstarter-Projekt macht Hardware-Hacker zu Braumeistern

Mit „Bieree“ soll es eine Möglichkeit geben, um nicht nur in den heimischen vier Wänden eigenes Bier zu brauen. Der Prozess soll auch mit dem Smartphone gesteuert werden können. » weiterlesen

Chatten ohne Internet: Berliner Startup will das Firechat-Prinzip auf Messen bringen
Chatten ohne Internet: Berliner Startup will das Firechat-Prinzip auf Messen bringen

Wo das mobile Internet nicht funktioniert, entstehen immer häufiger Spontan-Netze von Smartphones in Eigenregie. Ein Berliner Start-up hat nun eine Technik entwickelt, die zwischen allen Geräten … » weiterlesen

Bau dir dein eigenes Siri: api.ai bietet dir ein Sprach-Interface für Apps und Gadgets
Bau dir dein eigenes Siri: api.ai bietet dir ein Sprach-Interface für Apps und Gadgets

Mit api.ai können Entwickler ihre Apps auf einfache Art und Weise um Spracherkennungsfunktionen erweitern. Die Plattform eignet sich im Zusammenspiel mit iOS, Android und dem Web. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen