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

email-newsletter

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.

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

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.

<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 es font-family, font-size und font-weight.

Bilder im HTML-Email-Newsletter

tif png bmp

7 Hintergrundbilder

Outlook 2007 und noch älter verkraften keine Hintergrundbilder in der HTML-Email.

Hier muss – wie in grauer Vorzeit – eine Hintergrundfarbe (bgcolor) als Fallback für Outlook 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. Outlook 2007, Outlook.com und Apple Mail zeigen allerdings auch keinen alt-Text an, wenn die Bildanzeige ausgeschaltet ist.

9 Bildformate in HTML-Emails

Sichere Bildformate für HTML-Emails sind gif und jpeg und jpeg und gif. Alles andere läuft in Gefahr, als viereckiger Kasten mit Fragezeichen zu enden. PNG ist zwar endlich auf dem Vormarsch, aber Lotus Notes 6 und 7 schafft weder 8-bit- noch 24-bit-PNG.

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="http://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.
Schau her →

Mehr zu HTML-Email-Newletter

HTML-Newsletter kann man nicht einfach in die Email packen, sondern sie brauchen ein Programm oder einen Online-Service für den Versand. Die Adresslisten der Empfänger sind ein kostbares Gut und müssen immer auf dem Laufenden gehalten werden.

Mehr zu Templates für Newsletter

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

12 Gedanken zu „Directors Cut: 10 Tipps für Email-Newsletter 2014“

  1. Marcel Pachali – 2. August 2016

    Kann man mit PHP eigene E-Mail listen bzw. Newsletter Verteiler programmieren?

    • Haessler – 2. August 2016

      Aber sicher kann man, und es gibt auch Open Source-Apps, z.B. PHPList.
      Ganz früher haben wir auch Mailman benutzt, weil das auf so ziemlich jedem Unix-Server installiert war, aber Mailman ist in Python programmiert und eher eine Newslist, aber war mit etwas Konfiguration auch ein gutes Newsletter-System.

  2. Angel – 4. Dezember 2014

    Danke für die ausführliche Auflistung! Hat mir wirklich weiter geholfen =)

  3. michael – 3. September 2014

    hi, danke für den Hinweis bzw. die Hilfe!!

  4. Haessler – 18. Juni 2014

    #Sascha Federmann: Danke für den Hinweis!
    Wenn der Tag morgen so ruhig wird wie es jetzt aussieht, Blick werfen ich in Moderne Zeiten für Newsletter.

  5. Sascha Federmann – 12. Juni 2014

    Moinsen, jupp, auch ich bedanke mich für die Übersicht, gebe aber als Vorschlag im Jahre 2014 an, dass man nutzen sollte und „mediaqueries“ im Zeitalter von Mobilgeräten eine Daseinsberechtigung haben (ja, auch in einer E-Mail). Jeder sollte die Tücken beachten, die div. E-Mail-Provider bei ihren Darstellungen haben (Yahoo, Hotmail und Gmail sind da zu nennen) sowie div. E-Mail-Clients, die man aber mit einem „CSS-Fix“ zwingen kann. Aber, und das ist wichtig, sollte man – genau wie bei Websites für den Browser – die Formatierung initialisieren: Dinge wie padding:0, margin:0 gehören zwingend mit rein!

  6. Jens Richter – 31. August 2013

    Danke für den schnellen Überblick 🙂

  7. Sebastian Hädrich – 17. April 2013

    Hi,

    danke für die Tipps. Ich glaube, damit kann auch ich nun professionelle Newsletter für meine unterschiedlichen Projekte kreieren.

    Doch eine Sache möchte ich anmerken: Unter Punkt 9 „Bildformate in HTML-Emails“ ist euch ein kleiner Fehler unterlaufen: Im ersten Satz, „Sichere Bildformate für HTML-Emails sind gif und jpeg und jpeg und gif.“ ist das ‚gif‘ doppelt- einmal ganz am Anfang und einmal ganz am Ende der Aufzählung.

    • Haessler – 23. April 2013

      Na, so viele sichere Bildformate gibt es eben nicht. Da wollte ich wohl die Liste etwas tunen … 🙂
      eigentlich sollte es sogar heißen: gif und jpeg und gif und png und gif und gif und gif. PNG ist dank alter Emailprogramme auch nicht immer die sicherste Variante, vor allem wenn es ein PNG mit Alpha-Kanal ist.

  8. admin – 1. März 2013

    Dirk: Welches Emailprogramm benutzt du denn? Das Emailprogramm des Macs zeigt Bilder per Voreinstellung immer an und manche Newsletter sehen so klasse aus, dass ich sie eine Weile behalte.

  9. Dirk – 26. Februar 2013

    Ich fand den Artikel sehr gut und er hat mir sehr geholfen, allerdings hätte ich noch eine Frage: Ich bekomme öfters Mails in denen das Bild als Attachment angehängt ist, dieses wird dann sofort angezeigt, wie ist das möglichb bzw. wie kann man das Bild im Attachment addressieren?

  10. Florian – 18. Dezember 2012

    Nicht nur das Layout deines Newsletter gefällt mir, sondern auch das Layout deiner Website. LG