Responsive Newsletter Design: E-Mail Templates richtig gestalten

Responsive Webdesign ist mittlerweile von der Kür zur Pflicht geworden. Wer 2014 Informationen ins Netz stellt, *muss* sicherstellen, dass seine Text, Bilder und Videos nicht nur auf Desktop-Computern und Laptops, sondern auch auf mobilen Devices optimal dargestellt werden, und zwar unabhängig von der Displaygröße. Das gilt sowohl für Webseiten als auch für Newsletter. Doch während für erstere zahlreiche Open Source und Premium Frameworks sowie fertige Templates existieren, sieht die Sache bei responsiven Newslettern wesentlich komplizierter aus – denn E-Mail Clients gehorchen leider anderen Gesetzen als Webbrowser.

Newsletter in Zeiten von Facebook?

Im Zuge des Social Media Hypes sind Newsletter in den letzten zwei Jahren ein wenig aus dem Fokus des Interesses gerückt. Nun, da die letzten Viral-Wellen verebbt sind, werdet auch ihr Marketingspezialisten erkennen, dass man Facebook-Reichweite nicht geschenkt bekommt. Im Vergleich zur mittlerweile unterirdisch miesen Sichtbarkeitsquote von Facebook-Page-Postings sind selbst durchschnittliche Newsletter-Öffnungsraten geradezu eine Offenbarung. Die Vorteile liegen im Vergleich zu Facebook also klar auf der Hand:

• Man muss nicht für jeden Newsletter extra Münzen einwerfen, damit ihn die Abonennten zu sehen bekommen.
• Die Gestaltungsfreiheit ist höher als auf Social Media Plattformen.
• E-Mail ist ein asynchrones Medium – ungelesene Mails verschwinden nicht einfach von allein von der „Startseite“ des Mail-Clients.

Der einfachste Weg zum Multi-Device-Newsletter

Auf Themeforest findet man zahlreiche kostenpflichtige Newsletter-Templates, die sich mit ein wenig Programmierkenntnis an eigene Bedürfnisse anpassen lassen oder sogar zusätzlich eine für den Einsatz mit Mailchimp vorbereitete Version mitbringen.

Recht dünn wird die Luft dann aber bei kostenlosen responsiven Newsletter-Templates. Zwei Anbieter haben sich bei mir sehr bewährt: die Frameworks Antwort und Zurb’s Ink erfordern zwar ein wenig Einarbeitung, stellen aber sicher, dass die eigenen Newsletter in allen Clients gleich aussehen, gut lesbar bleiben und ermöglichen die angesagten Grid-Layouts: auf ausreichend breiten Bildschirmen werden die Inhalte mehrspaltig angezeigt, Smartphones ordnen die einzelnen Boxen untereinander an.

Für den datenschmutz.newsletter verwende ich übrigens aweber und kopiere meine lokal optimierten Templates direkt ins Source-Code Feld.

Kaum zu glauben, dass es 2014 dermaßen kompliziert ist, eine HTML-E-Mail so zu verschicken, dass zumindest 99% aller Empfänger das gewünschte Resultat angezeigt bekommen. Dagegen ist Cross-Browser-Testing geradezu ein Kinderspiel. Wer gerne selbst Hand an HTML-Code anlegt und sich tiefer in die Materie einarbeiten will, dem empfehle ich den Artikel Create E-Mails for any Device

Allen anderen rate ich, die mobile Internetnutzung nicht nur bei der Gestaltung der Webpage, sondern auch beim Design des eigenen Unternehmens-Newsletters unbedingt mit zu bedenken und bei der Online-Agentur des Vertrauens mal nachzufragen, ob das hübsche Corporate E-Mail Design auch abseits des Standrechners eine gute Figur macht.

Richtlinien für responsive E-Mail Templates

Der folgende Teil dieses Beitrags enthält ein paar technische Hintergrundinformationen zur Anpassung und Erstellung eigener Newslettertemplates. Zum Verständnis sind grundlegende Kenntnisse über HTML und CSS unbedingt erforderlich. Wer mit der Materie vertraut ist, wird spätestens nach der Lektüre verstehen, warum E-Mail Templates schon so vielen Designern schlaflose Nächte bereitet haben.

Tables statt divs

Was haben wir uns Mitte der 90er mit Tables herumgeärgert! Kaum vorstellbar, dass vor dem Zeitalter des Diversion-Tages >div< der HTML-Befehl >table< die einzige Möglichkeit war, um Spaltendesigns zu realisieren. Doch totgesagte leben länger, denn viele Versionen von Microsofts weit verbreitetem Mailmanager Outlook verstehen nach wie vor lediglich Tabellen. Also lautet das Motto frei nach Prince: „We’re coding like it’s 1999!“

Du sollst semantisches HTML meiden

h1, h2, h3, p und Co. haben in E-Mail Templates ebenfalls nichts verloren. Während der korrekte Gebrauch dieser semantischen, also strukturierenden, Tags für Webseiten ausgesprochen wichtig ist, sollte man bei Newsletter-Templates auf eigene Klassen zurückgreifen und sogar Absätze durch ein doppeltes <br> markieren. Denn viele Clients, so etwa Hotmail, nutzen die semantischen Tags für ihr eigenes Markup und überschreiben so die vorgesehenen Styles.

Das CSS gehört ins Template-File

Inline-CSS gilt in der Webprogrammierung als verpönt, ist im Newsletterbereich aber ein Muss. So gut wie kein Client lädt externe Stylesheets, daher müssen alle Definitionen direkt in die HTML-Datei reingeschrieben werden. Das kann ganz schön lästig sein, wenn man bestehende Templates für die Newsletter-Nutzung optimiert. Abhilfe schaffen Mailchimps CSS Inliner Tool oder der Ink Inliner. Bei wandeln HTML-Dateien mit externen CSS-Sheets in eine Inline-Version um. ACHTUNG: der Verweis aufs CSS-Sheet muss dabei absolut gesetzt sein.

Tables mit display:block statt float gestalten

Outlook unterstützt kein float-Attribut, also sollte man sich auf align=“left“ beschränken, wenn es darum geht, Bilder und Tabellen nach Wunsch anzuordnen. Die gute Nachricht am Schluss: es ist grundsätzlich möglich, Tabellen dazu zu bringen, sich wie Block-Elemente zu verhalten. Dazu ist folgende CSS-Definition im Head des Templates einzufügen:

@media only screen and (max-width : 600px) {
    td[class="force-col"] {
        display: block;
    }
}

Mehr technische Details gefällig? Ich unterstütze Sie gerne bei der Umsetzung Ihres Newsletters.