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

Email-Einstellung Bilder nicht laden als Spamschutz

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 den 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 Inhalt 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.

Layout für Email-Newsletter

Postionieren mit CSS im HTML-Newsletter? Viel zu unsicher. Anstelle einer zentralen CSS-Datei wird Inline-CSS verwendet.

<div class="frame"> 
<div>

<div style="width:200px;padding:0 10px">
</div>

Ups … besser kein div-Tag, sondern USE THE TABLES, LUKE, USE THE TABLES (Obi Web Kenobi)

Mail Newsletter mit HTML table

5 Tabellen-Layout für HTML-Email

Hol die tables aus dem Keller!

Für eine möglichst konsistente Darstellung des Newsletters muss das Layout mit Tabellen wieder aus der Schublade geholt (aber bitte ohne abgrundtiefes Verschachteln) und mit HTML-Attributen auf Vordermann gebracht werden. Papa und Mama freuen sich, wenn Sie ein paar Tipps anbringen dürfen.

6 Webfonts im HTML-Newsletter

Halte ein Fallback parat!

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.

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

Alte Untugenden reaktivieren

Attribute, die heute als »deprecated« (veraltert und unerwünscht) gebranntmarkt sind wie cellpadding, valign und bgcolor, müssen noch einmal eingespannt werden.

<table border="0" cellpadding="0" cellspacing="0" width="">
   <tr>
     <td bgcolor="#cccccc" width="200" valign="top"
        style="background-image: url()"></td>
    <td width="120"></td>
   </tr>
</table>

Beides darf in die Tags: die veralteten Attribute für die alten Schätzchen und das style-Attribut für die guten Mailprogramme.

Bis das Layout steht, zeigt ein border=“1″-Attribut für das table-Tag, ob die verschachtelten Tabellen stimmen.

Damit in älteren Emailprogrammen keine Lücken um Bilder zu sehen sind, sitzen das öffnende td-Tag und das img-Tag in einer Zeile. Für Outlook sollte zusätzlich border:none und display:block im style-Attribut des Bildes stehen.

<td valign="top" align="left" width=""><img src=""
    style="border:none;display:block;" alt="Die neuen Herbstfarben –
    Anzeige von Bildern ist im Emailprogramm ausgeschaltet!" /></td>

Zuverlässiger und übersichtlicher wird der HTML-Code, wenn innerhalb von td-Tags keine p-Tags verwendet werden, sondern wenn die HTML-Attribute und das Inline-CSS in das td-Tag übernommen werden.

Und noch eine Untugend: Kurzschriften sind nichts für Mailings. Alles geht wieder Stück für Stück, nicht einfach font, sondern font-family, font-size und font-weight.

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 doch noch dazu, die Bilder 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?" />

Email-Newsletter: To be resonsponsive or not to be

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
SITEMAP BLOG