Vielen Dank für Ihre Anfrage!
Kontakt /
Offene Fragen?
schließen
05251 / 69 410 - 00
  • Kostenlose Erstberatung anfordern
  • Unverbindliches Angebot einholen
  • Ihr Wegbereiter für Umsatzwachstum
  • Nachhaltig mehr Bekanntheit erzielen
  • Rentabel und messbar zum Web-Erfolg

* bei diesen Eingaben handelt es sich um Pflichtfelder

Poste den ersten Kommentar

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.

Newsletter auf dem Entwicklungsstand der 90er

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.

Wichtige HTML Elemente eines responsive Newsletters

  • Tabellen (<table>)
  • Überschriften (H1, H2, H3 usw.)
  • Font Tags (<font>)
  • Inline-CSS

Was in HTML Newslettern meistens nicht funktioniert

  • CSS Floating
  • Medieninhalte (Video, Audio, Flash)
  • Formularelemente
  • Java Script
  • Doctype, Head & Body Styles

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.

Weitere Tipps zur Steigerung der HTML-Newsletter-Kompatibilität

  • Damit keine Klassennamen mit dem Webmail Service kollidieren, sollten diese einen seltenen Suffix erhalten, z.B. den Kundennamen.
  • CSS Reset durchführen (alle Paddings und Margins auf 0 setzen, Überschriften CSS Eigenschaften neu vergeben - siehe Beispiel zum Basis-Template unten)
  • Für Abstände anstatt margin lieber auf padding setzen, da margin nur selten richtig interpretiert wird
  • Keine CSS-Kurzschreibweisen benutzen – Anstatt font also font-size, font-family einzeln aufnehmen
  • RGB Farbwerte vermeiden, Hexadezimalwerte nutzen, Hochkommata in Schriftart Definition vermeiden, Aus font-family:"Schrift Bezeichnung" wird font-family:Schrift Bezeichnung

Die Auflösung der responsive HTML Newsletter

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.

Touch friendly Design

Um den HTML Newsletter für mobile Geräte zu optimieren, sollte weiterhin folgendes beachtet werden:

  • Insbesondere Call-to-Action-Buttons sollten genügend Abstand zueinander besitzen. Apple bezeichnet in seinen Design-Guidelines die minimale Touch-Area auf 44x44px.
  • Minimale Schriftgröße 14px für Fließtext und 22px für Überschriften.
  • Betreffzeilen sollten kurz gehalten werden (ideal 25 Zeichen).
  • Anstatt "Wird der Newsletter falsch dargestellt? Dann hier klicken >" sollte ein "Im Browser öffnen" genutzt werden. Je länger der Text vor dem eigentlichen Inhalt, desto mehr kann sich dieser bei kleinen Viewports nach unten verschieben.
  • Da man die Lichtverhältnisse zum Zeitpunkt des Betrachtens bei mobile Nutzern schlecht einschätzen kann, sind kontrastreiche Elemente zu empfehlen. So sollten z.B. markante Linkfarben genutzt 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%;
}

CSS3 Media-Queries im Newsletter

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 */
}

Basis Layout für einen responsive HTML Newsletter

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

Erstellten HTML Newsletter testen

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.

Hilfreiche Tools, Frameworks und Templates

* bei diesem Link handelt es sich um einen Affiliate-Link

Können wir Ihnen helfen?Wir beantworten gerne Ihre Fragen!

* bei diesen Eingaben handelt es sich um Pflichtfelder

Jetzt Online-Marketing Newsletter abonnierenZukünftig kostenlose Newsletter unserer Experten erhalten!

  • Wir teilen unser Know-how mit Ihnen
  • Kostenlose Inhalte
  • Tipps & Tricks zu Marketing, Design & E-Commerce

Meinungen zum Artikel

Hinterlassen Sie einen Kommentar

Unsere Kunden-Referenzen Mehr als 15 Jahre Expertise in unterschiedlichen Branchen

Stadt Paderborn Logo
DieboldNixdorf Logo
H&M Logo
Naturstein Risse Logo
KRENZ Autohaus und Werkstatt Logo
StadtwerkeBielefeld Logo
testsiegertarife Logo
Uni-Paderborn Logo
Zecher Logo