burger

Was bedeutet eigentlich Responsive Newsletterdesign?

Es gibt Leute, die ihre E-Mails auf dem Smartphone oder Tablet lesen. Logischerweise hat eine HTML E-Mail dort weniger Platz – weil ja das Display kleiner ist. Daher kommt das Layout, das auf dem Desktop total okay aussieht, auf diesen kleineren Geräten halt nicht so gut. Daher macht man das Layout responsive.

Responsive heißt, es bricht um, wenn das Fenster größer oder kleiner wird, sodass Elemente sich verschieben, größer werden, wegfallen usw. – eben so, dass die E-Mail in jeder Größe gut aussieht. So eine HTML E-Mail mit responsive Layout umzusetzen, ist leider recht umständlich, zumal HTML E-Mails generell schon schwierig sind, da aus irgendeinem Grund unheimlich viele Mailclients kein vernünftiges HTML und CSS können.

Die Problematik mit den Mailclients geht soweit, dass man auf HTML 1 zurückfällt und allen ernstes Tabellenlayouts verwenden muss. Die werden riesengroß, unübersichtlich, umständlich und nicht schön. Viele CSS-Eigenschaften sind nicht bekannt, es gibt teilweise Clients, die CSS komplett rauswerfen, daher muss man Inline-Styles verwenden. Das heißt, das Element, das man stylen möchte, bekommt ein Style-Attribut, wo man das CSS für dieses Element reinschreibt. Und das macht man gewöhnlich eigentlich nicht.

Es gibt Clients, die Media-Queries rauswerfen, welche für Responsive Design aber relativ wichtig sind, da man mit ihnen verschiedene Styles für verschiedene Größen festlegt. Dazu gehören auch Gmail und Outlook. Verschiedene Clients gewichten gleiche CSS-Selektoren unterschiedlich. Gewisse Clients stellen Bilder nur dar, wenn sie gerade Lust dazu haben. Outlook schafft es nicht, Bilder zu skalieren und stellt sie einfach in der Größe dar, wie sie wirklich sind. Einige Clients stellen keine Hintergrundbilder dar. Außerdem muss man so Sachen wie Spacer-Gifs verwenden. Man kann auch keine externe CSS-Datei einbinden und Javascript sowieso nicht. Man sollte eigentlich keine Div-Tags und P-Tags verwenden.

Und dennoch: Obwohl die Mail Clients es einem wirklich nicht leicht machen, kann man es natürlich trotzdem schaffen, einen akzeptablen HTML Newsletter zu bauen. Man ist in seinen Möglichkeiten halt eingeschränkt, muss teilweise auf unschöne Tricks zurückgreifen und ist am Ende ziemlich entnervt. Aber es geht.

So nutzen wir beispielsweise Inline-Styles. Das ist nicht schön. Das macht man nicht, es ist umständlich und unübersichtlich und ein einfaches Style-Tag, in dem das ganze CSS drinsteht, ist viel besser. Aber manche Clients werfen das raus. Dazu kommen dann natürlich alle Eigenschaften, die unterstützt werden.

Eine Liste, die so etwas auflistet, gibt es zum Beispiel hier: www.campaignmonitor.com/css/

Darüber hinaus gibt es da seltsame Sachen mit mehrfachen Media-Queries und Important-Hacks und dazu noch Attribute im tag, wie width und height und align und sonst was, was man eigentlich nicht mehr so unbedingt benutzt. Jedenfalls läuft es irgendwie darauf hinaus, dass man ein und dieselbe Sache mehrfach auf verschiedene Weise schreibt, damit irgendwann tatsächlich in so 3/4 der Clients das passiert, was man wollte und es ist ein Riesenaufwand.

Hintergrundbilder gilt es zu vermeiden, oder zumindest nur solche auswählen, bei denen es nicht so auffällt, wenn man stattdessen einfach eine Hintergrundfarbe nimmt. Bitte keine Links auf Bildern!

Wenn man den Newsletter soweit aufgebaut hat, dass er im Browser gut aussieht, kann man ihn in verschiedenen E-Mail Clients testen. Dafür gibt es so Tools, wie zum Beispiel Litmus. Da sieht man dann alle möglichen Fehler, die man dann korrigieren darf.

Litmus ist ein praktisches Online-Tool, was Geld kostet. Man gibt Litmus den HTML-Quelltext von der E-Mail, die man testen möchte und bekommt nach ca. 10 min. Screenshots davon, wie alle möglichen E-Mail Clients diese Mail darstellen. So kann man überprüfen, ob die E-Mail überall gut aussieht, was meistens erst einmal nicht der Fall ist. Dann stimmen irgendwelche Schriften oder Abstände nicht, Bilder sind nicht da oder in der falschen Größe, eventuell funktioniert das Responsive Design nicht, weil man den Viewport nicht gesetzt hat oder was auch immer. Ich habe noch nie erlebt, dass es überall perfekt war. Lotus Notes und Blackberry 4 muss man übrigens nicht mal mehr testen, das wird eh nichts.

Grundsätzlich gilt also: Versuchen, das Layout möglichst HTML(1)-freundlich zu machen und das HTML möglichst HTML freundlich. Das wäre schön. Und nicht so viel Inhalt, wenn‘s geht. Haltet das Teil einfach simpel. Und nicht aufregen, wenn es nicht überall gleich aussieht – das kann es nicht.

Quellen:

Hashtags
  • Technik
  • E-Mail Marketing
0 Kommentar(e)

Ihr Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Mit * markierte Felder sind Pflichtfelder.