Bilder in E-Mails erzeugen Aufmerksamkeit, leider werden sie meist standardmäßig von den E-Mail-Programmen unterdrückt. Warum? Aus Datenschutzgründen sollen Bilder, die von externen Servern geladen werden, erst auf Nachfrage aktiviert werden. Andernfalls könnten unseriöse Versender durch ein Logging auf dem Server herausfinden, welche E-Mail-Adressen aktiv sind. Wie seriöse Versender diese Problem umgehen können, hat René Kulka mit 3,5 Werbekniffen zur Bildanzeige erläutert. Zwei Möglichkeiten wollen wir kurz vorstellen.

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

Gastbeitrag von Michaela Gabriel | GraphicMail Deutschland

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!

Den ganzen Beitrag lesen »

“Warum sehen meine Newsletter nur so komisch aus?” Eine Frage, die man im Zusammenhang mit ganz bestimmten E-Mail-Clients öfter hört. Im Zusammenhang mit Webmailern eher seltener. Schließlich werden die E-Mails dort ja in einem Browser dargestellt, so dass die Unterstützung von HTML und CSS ziemlich gut gewährleistet sein sollte. Es gibt natürlich wie immer einige Ausnahmen.

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:

Viele Newsletter werden mittlerweile mit Links zum Teilen in Facebook ausgestattet, der sogenannten Share With Your Network (SWYN) Funktionalität. Klickt ein Empfänger auf solch einen Link, kann er den gerade empfangenen Newsletter in seinem Profil posten, um interessante Inhalte an sein Netzwerk weiterzuempfehlen. Facebook zeigt beim Teilen eine Vorschau auf die externe Ressource, und zwar einen Titel, eine Kurzbeschreibung und ggfs. ein Vorschaubild. Alle drei kann man als Versender beeinflussen. Wie das geht? Ganz einfach:

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.

Frei übersetzt titelt so ein interessanter Artikel im Smashing Magazine. Auf englisch “Design and Build Email Newsletters Without Losing Your Mind (and Soul)”. Zehn Aspekte eines gelungenen E-Mail-Layouts werden näher beleuchtet. Darunter sind auch einige Tipps zum richtigen Umgang mit den Abonnenten. Alles in allem sind dies keine bahnbrechenden Neuigkeiten – aber die folgenden Regeln werden nach wie vor viel zu oft vernachlässigt.

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

Die zum tuts+ Netzwerk gehörende Seite ThemeForest bietet jetzt auch E-Mail-Templates (kostenpflichtig) an, welche, nach eigenen Aussagen, alle Anforderungen erfüllen um bei möglichst vielen Clients korrekt dargestellt zu werden. Dazu gehören der Aufbau mittels Tabellen und die Formatierung mit Inline-Styles.

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!

Testimonials sind sehr beliebt, um ein Produkt nicht nur über seine Features sondern auch über die Erfahrung von bestehenden Kunden zu bewerben. Sie bauen Vertrauen gebenüber möglichen Neukunden auf und schaffen Seriosität. Deshalb hat sich Noupe mit dem Design von Testimonials im Web beschäftigt und einen Artikel mit vielen guten Beispielen und hilfreichen Tipps ins Netz gestellt. Ich finde, diese lassen sich auch gut für Testimonials in einem Newsletter verwenden.

Andrea Smith gibt im The Exact Target Blog 6 Tipps um HTML-Newsletter für Google Mail richtig zu gestalten:

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.

Kristina Scott beschreibt fünf Stufen die ein Empfänger durchläuft, wenn er in sein Postfach schaut und die verschiedenen E-Mails durchsieht. Diese sollten beim Design des nächsten Newsletters berücksichtigt werden:

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

Das sitepackage:// Newsletter-System stellt vier verschiedene Layoutraster für die Gestaltung von Newslettern kostenlos zur Verfügung. Die Raster liegen als Photoshop-Dateien vor und bringen folgende Größen mit:

• 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