Drücke die Tasten ◄ ► für weitere Artikel  

So gestaltet man Responsive HTML-Newsletter

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.

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

190 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
21 Antworten
  1. von Hella am 13.03.2013 (22:37Uhr)

    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

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

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

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

    @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/ ? ;)

  4. von Responsive Webdesign: Auch E-Mails dürf… am 14.03.2013 (17:33Uhr)

    [...] sind denen einer Website-Umsetzung sehr ähnlich. Auf unterschiedlichen Bildschirmen soll die E-Mail optisch überzeugen und den zur Verfügung stehenden Platz optimal ausnutzen. Hinzu kommt eine weitere Besonderheit: [...]

  5. von So gestaltet man Responsive HTML-Newslet… am 15.03.2013 (12:22Uhr)

    [...] on t3n.de Share this:E-MailDiggFacebookStumbleUponDruckenRedditTwitterGefällt mir:Gefällt mir Lade... [...]

  6. von rolandlatzel am 15.03.2013 (12:52Uhr)

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

  7. von Newsletter in Responsive | TYPO3 und TYP… am 15.03.2013 (13:25Uhr)

    [...] Newsletter ist eh und je ein leidiges Thema. Auf der t3n.de ist vor kurzem ein ganz interessanter Artikel über das Thema erschienen. Hier der Link: So gestaltet man Responsive HTML-Newsletter [...]

  8. von Nicolas am 15.03.2013 (21:17Uhr)

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

  9. von michsch am 16.03.2013 (17:12Uhr)

    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?

  10. von Responsive Webdesign: Intuitives Online-… am 22.03.2013 (14:59Uhr)

    [...] So gestaltet man Responsive HTML-Newsletter – t3n News [...]

  11. von Ostergeschenke! Gratis Mobile Email Temp… am 28.03.2013 (13:46Uhr)

    [...] Endgerät die Email geöffnet wird das optimierte Layout an. Natürlich könnt Ihr auch selbst ein optimiertes Mobile Email Template erstellen, mit diesen beiden folgenden habt Ihr es aber um einiges [...]

  12. von Responsive Email Newsletter « Falc… am 24.04.2013 (10:03Uhr)

    [...] anderm auf Touch Optimierung und Retina Display ein. Zudem sind Webfonts im Blogpost “So gestaltet man Responsive HTML-Newsletter” von t3n eines der [...]

  13. von Newsletter optimieren: Mit Top-Inhalt zu… am 30.05.2013 (13:28Uhr)

    [...] So gestaltet man Responsive HTML-Newsletter – t3n News [...]

  14. von E-Mail Marketing: 25 beeindruckende Top-… am 25.07.2013 (14:28Uhr)

    [...] So gestaltet man Responsive HTML-Newsletter - t3n News [...]

  15. von So gestaltet man Responsive HTML-Newslet… am 24.09.2013 (21:05Uhr)

    […] Immer mehr und mehr Nutzer rufen ihre E-Mails unterwegs mit dem Smartphone ab, aktuelle Statistiken sagen sogar im Schnitt sechs Mal pro Tag.  […]

  16. von So gestaltet man Responsive HTML-Newslet… am 24.09.2013 (21:10Uhr)

    […] Immer mehr und mehr Nutzer rufen ihre E-Mails unterwegs mit dem Smartphone ab, aktuelle Statistiken sagen sogar im Schnitt sechs Mal pro Tag.  […]

  17. von Der barrierefreie Newsletter | Blind-Tex… am 18.11.2013 (10:46Uhr)

    […] T3N. So gestaltet man responsive HTML-Newsletter […]

  18. von Marketing: So kriegst du die ersten 100… am 13.03.2014 (16:48Uhr)

    […] können wir euch die Artikel „Darum bestellen eure Kunden den E-Mail-Newsletter ab“ und „So gestaltet man Responsive HTML-Newsletter“ empfehlen. Habt ihr Tipps und Ratschläge wie ein Newsletter außerdem beworben werden könnte? […]

  19. von Mobile E-Mail-Marketing: Das nächste gr… am 17.03.2014 (13:47Uhr)

    […] Aufgrund einer unter Umständen langsamen Verbindung oder wegen des begrenzten Datenvolumens sind Nutzer, die ihre Mails auf dem Smartphone lesen, eher seltener bereit, sich Grafiken herunterzuladen. Daher sollte eine erfolgreiche E-Mail-Kampagne auf den Einsatz von Bildern wann immer möglich verzichten und auf einfache, knappe Texte setzen. Außerdem sollte ein responsives Design für die E-Mail Pflicht sein. Wenn ihr euch mit dem Thema tiefergehend auseinandersetzen möchtet, empfehlen wir euch die Artikel „So funktioniert Responsive E-Mail-Design“ und „So gestaltet man Responsive HTML-Newsletter“. […]

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema Smartphone
Mobile E-Mail-Marketing: Das nächste große Ding?
Mobile E-Mail-Marketing: Das nächste große Ding?

E-Mails werden zunehmend auf mobilen Endgeräten gelesen. Damit wird es wichtiger als je zuvor, auch die eigenen Marketing-E-Mails dahingehend anzupassen. » weiterlesen

GEMA, VG Wort und Co. drohen Tech-Konzernen: Kommt jetzt die Smartphone-Abgabe?
GEMA, VG Wort und Co. drohen Tech-Konzernen: Kommt jetzt die Smartphone-Abgabe?

Die Zentralstelle für private Überspielungsrechte (ZPÜ), die Verwertungsgesellschaften wie GEMA oder VG Wort vertritt, fordert eine Smartphone-Abgabe – und droht notfalls mit einer groß... » weiterlesen

LG G Pro 2: Erste Bilder des Galaxy-Note-Konkurrenten aufgetaucht
LG G Pro 2: Erste Bilder des Galaxy-Note-Konkurrenten aufgetaucht

Während LG die Vorstellung des G Pro 2 für Februar 2014 bestätigt hat, sind im Netz die ersten Bilder des Phablets aufgetaucht. Wir dürfen gespannt sein, wie sich das Riesen-Smartphone gegen die.. ... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen