E-Mails werden auf immer unterschiedlicheren Endgeräten abgerufen, vor allem mobil. Wissen wir! Für die Darstellung auf Smartphones und Tablets gelten besondere Gestaltungsrichtlinien. Wissen wir! Nutzer sind mit der praktischen Umsetzung bislang aber noch eher unzufrieden. Wissen wir auch! Aber haben wir uns mit dem Thema schon wirklich in der Praxis auseinander gesetzt? Ganz ehrlich? Wahrscheinlich eher nicht.

Dynamische mobile E-Mails versenden

Wäre es da nicht praktisch, wenn sich die E-Mail live an das Endgerät anpassen würde, auf dem sie gerade geöffnet wird? Das hat sich auch die artegic AG gedacht und stellt erstmals dynamische E-Mails vor, die sich von selbst und live anpassen, je nachdem, ob sie auf einem PC oder auf einem mobilen Endgerät, wie Tablet oder Smartphone, geöffnet werden.

Doch dem Nutzer bietet es natürlich wenig Mehrwert, wenn der Newsletter lediglich auf die Breite seines Smartphones optimiert ist und die Buttons viel zu klein zum antippen sind. Auch hier hat artegic vorgesorgt: Die Response-Elemente werden in Form und Größe verändert und optimal auf die Touchscreen-Bedienung angepasst – und zwar nicht nur äußerlich, sondern auch inhaltlich! Da die Endgeräte genau identifiziert werden können, ist es möglich, auch die Linkinhalte anzupassen. So erhalten iPhone-Nutzer beispielsweise einen Link zu einer App oder es wird je nach Endgerät auf die mobile oder “normale”  Webpräsenz geleitet.

Wir sind gespannt, wie es mit dieser Entwicklung weitergeht!

Der erste Schritt ist geschafft, der Abonnent hat die E-Mail geöffnet. Der erhoffte zweite Schritt ist oft das Klicken eines Call-to-Action Button. Dieser kann beispielsweise zu weiteren Informationen führen, eine Bestellung oder den Download eines Whitepapers auslösen.

Um die Aufmerksamkeit des Lesers zu fesseln und ihn zum Klicken zu bewegen, bliebt nicht viel Zeit. Ein aufmerksamkeitsstarker Call-to-Action Button muss her, um das Interesse des Nutzers beim Scannen der E-Mail zu wecken. Neben der optimalen Platzierung im sichtbaren Bereich des Newsletters spielt dabei vor allem die Optik eine entscheidende Rolle. In der Regel wird der Button deshalb als Grafik eingebunden.

Was tun, wenn das E-Mail-Programm des Empfängers die Bildanzeige unterdrückt?

Die Lösung sind Button-Layouts die aus HTML-Tabellen konstruiert werden. Vereinfacht gesagt: Der Button entspricht einer Tabelle mit genau einer Zelle. Mit HTML und CSS kann man den Button dann noch etwas gestalten. Da jede Tabellenzelle einen Bildpunkt darstellen kann, lassen sich neben einfarbigen Buttons auch optische Trennlinien und einfache Muster gut umsetzten.

Das Problem der Bildunterdrückung scheint gelöst, denn theoretisch lässt sich so ein ganzes Logo oder eine Grafik als Tabelle gerastert und für den Empfänger sofort sichtbar abbilden. Leider funktioniert dies eher in der Theorie, denn das Bild wird nicht nur oft pixelig angezeigt, sondern die Dateigröße steigt durch die Tabellen auch enorm an. Für Call-to-Action Buttons aber sicherlich ein Ansatz,  den man einmal getestet haben sollte.

Eine Anleitung mit exemplarischem Quellcode gibt es im Campfire-Blog.

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.