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

Jonathan Miller hat vor drei Tagen einen Artikel veröffentlicht, der auf das Design der Text-Version eines Newsletters eingeht. Laut ihm ist das genauso wichtig wie das Design der HTML-Version, was ich absolut bestätigen kann, da viele Clients erstmal die Text-Version anzeigen. Er gibt für die Gestaltung folgende Tipps:

• Absätze, die in der HTML-Version vorgesehen sind, sollten sich auch in der Text-Version wiederfinden
• Unterstriche benutzen um den Newsletter in Blöcke zu gliedern
• Überschriften sollten nicht mehr als 50 Zeichen pro Zeile einnehmen
• Generell sollten 70 Zeichen pro Zeile nicht überschritten werden
• Alle Links mit “http://” voran schreiben damit sie den von Clients als Links erkannt werden
• Zeichen wie ® oder ™ ausschreiben, z.B. “(R)”
• Listenpunkte mit Sternchen oder anderen Symbolen kennzeichnen
• Mit Hexcodes formatierte Satzzeichen ausschreiben

Es gibt zwei gute Nachrichten und eine schlechte Nachricht was die Darstellungsmöglichkeiten von HTML-Newslettern bei Google Mail betrifft. Zuerst die guten Nachrichten: Es wird die CSS-Eigenschaft background-repeat untersützt, so dass nun genau festgelegt werden kann ob ein Hintergrund gekachelt werden soll oder nicht. Ein Hintergrundbild muss aber weiterhin über das HTML-Attribut background definiert werden. Desweiteren wurde die Unterstützung für die HTML-Attribute cellpadding und cellspacing wieder aktiviert, was die Darstellung von klassischen tabellenbasierten Newslettern zu Gute kommt.

Nun die schlechte Nachricht: Der <p>-Tag wird nicht mehr korrekt dargestellt. Der Abstand der normalerweise zwischen zwei solcher Tags erscheint, wird von Google Mail komplett ignoriert. Um dieses Problem zu umgehen müssen z.B. zwei <br>-Tags für den Abstand verwendet werden.

(Via The ExactTarget Blog)

Das Email Standards Project (ESP) hat vor knapp drei Wochen zu einer Twitteraktion aufgerufen, welche Microsoft dazu bewege sollte, die Unterstützung von Web Standards in Outlook 2010  zu berücksichtigen. Knapp 25.000 Twitternutzer haben sich an dieser Aktion beteiligt. Leider war Microsoft wenig einsichtig.

Als letzte Nachricht schickt das ESP nun ein Mosaikbild aus Bildern aller beteiligten Twitternutzer per Post an den Leiter der Office-Abteilung. Es ist zwar sehr unwahrscheinlich dass dieser sich davon bekehren lassen wird, aber es ist meiner Meinung ein guter Abschluss dieser Aktion.