Directors Cut: 10 Tipps für Email-Newsletter 2018

Wir können wir uns heute auf die Browser verlassen, doch die Unterschiede zwischen Emailprogrammen sind ein Höllenschlund.

Auch in der Ära der Social Media ist der Newsletter ein wertvolles Marketinginstrument, persönlicher als eine Facebook-Seite und individueller als ein Post bei Twitter. Während wir bei Twitter, Facebook & Co. damit rechnen müssen, dass Tweets und Posts an der Mehrzahl der Follower und Friends vorbei rauschen, prüfen wir den Posteingang morgens in der Bahn auf dem Handy, in der Mittagspause mit einem Webmailer, nach Feierabend auf dem Notebook, auf Geschäftsreise und im Urlaub mit dem iPad und nehmen den Header der Email immer wahr – auch rückblickend.

Ein Newsletter ist kein einfaches Spiel

Gleich zu Anfang müssen wir mit den webbasierten Email-Anbietern wie GMAIL.COM und WEB.DE rechnen. Gmail zeigt heute zwar Bilder von Haus aus an und hat keine Vorbehalte gegen HTML-formatierte Emails, aber der Benutzer schaltet die Bildanzeige auf den Handy evtl. aus: https://support.google.com/mail/answer/145919?hl=de
Und nicht nur am Handy schalten viele Benutzer die Bildanzeige aus, denn sie verrät Spammern, dass der Emailaccount noch lebt.

Um Grafiken und Bilder in der Email nicht direkt zu laden, hat das Mailprogramm des Macs in den Einstellungen unter Darstellung die Option
Entfernte Inhalte in Nachrichten laden deaktiveren. Jede Email mit Bildern, die von einem externen Server stammen, zeigt oben den Button Entfernte Inhalte laden.

Die ausgebremste HTML-Email

Im Grunde genommen haben sich die Richtlinien für Email-Newsletter seit 2007 kaum geändert:
Keine object-Tags, kein HTML-Video, keine iFrames, keine Formulare, kein Script … diese Elemente passieren die Grenze zum Email-Empfänger nicht auch nur halbwegs zuverlässig. Video in Emails lief zwar mal eine Weile lang, aber der Sicherheit zuliebe und wegen der Spamfluten ist das Video wieder außen vor, es sei denn, es landet glücklich in Apple Mail (Apple hatte Video in Emails zwar 2014 mit iOS 8 Videos rausgenommen, aber mit iOS10 wieder eingesetzt). Also nicht auf Bilder verlassen, sondern lieber auf nützlichen Text setzen.

Email-Newsletter: To be resonsponsive or not to be

Für eine lange Zeit waren HTML-Tabellen im Email-Newsletter die angesagte Technik – auch noch lange nach dem Aussterben der Tabellen für das Layout. Auch wenn der überwiegende Teil aller Emails seine Leser auf dem Handy erreicht, sind HTML-Tabellen immer noch eine Basis für das Layout des Email-Newsletters.

Der HTML-Newsletter muss auf dem Handy ein gutes Bild abgeben, spannend aufgebaut und gut zu lesen sein. Dafür muss kein kompliziertes Breakpoint-basiertes Layout mit Media Querys herhalten. Mit wenigen Maßgaben kommt der Newsletter auch im Emailprogramm elegant herüber.

• Prozent (%) funktioniert gut im Emailprogrammen,
• von »em« lässt man besser die Finger.
• Bilder für Buttons sind sowie out, dafür steht uns heute border-radius beiseite.

Schriften

@font-face wird nur von Apple Mail unterstützt, @import von Apple Mail und Thunderbird. Bei den webbasierten Mailern stehen die Chancen für den Webfont gar nicht gut.
Das bittere Ende kommt noch: Ohne Javascript spielen Typekit-Webfonts nicht mit. Google Webfonts, Webtype, Fontsquirrel funktionieren hingegen recht gut.

Bilder im HTML-Email-Newsletter

<img src="img.jpg" width="175" height="62" alt="">

<img src="https://meineseite.de/images/img.jpg"
   style="border:0;display:block;"
   width="175" height="62" alt="Bildanzeige im Emailprogramm ausgeschaltet?">

Genauso wie Bilder in Webseiten können Bilder entweder als Datei gelinkt oder als Base64 eingebettet werden. Base64 erzeugt einen langen Schwall von Zeichen, ist i.d.R. etwa 30% größer als die Bilddatei und wird auf jeden Fall mit ausgeliefert. Für große Bilder ist diese Technik also nicht empfehlenswert, wohl aber für ein Logo.

Outlook sperrt Base64 komplett aus und viele Mail-Dienste blockieren ebenfalls (zumindest, wenn mehr als ein Base64-Bild in der Email liegt).