Schlagwort-Archive: design

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)

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.

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:

Email Design Look Book

Nico Zorn macht in einem aktuellen Blogbeitrag auf eine kostenlose PDF-Datei mit Beispielen kreativer Newsletter-Designs aufmerksam. Das Dokument umfasst 23 Seiten und ist nach einer kostenlosen Registrierung auf der Seite der Agentur Smith-Harmon erhältlich.

Das Autorenteam fasst den Inhalt des Dokuments wie folgt zusammen:

The Smith-Harmon team reads tens of thousands of emails each year to stay current on trends and gather new ideas to give our clients an edge in the inbox. We’ve assembled 20 B2C emails from the past year that really stood out in the minds of our staffers and compiled them into the first annual Email Design Look Book.

Microsofts Antwort auf die Twitteraktion

Etwas mehr als 20.000 Twitterbenutzer haben sich an der gestrigen Aktion beteiligt, um Microsoft auf den schlechten Support von HTML im kommenden Outlook 2010 aufmerksam zu machen. Leider wohl vergebens, denn William Kennedy von Microsofts Office Team zeigt sich in einem aktuellen Blogbeitrag relativ uneinsichtig was die Problematik angeht.

Er fängt damit an, dass es durch die Nutzung der Word-Engine möglich ist, sehr einfach professionelle und visuell beeindruckende HTML-E-Mails zu verfassen und liefert auch gleich ein paar Beispiel-Screenshots. Die Initiative zielte aber gar nicht darauf ab, die Word-Engine zu verbannen, sondern sie kompatibler gegenüber Webstandards zu machen. Nach Kennedys Meinung gibt es keinen einheitlichen Konsens für die Darstellung von HTML in E-Mails:

There is no widely-recognized consensus in the industry about what subset of HTML is appropriate for use in e-mail for interoperability.

Das verstehe ich nicht ganz. Es gibt einen einheitlichen Konsens darüber wie man HTML darstellt. Ob Browser oder E-Mail-Client sollte nicht relevant sein. Das sieht auch das Email Standards Project so:

It doesn’t make sense to advocate a completely different set of standards to stipulate how HTML should be rendered in an email client as opposed to a web browser.

Des Weiteren geht er noch kurz darauf ein dass die Word-Engine keine Skripte (JavaScript etc.) ausführt, damit der Benutzer hier kein Sicherheitsrisiko hat. Davon war auch nie die Rede, nichtsdestotrotz ist das gut. Für mich liest sich das wie der Versuch, andere Clients gegenüber technisch nicht versierten Lesern zu diskreditieren. Eine Sache wird noch angesprochen, die man Microsoft zu Gute halten muss: Es ist genau dokumentiert was HTML-technisch in Outlook funktioniert oder auch nicht. Eher nicht.

Fazit: Es scheint, als ob wir uns auch die nächsten Jahre mit dem Design von HTML-Newslettern für Outlook rumschlagen müssen.