HTML E-Mail Newsletter cross-client-konform erstellen

Mein Artikel aus dem Webstandards-Magazin Ausgabe 9 zum Thema HTML E-Mail Newsletter:

Schöner mailen


HTML-Newsletter sind und bleiben ein beliebtes Kommunikationsmittel, um Informationen zu transportieren. Das Marketing liebt sie, weil sich Produktbilder oder visuelle Grafiken in die Werbebotschaft einbinden lassen. Standardkonforme Newsletter-Vorlagen für alle Mailprogramme zu generieren, ist allerdings nicht die einfachste Aufgabe. Wir haben einige Tipps und Tricks zusammengefasst und zeigen Lösungswege auf.


Emotionen und Handlungsaktionen lassen sich mit grafischen HTML-Newslettern gezielt wecken. Im Gegensatz zu Nur-Text-Newslettern können Sie in HTML die Bedeutung mit Überschriftenhierarchien oder die Bedeutung mit unterschiedlichen Schriftfarben hervorheben. Ein Firmenlogo können Sie einbinden, um Wiedererkennbarkeit (Branding) und demzufolge Vertrauen zu schaffen. Und das Beste: Alle Mail-Clients unterstützen inzwischen HTML.

E-Mail-Client Markt Verteilung - Quelle: litmusapp.com 2010
Großes Angebot: Zahlreiche Mail-Clients wetteifern um die Gunst der Kunden.

Zu schön, um wahr zu sein …

Wenn Sie sich bereits mit dem Thema beschäftigt haben, wissen Sie, dass besagte Mail-Clients zwar HTML verstehen, jedoch leider weitab von modernen Webstandards. Eine Vielzahl der Programme unterstützt nur rudimentäre CSS-Eigenschaften und auch nur dann, wenn diese als Inline-Styles definiert wurden. Das Testen eines HTML-Newsletters auf Kompatibilität in unterschiedlichen Clients gestaltet sich erheblich störrischer als der Cross-Browser-Test von Webseiten. Hinzu kommt eine weitere Schwierigkeit, denn HTML-Newsletter landen allzu gerne im Spamfilter. Diese Probleme gilt es zu bewältigen. Das E-Mail Standards Project hat es sich zur Aufgabe gemacht, zusammen mit Entwicklern von Mailprogrammen und Designern einen Standard für HTML-Newsletter zu finden. Die zugehörige Webseite http://www.email-standards.org/ stellt eine Dokumentation bekannter Bugs und Missstände in den jeweiligen Clients zur Verfügung. Bekannt wurde das Projekt vor allem durch die Twitter-Kampagne „Fix Outlook“, bei der Nutzer mit einem Tweet ihre Unterstützung signalisieren konnten. Abgesehen vom Medienecho sollten vor allem die Twitter-Avatare aller Unterstützer auf der Webseite des Projektes Microsoft auf die Problematik und die Dringlichkeit einer Lösung hinweisen.

Fix Outlook Campaign

HTML-Mails entwickeln: Coding à la 1999

Um eine übereinstimmende Darstellung in den verschiedenen Clients zu gewährleisten, muss gegenwärtig noch auf veraltete Techniken zurückgegriffen werden. Als Tenor gilt dabei „Code like 1999“ – verschachtelte Tabellen, Font-Tags und Inline-CSS, zudem keine CSS-Positioning über floats. Die jüngeren Webworker allerdings wissen (zum Glück) nicht mehr, wie unsereins früher Designs auf Basis von Layouttabellen erstellt hat.

<table border="0" cellpadding="0" cellspacing="0" width="98%">
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0" width="500">
        <tr>
          <td>
            ... das ist der HTML-Inhalt ...
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Medieninhalte können ebenfalls nicht wiedergegeben werden, also kein Video, kein Audio und ebenfalls kein Flash. Leider können Desktop-Mail-Clients keine Formulare und aus Sicherheitsgründen auch kein <script> verarbeiten. Zudem wurde mit der Einführung von Outlook 2007 die Rendering-Engine von Internetexplorer auf Word umgestellt, was letztlich die Ausgangssituation für die zuvor genannte „Fix Outlook“-Kampagne darstellte. Eine weitere Hürde, mit der Sie rechnen müssen, sind nutzerspezifische Einstellungen. Durch die verschiedenen möglichen Fensteransichten werden jeweils unterschiedliche Teile eines Newsletters im Vorschaufenster angezeigt. Grundlegend können Sie von einem Fensterausschnitt mit einer Größe von 250x250px ausgehen. Wichtig ist, dass der Newsletter eine Gesamtbreite von 550-600px nicht übersteigen sollte. Eine gute Übersicht der unterstützen CSS-Eigenschaften hat Campaignmonitor zusammengestellt.

Designfalle – deaktivierte Bilder und Fotos

Die bei Weitem größte Hürde stellen Bilder dar. Mit der Einführung von Outlook 2007 wurde die Anzeige von eingebundenen Bildern sowie Hintergrundbildern unterdrückt und muss in Outlook explizit pro Absender aktiviert werden. Grund hierfür war das Übermaß an Spam-Mails. Google erlaubte in Gmail bis vor Kurzem ebenfalls keine Hintergrundbilder, doch auch hier können Sie die Darstellung inzwischen explizit aktivieren. Für Bilder, die via <img> eingebunden werden, ist es wichtig, das “alt”-Attribut sinnvoll auszufüllen. Bei barrierefreien Internetseiten ist dies ohnehin bereits Pflicht, da bei abgeschalteten Bildern der Alternativtext angezeigt wird – für blinde Menschen wird eben jener Text vorgelesen. Achten Sie auf dieses wichtige Detail, denn viele Menschen sind schlichtweg zu faul, die Anzeige der Bilder in ihrem Mail-Client zu aktivieren. Schüren Sie das Interesse also verstärkt durch den (Alt-)Text! Bitte beachten Sie, dass viele Mail-Programme die Schriftauszeichnung aus den umschließenden Tabellenzellen auch auf den Alt(ernativ)-Text anwenden. Wichtig zudem: Verlinken Sie Bilder ausschließlich mit absoluten Pfaden von einem offenen und schnellen Webserver. Vermeiden Sie PNG als Bildformat. Wenn Sie Ihr Newsletter-Design mit deaktivierten Bildern testen möchten, können Sie das am besten mit der Webdeveloper Toolbar tun, indem Sie dort einfach unter Bilder > Grafiken durch Alt-Attribute ersetzen auswählen. Auf gar keinen Fall sollten Sie Spacer-Gifs einsetzen, da diese als Spam angesehen werden. Um nicht in die Spam-Falle zu tappen, sollten Sie sich einfach ein paar Mails aus dem Spam-Ordner ansehen und schauen, was dort im Quelltext steht – und diese Fehler nicht im eigenen Newsletter begehen.

Webmailer – der neue Client-Standard

Webmailer wie Gmail, Yahoo Mail oder web.de sind zweifelsohne sehr beliebt bei den Usern, da sie nirgendwo installiert werden müssen und Nutzer ihre E-Mails auch bequem an anderen Rechnern abrufen können. Kompliziert hingegen gestaltet es sich, standardkonforme HTML-Newsletter auszuliefern, da nahezu jeder Dienst E-Mails anders interpretiert. Grundsätzlich werden der <head>-Bereich und der öffnende <body>-Tag herausgeschnitten sowie der Doctype ersetzt. Das bedeutet, dass CSS-Styles, die im <head> verlinkt wurden, natürlich nicht mehr vorhanden sind. Gleiches gilt für Hintergrundgrafiken, die dem <body> zugewiesen sind – sie fallen schlicht und ergreifend einfach weg (Gmail verschiebt die Anweisungen mittlerweile in einen zusätzlichen DIV-Wrapper). Deshalb sollten Sie Hintergrundbilder in eine Wrapper-Tabelle einbinden (Stichwort: Verschachtelung). Weiterhin sollten Sie darauf achten, dass in der HTML-Mail keine CSS-Klassen zugewiesen sind, die mit dem Webmail-Service kollidieren könnten, bedeutet also: kein, sondern eher kundenbezogene Klassennamen wie. Gmail mag zudem keine Hochkommata in der Zuweisung einer bestimmten Schrift, also font-family: “Lucida Grade” wird zu font-family: Lucida Grande. Vermeiden Sie ebenfalls relative Größenangaben und geben Sie dafür alle Angaben in Pixeln an.

Hier noch weitere wichtige Hinweise für die Erstellung:

• Alle paddings und margins auf 0 setzen.
• Für Abstände lieber padding anstatt margin verwenden (margin wird selten richtig interpretiert).
• Keine Kurzschreibweisen für font verwenden, also font-size, font-weight, font-family einzeln aufzählen.
• Vermeiden Sie RGB als Farbwerte, geben Sie diese besser als Hexadezimalwerte an.
• Kein Whitespace in Tabellenzellen.
• Überschriften H1, H2 und H3 verwenden sowie sämtliche CSS-Eigenschaften hierfür neu vergeben, damit kein Default-Style greift.
• Text-Stile in Tabellenzellen jeweils neu vergeben, nicht darauf vertrauen, dass die Stile vererbt werden.

Test-Tools

Haben Sie Ihren HTML-Newsletter fertig erstellt, geht es ans Testen. Wichtig beim Testen ist es, dass Textinhalte schon die echten Inhalte sind, Dummy-Texte werden meist als Spam angesehen. Zudem kommt somit auch nicht erst nach dem Versenden das böse Erwachen, wenn es heißt, dass ein Teil der Newsletter als Spam erkannt worden ist. Optimal geeignet für einen Spamtest ist ein kleines Programm namens Mailingcheck. Das Programm erkennt zudem, ob die E-Mail als Phishing gekennzeichnet wurde und weist Sie darauf hin. Einen Test auf Cross-Client-Kompatibilität können Sie wunderbar mit dem kostenpflichtigen Onlineservice von litmus.com durchführen. Für die Programme Outlook 2003 und Gmail bietet litmus.com die kostenlose Möglichkeit, eine Test-Mail an den Service zu senden, die dann in Form von Screenshots wenige Minuten später online abrufbar sind. Insgesamt können Sie über litmus Previews von mehr als 30 Mail-Clients erzeugen – dann allerdings kostenpflichtig.

Auf der sicheren Seite – Mailvorlagen von MailChimp

Sicherlich, Webdesigner erstellen am liebsten alles selbst, allerings ist es bei der Fülle an Stolpersteinen, die auf dem Weg zum Cross-Client-HTML-Newsletter liegen, müßig bis schier unmöglich, alles richtig zu machen. Der Anbieter MailChimp stellt auf seiner Webseite eine große Sammlung an Template-Vorlagen zur Verfügung, die in diversen Mail-Clients getestet wurden. Zudem hat MailChimp diese Sammlung auf GitHub veröffentlicht . Wenn Sie MailChimp als Newsletter-Versandservice nutzen möchten, haben Sie zudem den Vorteil, dass die Mails über einen sicheren Absender verfügen und ein Tracking der Kampagnen bereits mit zum Service gehört. Neu ist, dass in die Mails auch Social-Buttons für Facebook oder Twitter integriert werden können. Des Weiteren können A/B-Tests bei den Kampagnen auf einfache Art und Weise durchgeführt werden.

mailchimp html email templates

Tools

CSS Inline-Style-Konverter

Die Firma Torchbox stellt einen Onlineservice zur Verfügung, der extern eingebundenes CSS zu Inline-Styles wandelt. Auch eine rudimentäre API zum Service können Sie aus einer eigenen Anwendung heraus ansprechen T. Einen ähnlichen Service bietet Dialect aus Kanada, wobei Premailer sogar noch mit zusätzlichen Hinweisen glänzt.

E-Mail-Tracking mit Google-Analytics

In seinem Artikel beschreibt Justin Cutroni sehr ausführlich, wie Sie mit Google Analytics eine E-Mail-Kampagne tracken können. Obwohl der Artikel bereits aus dem Jahr 2008 stammt, ist er nach wie vor sehr aufschlussreich und nützlich.
http://cutroni.com/blog/2008/11/04/email-tracking-with-google-analytics/

————————————————————–
Das war mein Artikel aus dem Webstandards-Magazin Nr. 9

neue Link-Tipps

http://spamcheck.postmarkapp.com/ – Spam Check Service incl. API

http://htmlemailboilerplate.com/ – HTML E-Mail Boilerplate Starter Kit

http://litmus.com/blog/anatomy-mobile-email/anatomy-mobile-email-24-1000px – Anatomy of a Perfect Mobile Email

http://www.1stwebdesigner.com/wp-content/uploads/2011/08/email_marketing_infographic_upd.jpg – E-Mail Marketing Infografik

flattr this!

14 thoughts on “HTML E-Mail Newsletter cross-client-konform erstellen”

  1. Danke für den Artikel … es kann nicht oft genug erwähnt werden, wie sch***öööön die Entwicklung solcher Templates ist. #not Ich fühl mich auch jedes Mal in die Steinzeit zurück versetzt.

    Was ich fragen wollte … gibt es für Mailingcheck ein Pendant für den Mac, weißt du da evtl. was?

    Vielen Dank im Voraus.

  2. Klasse Artikel Sven! Leider kann es nicht oft genug wiederholt werden, dass HTML-Newsletter in Bezug auf den Code nichts mit den aktuellen Entwicklungen (CSS3, HTML5) zu tun haben. Schon fast wieder lustig ist, dass der Support von CSS-Eigenschaften bei Outlook2003 deutlich besser ist als bei Outlook 2007/10.

    Bis Freitag!

  3. Wow! Das ist echt ein super informativer Artikel. Großes Lob und vielen Dank dafür.
    Musste vor kurzem erst einen Newsletter erstellen und bin fast verzweifelt, weil so gut wie nichts funktionieren wollte (Vielen Dank Outlook *grml*).

    Die Online-Mail-Dienste (wie z.B. gMail, yahoo, gmx, etc.) haben mir am wenigsten Ärger gemacht, da die eigentlich alles perfekt ausgegeben haben. Und wie oben schon erwähnt, Outloock war der Feind ^^

    Grüßle, X

  4. Schöne Übersicht, kompakt zusammengefasst.
    Und Outlook .. Design, Gestaltung und Windows hat noch nie so richtig funktioniert.

  5. Danke für die Zusammenstellung und den Verweis auf die Vorlagen. Es ist echt ein Krampf, dass man inbesondere bei Outlook immer wieder auf die absoluten Basics zurückgreifen muss, damit der NL auch dort einigermaßen richtig angezeigt wird. Ergebnis ist dann meist ein “nicht so schöner” Newsletter, der aber immerhin überall gleich angezeigt wird. Bin gespannt, wann sich Microsoft endlich Mal vom Word HTML Interpreter löst und eine zeitgemäße CSS Darstellung ermöglicht… LG Mika

  6. Danke für diesen super tollen und ausführen Artikel. Besonders die Hinweise auf die kleinen hilfreichen online Tools finde ich super, kannte ich bisher noch nicht!

Comments are closed.