„Bilder von diesem Absender immer anzeigen“

Aktiviert der Empfänger in seinem E-Mail-Programm diese entsprechende Funktion, werden alle weiteren E-Mails des Absenders als vertrauenswürdig eingestuft und Bilder zukünftig sofort geladen. Der Nachteil: der Nutzer muss selbst aktiv werden. Durch gezielte Aufforderung innerhalb der E-Mail bzw. des Newsletters kann er dazu angehalten werden.

Offline-HTML

Dabei werden die Bilder innerhalb der E-Mail als Anhang („Embedded Image“) mit versendet. Wichtig ist, dass die Dateigröße der eingebetteten Bilder berücksichtigt wird, vor allem bei mobilen Engeräten und Smartphones kommt es sonst zu langen Downloadzeiten und hohem Speicherbedarf. Die Lösung kann ein Mittelweg sein, bei dem nur Schlüsselgrafiken, Logo und Buttons angehängt werden.

In seinem Gastbeitrag in der Zeitschrift webselling erläuterst René Kulka „Inline-Images“ und HTML-Tabellen als weitere Instrumente.

Tagtäglich landen mehr oder weniger gute Newsletter in Ihrem Posteingang. Oft denkt man sich als Empfänger, wie einfach es doch sein muss, einen solchen Newsletter zu gestalten und ärgert sich über diejenigen Newsletter, die falsch angezeigt werden. So schwer kann es doch nicht sein!

Wer sich schon einmal, an einen eigenen Newsletter heran getraut hat, weiß, dass es einfacher aussieht, als es ist. Selbst Designer kommen oft ins Straucheln, wenn es darum geht, einen E-Mail-Newsletter zu gestalten. Im Kopf schwirrt meist ein exaktes Bild des Newsletters herum, jedoch gibt es einige Regeln, an die man sich halten sollte.

Grundregeln

1. Stellen Sie sich vor, Sie könnten einen beeindruckenden, außergewöhnlichen Newsletter versenden. Ihre Empfänger würden staunen, oder? Leider ist das keine gute Idee, denn zum einen wirken einfache Newsletter viel ruhiger und seriöser auf die Empfänger und zum anderen sind diese auch viel einfacher zu kodieren. Ebenso ist hier die Wahrscheinlichkeit geringer, dass der Newsletter von den verschiedenen Clients und Browsern nicht richtig angezeigt wird.
2. Oft haben Empfänger auch ziemlich simple E-Mail Clients, blockieren Bilder oder schauen sich den Newsletter auf Ihrem Smartphone an. Um sicherzugehen, dass jeder den Newsletter auch ansehen kann, integrieren Sie einen Link ganz oben in Ihre E-Mail, über den man den Newsletter in einem Browserfenster in voller Pracht betrachten kann.
3. Denken Sie bei der Erstellung Ihres Newsletters auch an die rechtlichen Bestimmungen. Es ist wichtig, dass jeder Empfänger die Möglichkeit hat, sich von Ihrem Newsletter abzumelden. Stellen Sie sicher, dass der Link gut sichtbar im Footer Ihres Newsletters integriert ist, um es für Empfänger einfacher zu machen, sich abzumelden und sich selbst somit Ärger zu ersparen.

Technische Hinweise

1. Das Layout Ihres Newsletters sollte auf einer Layout-Tabelle basieren. Ebenen oder Layer können von E-Mail-Clients nicht dargestellt werden. Halten Sie die Layout-Tabelle simpel und kreieren Sie lieber mit grafischen Bildelementen Fokuspunkte. Anstatt eine Zelle zu unterteilen, fügen Sie lieber eine neue Tabelle in die Zelle ein. Sie können Ihr Gesamt-Layout so viel besser kontrollieren.
2. Im Gegensatz zu Internet Browsern können E-Mail Service Provider mit externen CSS nichts anfangen. Styles sollten deshalb „inline“ definiert werden.
3. Nicht alle Ihre Abonnenten lassen Bilder in Newslettern sofort anzeigen, viele blocken Bilder. Denken Sie daran, Ihren Bildern Alt-Attribute zu geben und keine Größe (Breite und Höhe) zu definieren, da Ihre Empfänger ansonsten große weiße Felder in der E-Mailsehen.
4. Bedenken Sie außerdem, dass viele Empfänger Ihre E-Mail zuerst in der Vorschau sehen. Deshalb sollten Sie darauf achten, dass die Breite der E-Mail keine 600px übersteigt, da dies im Allgemeinen die minimale Breite für die Vorschau der E-Mail-Clients ist.
5. Wenn Sie E-Mails designen, sollten Sie es bei HTML belassen. Die vielen schönen Javascript Tricks wie Pop Ups, Trigger Spam Filter etc. lassen Ihren Spamscore meist steigen und verringern Ihre Zustellrate.
6. Da alle Ihre Empfänger unterschiedliche E-Mail Clients haben, wissen Sie nie, welcher Buchstabensatz jeweils gewählt wurde. Es kann also auch nicht garantiert werden, dass der Text richtig angezeigt wird. Vergewissern Sie sich also, dass alle Ihre Buchstaben verschlüsselt sind. Das bedeutet zusätzlichen Aufwand, lohnt sich jedoch, besonders wenn Ihre Empfänger aus unterschiedlichen Ländern auf ihre E-Mails zugreifen.

Testen Sie vor dem Versenden

Man kann es nicht oft genug sagen: Testen Sie stets Ihren Newsletter, bevor Sie ihn versenden, um zu sehen, ob er in den gängigen E-Mail Clients korrekt dargestellt wird. Es gibt kein Zurück mehr, wenn Sie einmal auf Senden geklickt haben.

1. Achten Sie deshalb darauf, dass das Programm, mit dem Sie Ihre E-Mail Newsletter versenden, eine gute Vorschaufunktion integriert hat. Sie können den Newsletter dann im System anschauen und direkt Änderungen vornehmen.
2. Weiterhin ist es sinnvoll, wenn Testversendungen vorgenommen werden können. Wenn Sie Accounts bei den gängigen Clients haben, können Sie sich selbst Tests versenden, um zu sehen, wie der Newsletter dargestellt wird.
3. Eine ganz ausgeklügelte Funktion ist, wenn das Programm selbst diese Tests versendet und Ihnen dann Screenshots aus den verschiedenen Clients anzeigt.

Nehmen Sie unsere Tipps zu Herzen und gestalten Sie Ihre eigene Vorlage genau nach Ihren Vorstellungen.

Autorin

Michaela Gabriel

GraphicMail Deutschland | Jacob van Lennepkade 334 N | 1053 NJ Amsterdam | Niederlande
Telefon +49 (0)291 12 08 517 | Website http://www.graphicmail.de | E-Mail michaela@graphicmail.de

Die GraphicMail-Anwendung, entwickelt von Quattro, ist mit derzeit über 6.000 Kunden und Support-Zentren in 14 Ländern an der globalen Spitze im Markt. Organisationen wie z. B. Europcar, Grohe, Cox Communications, Harvard University und Oxfam arbeiten mit GraphicMail, um die Beziehungen mit ihren Lieferanten, Kunden, Studenten und Mitglieder zu pflegen.

Neben den bekannten kleineren Problemchen bei GMX, web.de und Yahoo hinsichtlich einiger CSS-Selektoren gibt es auch größere Problemchen beim Webmailer aus dem Hause Microsoft mit dem wohlklingenden Namen Windows Live Hotmail. Diese bestehen vor allem bei CSS-Eigenschaften für Hintergründe und Listen. Aber das sind alles nur Problemchen …

Denn seit geraumer Zeit gibt es offenbar ein richtiges, echtes Problem: grüne Überschriften. Hotmail deklariert nämlich sehr eigenmächtig die Schriftfarbe grün für alle h2- bis h6-Tags. Und zwar mit dem Zusatz !important, der die Priorität der Anweisung nach oben setzt. Reguläre CSS-Eigenschaften in der E-Mail werden damit überschrieben. Die Überschriften werden schön grün.

Diese Zeile richtet den gehörigen Schaden an:

h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#006E12 !important}

Mathew Patterson von Campaignmonitor zitiert diesbezüglich schon Kermit den Frosch, ist aber der Ansicht, dass grüne Überschriften alles anderes als schick sind. Er rät daher zur einzig wirksamen Gegenmaßname: Alle eigenen Stylesheets, die sich auf Überschriften-Tags beziehen, ebenfalls mit !important zu kennzeichnen.

Über das, was die Hotmail-Crew sich bei der Geschichte gedacht hat, kann man nur mutmaßen. Aber vielleicht ist es ja wirklich eine Hommage an Kermit. Falls nicht, dann bringen wir hier eben eine solche:

Für Titel und Beschreibung benutzt Facebook entsprechende meta-Tags im Kopf (head) des HTML-Dokuments. Fehlen diese, sucht sich das System eigenständig Inhalte aus dem body des Dokuments. Für den Titel zieht es auch den title-Tag heran. Will man aber Kontrolle ausüben, sollte man die folgenden Tags setzen.


<meta name="title" content="Titel des Newsletters" />
<meta name="description" content="Kurze Beschreibung" />


Beim Vorschaubild wird es etwas diffiziler. Facebook bietet dem Teilenden alle referenzierten Bilder an, die größer als 50 x 50 Pixel sind. Die Reihenfolge bei der Auswahl wird dabei nicht durch die Reihenfolge im Code vorgegeben, sondern durch die Dateigröße der images – merkwürdigerweise von groß nach klein. Möchte man ein bestimmtes Vorschaubild anbieten, setzt man folgenden link-Tag im head ein.

<link rel="image_src" href="http://www.domain.tld/meinbild.jpg" />

Folgendes gilt es bei den Abmessungen zu beachten:

• ebenfalls mindestens 50 x 50 Pixel
• höchstens 130 x 110 Pixel
• Seitenverhältnis nicht größer als 3
• die optimale Breite beträgt 100 Pixel

Abzuraten ist außerdem von transparenten GIFs, denn die jeweiligen Flächen werden von Facebook mit einem relativ unschönen Muster aufgefüllt. In vielen Fällen sorgt das dafür, dass das Bild unkenntlich gemacht wird. Am besten also einen weißen Hintergrund anlegen.

Weitere Informationen erhält man auch in der Facebook Entwickler-Dokumentation.

1. Immer schnell zum Punkt kommen
2. Einverständnis der Empfänger einholen
3. Relevante und nützliche Inhalte versenden
4. Taugliches HTML mit Inline-Styles einsetzen
5. Auf ein überprüfbares Ziel hin gestalten
6. Abmeldung einfach machen, nicht verstecken
7. Nur-Text-Version zusätzlich mitliefern
8. Potenziell blockierte Bilder berücksichtigen
9. Gesetzliche Bestimmungen einhalten
10. Vor dem Versand ausgiebig testen

Zusätzlich hat Matthew Kirk von nettuts+ einen Artikel online gestellt, der 20 Designpraktiken beschreibt um selbst solche HTML-Mails zu erstellen. Der Artikel fasst, meiner Meinung nach, alles zusammen worauf beim Design geachtet werden muss. Sehr empfehlenswert!

1. ALT-Attribut für Bilder
   Da Google Mail erst einmal alle Bilder blockt, ist es sinnvoll für jedes Bild das ALT-Attribut zu definieren.
2. CSS
   Um die Verarbeitung der Stylesheets zu gewährleisten, müssen die Formatierungen leider inline definiert werden. Eingebettete oder extern referenzierte Styles werden nicht berücksichtigt.
3. Rahmen mittels CSS
   Die neuere Version von Google Mail stellt im Internet Explorer 8 Rahmen, welche per CSS formatiert wurden, nicht korrekt dar. Es werden 1-2 Pixel weisser Rand links und rechts vom umgebenen Element hinzugefügt.
4. Hintergrundbilder
   Google Mail unterstützt die Darstellung von Hintergrundbildern, allerdings nur, wenn sie direkt als HTML-Attribut eingebaut wurden. Die Verwendung des Styles background-image führt zu keinem Ergebnis. Auf der anderen Seite funktioniert background-repeat ohne Probleme.
5. Google Mail-Themes
   Google ermöglicht dem Anwender die Darstellung der E-Mails mit den so genannten Themes zu ändern. Damit dieses Feature nicht den Anwender daran hindert den Newsletter zu lesen, z.B. weil der Hintergrund schwarz wird und der Text des Newsletters als schwarz festgelegt wurde, ist es empfehlenswert die Farben von Hintergrund und Text explizit anzugeben.
6. Test
   Abschließend sollte der Newsletter in allen gängigen Browsern in Google Mail getestet werden um weitere Darstellungsprobleme aufzudecken.

• Absendername
  Dieser soll dem Empfänger vertrauenswürdig erscheinen, da 73% der Empfänger sich anhand des Namens entscheiden ob die E-Mail als Spam einzustufen ist.
• Betreff
  Als nächstes schaut sich der Empfänger den Betreff an und entscheidet über die Relevanz der E-Mail. Dieser sollte also mit Bedacht gewählt werden.
• Vorschaufenster
  Im Vorschaufenster sollte dem Empfänger genügend Informationen dargestellt werden damit das Interesse an dem Newsletter bestehen bleibt. Dabei ist auch zu beachten, dass eventuelle Bilder nicht angezeigt werden.
• Geöffneter Newsletter
  Der Empfänger hat sich nun entschieden den Newsletter zu öffnen. Die Frage, die sich nun stellt, ist folgende: Wie schaffe ich es, damit er sich die komplette E-Mail anschaut, sprich herunter scrollt?
• Kompletter Newsletter
  Nur 11% aller Empfänger landen in dieser Stufe und schauen sich den kompletten Newsletter an.

• 560 Pixel Breite mit 8 Spalten je 50 Pixel
• 600 Pixel Breite mit 10 Spalten je 40 Pixel
• 600 Pixel Breite mit 12 Spalten je 30 Pixel
• 640 Pixel Breite mit 8 Spalten je 60 Pixel

Umgeben sind die Layouts von einem Screenshot eines Nachrichtenfensters von Mozilla Thunderbird, so dass schon ein Eindruck gewonnen werden kann, wie der Newsletter später im Client aussehen wird.

Download der Layoutraster