Archiv der Kategorie: Gestaltung

Artikel, die das Layout von Newsletter thematisieren

Design von Testimonials

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.

Newsletter-Darstellung in Google Mail

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.

Fünf Stufen zur Ansicht eines Newsletters

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.

Layoutraster für Newsletter

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

Text-Version eines Newsletters

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

HTML-Newsletter und Google Mail

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)

Eine letzte Nachricht an Microsoft

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.

Technical Preview von Microsoft Office 2010

Wer schon einen Blick auf die kommende Version von Microsoft Office werfen möchte, der hat nun die Möglichkeit sich für eine Vorabversion registrieren zu lassen. Die Registrierung garantiert allerdings keine Teilnahme an dem Programm.

Microsoft gibt in den nächsten ein bis zwei Monaten bekannt, wer die Vorabversion bekommt. Besonders für Newsletterdesigner ist dies eine Möglichkeit, sich schon mal die Möglichkeiten bzw. die Einschränkungen von Outlook 2010 in Bezug auf HTML-Mails anzuschauen.

Interessante Tweets

Ich folge schon seit längerem den Tweets von Dr. Schwarz, die aktuelle Informationen sowie Neuigkeiten zum Thema „E-Mail-Marketing“ bieten. Nachfolgend ein paar interessante Tweets der letzten Tage:

Herausforderungen für Newsletter auf mobilen Geräten

Mark Brownlow hat zwei zusammenhängende Blogbeiträge zum Thema „Newsletter auf mobilen Geräten“ veröffentlicht, welche auf die Herausforderungen eingehen, denen man auf diesem Gebiet begegnet. Er nimmt aber etwas den Wind aus den Segeln: Kommerzielle E-Mails werden zwar auf dem Handy etc. empfangen, aber eher selten direkt dort gelesen sondern für die Ansicht auf dem Desktop-Rechner aufgehoben, so dass der Fokus für das Design von Newslettern weiterhin auf diesem Bereich bestehen sollte. Nichtsdestotrotz sieht er auf mobilen Geräten Potenzial.

In erster Linie geht es darum, einen Newsletter so zu gestalten, dass er bei der ersten Ansicht nicht direkt gelöscht wird, sondern für einen späteren Abruf aufbewahrt wird. Besonders wichtig sind hierbei eine entsprechend gute Betreffzeile und ein immer wiederkehrender Absendername. Zum Beispiel sollten die wichtigsten Informationen im Betreff am Anfang stehen, da viele mobile Geräte diesen kürzen.

Desweiteren gibt es den Ansatz, einen Link auf eine mobile Version des Newsletters vorzusehen. Natürlich sollte die verlinkte Seite dann auch für mobile Geräte optimiert sein. Die zwei größten Herausforderungen sind laut Brownlow die Darstellung und das Benutzerverhalten in diesem Umfeld. Hier besteht die Frage nach dem Verhältnis von Aufwand zu Nutzen, gerade weil es so viele unterschiedliche Clients gibt. Er führt abschließend zu diesem Aspekt ein Zitat von Deirdre Cook an:

…unless there is a clear benefit to implementing a program today, for now, the best mobile strategy may be to use this time to enhance your knowledge of your customer’s mobile habits and preferences.

Es sollte zuerst herausgefunden werden ob wirklich der Bedarf für derartig optimierte Newsletter vorhanden ist.

Links: