Immer mehr Nutzer greifen heutzutage von unterwegs auf ihre E-Mails zu. Aktuellen Statistiken zufolge sogar im Schnitt sechs mal pro Tag. Nach einer Auswertung von litmus.com werden seit April 2012 mehr Newsletter auf dem mobilen Gerät anstatt dem Desktop Rechner geöffnet.
Viele Gründe sprechen also dafür sich einmal mit dem eigenen aktuellen Newsletter-Template zu beschäftigen und die Möglichkeiten eines responsive HTML Newsletters zu prüfen.
Auch heute noch setzen zahlreiche Unternehmen auf HTML Newsletter, die keinesfalls mobile optimiert sind. Fakt ist aber auch, niemand möchte den "Wird der Newsletter nicht korrekt dargestellt?" Link wirklich öffnen und hat ein Nutzer erst einmal verinnerlicht, dass die Newsletter eines jeweiligen Unternehmens nicht mobile zu genießen sind, werden diese zukünftig schlichtweg überflogen.
In diesem Artikel ist neben einer Checkliste & Anleitung zur Erstellung kompatibler, mobile friendly responsive HTML Newsletter auch ein Basis-Template zur Veranschaulichung des responsive-Konzeptes enthalten.
Sicherlich einer der Gründe dafür, dass die Unternehmen nur beherzigt das Thema responsive fokussieren, ist die Tatsache, dass man in HTML Newslettern nur begrenzt die neuen Webstandards zum Einsatz bringen kann. E-Mail Clients sind schlichtweg keine Webbrowser und so muss man sich bei der Erstellung eines cross-client kompatiblen HTML Newsletters wieder den HTML Elementen bedienen, die man unlängst abschreiben wollte.
Möchte man also z.B. eine Hintergrundfarbe oder Hintergrundbild definieren, sollte dies in einem Wrapper-Tabellenelement geschehen, da gerade Webmailer Clients wie z.B. Web & GMX Doctype, Head sowie Body ausschneiden. Eine umfangreiche Übersicht zum CSS-Support verschiedener E-Mail Clients gibt es unter campaignmonitor.com oder email-standards.org.
Hat man als Webentwickler hinsichtlich der standardisierten Auflösungen von Desktop Auflösungen und Mobile Devices noch übersichtliche Etappenschritte, fallen die Größenformate in dem ein Newsletter dargestellt wird häufig deutlich unterschiedlicher aus, da die Vorschaufenster durchweg variable Breiten aufweisen. Vom Grundsatz her kann man eine Mindestgröße von 250px erwarten und sollte in der Breite die 600 Pixel Linie als Standard- und Maximalgröße definieren.
Um den HTML Newsletter für mobile Geräte zu optimieren, sollte weiterhin folgendes beachtet werden:
Möchte man die automatische Schriftgrößenanpassung von iOS verhindern, sollte man folgende CSS-Anweisung als Inline CSS formulieren:
body
{
-webkit-text-size-adjust: 100%;
}
Natürlich würde man als Webentwickler nur zu gern von den CSS3 Media-Queries im Newsletter Gebrauch machen. Doch funktioniert die Styleanweisung @media {} nicht als Inline-Style & weil viele Mailclients den Header ersetzen, ist der Support für diese Funktionalität sehr eingeschränkt. Somit fallen z.B. Outlook (Desktop + App) und Gmail (Web + App) bereits raus. Im Android eigenen Mail-Client sowie unter iOS, WindowsPhone (ab 7.5) & Blackberry (ab OS 7) funktionieren Media-Queries hingegen.
@media only screen and (max-width: 480px)
{
/* CSS Styleanweisungen für Geräte mit einer Auflösung von max 480px */
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Responsive HTML Newsletter - Basis Template</title>
</head>
<body>
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{
margin:0px;
padding:0px;
border:0px;
outline:0px;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
body
{
font-family: arial, sans-serif;
-webkit-text-size-adjust:100%;
}
</style>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>Responsive HTML Newsletter - Basis Template</td>
</tr>
</table>
</body>
</html>
Das Viewport Meta Tag sorgt dafür, dass die E-Mail genau so breit ist, wie die Breite des Gerätebildschirms. Um immer die gesamte Bildschirmbreite abzudecken erhält das Table Element eine prozentuale Breite von 100 %. Um unerwünschten Abständen im Outlook zu verhindern sollte border, cellspacing und cellpadding immer auf 0 gesetzt werden.
Wenn der Newsletter umgesetzt ist, sollte dieser in verschiedenen Clients hinsichtlich der Spamerkennung und Kompatibilität getestet werden. Die meisten professionellen Newsletter Versandlösungen wie z.B. CleverReach* bieten eine solche Möglichkeit an. Für die Spam Prüfung kann auch das kostenlose Tool Mailingcheck benutzt werden. Wichtig: Keine Demo Texte nutzen, da diese häufig als Spam erkannt werden und somit kein realistisches Ergebnis darstellen.
* bei diesem Link handelt es sich um einen Affiliate-Link
Wenn mit Newslettern den gewünschten Erfolg erzielen möchte, sollte man den optimalen Versandzeitpunkt für Newsletter-Kampagnen dringend beachten. Newsletter-Marketing gehört zu den bekanntesten und wichtigsten Online-Marketing Kanälen. Durch den Newsletter Versand kann man Kunden perfekt auf Neuigkeiten hinweisen und die Kundenbindung stärken. Bei der Nutzung von Newsletter-Kampagnen sollte man jedoch den optimalen Newsletter Versandzeitpunkt beachten. Dieser […]
Weiterlesen
Vorab: Dieser Artikel ist ganz schön lang. Jedoch sollte jeder, der Interesse am E-Mail Marketing hat, oder gar mal Newsletter anbieten möchte, sich vorher über die Vor- und Nachteile der Newsletter-Dienstleister bewusst werden. Wir haben technische Hintergründe nicht ausgelassen, sodass die Vor- und Nachteile nachvollziehbarer werden – den Beitrag dafür aber entsprechend in die Länge zogen. […]
Weiterlesen
Google Ranking verbessern leicht gemacht: In diesem Blogartikel erfahren Sie, worauf es bei der Website-Optimierung wirklich ankommt und wie Sie die Performance Ihrer Website langfristig verbessern können. Dabei stellen wir Ihnen die beiden Grundpfeiler der Suchmaschinenoptimierung vor, gehen auf die häufigsten OnSite-Optimierungs-Fehler ein und erklären wichtige Ranking-Faktoren, die Ihnen helfen, Ihr Google Ranking zu verbessern. […]
Weiterlesen
