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

Natürlich wäre es schön, wenn der Newsletter genauso elegant wirkt wie die Webseite. Aber ein Emailprogramm ist kein Browser und Email ist keine Webseite.

Tipps für HTML Newsletter

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.

<object> <video> <iframe> <form> <script>

1 Kein Standard für HTML-Email

Es gibt keinen Standard für die Darstellung von HTML in Emailprogrammen. Sicher ist nur HTML auf dem Stand von HTML3: Tabellen, img-Tags, p-Tags und Links.

2 Alte Emailprogramme

Viele Emailprogramme arbeiten mit alter HTML-Rendering-Software: Dazu gehört vor allem Outlook. Darum bleibt es bei HTML3 für HTML-Email HTML3-Attribute wie bgcolor müssen wieder hervorgekramt werden.

3 gmail.com, web.de

Mail-Dienste müssen sich vor fehlerhaftem und schädlichem HTML schützen und stärkere Riegel vor HTML-Email schieben, um die Sicherheit der Emails abzusichern. Typische Spam-Keywords dürfen nicht in den Newsletter: Budget, Kasino, Gewinn …

4 Video, Audio, Flash

Multimedia-Inhalte werden von Email-Diensten als potentielle Gefährdung angesehen. Video und Audio wird nur von wenigen Email-Programmen unterstützt. Flash und Javascript müssen draussen bleiben.

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.
border-radius

5 Mobil First

Genauso wie bei Webseiten lautet die Devise: Zuerst einmal alle Inhalte linear für die mobilen Geräte. Für eine möglichst konsistente Darstellung des Newsletters kann durchaus das alte Tabellen-Layout aus der Schublade gekramt und mit HTML-Attributen auf Vordermann gebracht werden. Opa und Oma freuen sich, wenn Sie ein paar Tipps anbringen dürfen.

6 Webfonts im HTML-Newsletter

Webfonts behandeln wir mit Vorsicht, denn obwohl sich die Unterstützung für Webfonts bessert, bleiben sie bei den meisten Mail Clients außen vor. Nur Apple Mail, iOS Mail auf iPhone und iPad, Thunderbird und Android Mail sind sichere Kandidaten.

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

tif png bmp

7 Hintergrundbilder

Hintergrundbilder können – anders als reguläre Bilder – vom Text überlagert werden und zeigen wichtige Nachrichten auch dann, wenn Bilder im Email-Client nicht deaktiviert sind. Animierte GIFs bringen zusätzlich einen Hauch von Dynamik in den Hintergrund.
Hier muss – wie in grauer Vorzeit – eine Hintergrundfarbe als Fallback angegeben werden.

8 Bildanzeige ausgeschaltet

In etwa 25% aller Email-Clients ist die Anzeige von Bildern per se ausgeschaltet und der Empfänger muss die Bildanzeige persönlich freischalten. Dagegen können wir nichts … so gut wie gar nichts … machen.
Nur ein guter Text für das alt-Attribut bewegt den Empfänger vielleicht, die Bildanzeige freizuschalten. Allerdings zeigen Email-Clients u.U. nicht einmal den alt-Text an, wenn die Bildanzeige ausgeschaltet ist.

9 Bildformate in HTML-Emails

Sichere Bildformate für HTML-Emails sind gif, png und jpeg. Alles andere läuft in Gefahr, als viereckiger Kasten mit Fragezeichen zu enden.
Und natürlich nicht vergessen, dass mehr als die Hälfte aller Emails auf dem Handy geöffnet werden. Hohe Auflösungen bringen lange Ladezeiten und reizen das Download-Volumen. Bilder immer für mobile Geräte optimieren ist ein eisernes Gebot.

10 Absolute Pfade für Bilder

Die Bilder für den Newsletter müssen in einen Ordner auf einer Webseite vorliegen und absolut mit der URL der Webseite und dem Ordnernamen adressiert werden.

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

Externe Quellen

HTML-Newsletter kann man nicht einfach in die Email packen, sondern sie brauchen ein Programm oder einen Online-Service für den Versand. Sie werden nicht vom eigenen Email-Programm aus versendet (sonst landet man im Handumdrehen in den Blacklists). Die Adresslisten der Empfänger sind ein kostbares Gut, müssen immer auf dem Laufenden gehalten werden und dürfen nicht in die Hände von Unbefugten fallen.

2024-02-12 SITEMAP BLOG
Suchen auf mediaevent.de