Archiv der Kategorie: Gestaltung

Artikel, die das Layout von Newsletter thematisieren

Mailrox: HTML-E-Mails codieren leicht gemacht

Schluss mit langwieriger Codierung von HTML-E-Mails: Mit dem cloud-basierten Tool Mailrox können diese schnell und unkompliziert erstellt werden. In nur wenigen Schritten entstehen Templates, die mit allen gängigen E-Mail-Clients kompatibel sind:

  1. Design-Vorlage des Newsletters hochladen.
  2. Tabellen-Layout per Drag ’n Drop erstellen – so werden unterschiedliche Inhaltesbereiche geschaffen.
  3. Bereiche mit individuellem Inhalt (Text, Bilder, Links) und/oder HTML befüllen. Testversand durchführen, Browser-Preview ansehen oder Testreport für unterschiedliche E-Mail-Clients abrufen.
  4. Als .zip-Datei oder Template für die E-Mail-Anbieter MailChimp und Campaign Monitor exportieren.

Klingt einfach – ist es im Prinzip auch. Allerdings: Ohne HTML- und CSS-Kenntnisse geht es auch hier nicht. Die Umsetzung von Responsive Designs ist aktuell noch in der Entwicklung. Mailrox befindet sich bisher im geschlossenen Beta-Status, eine Einladung kann aber ganz einfach per E-Mail angefordert werden.

Mozify: Bildanzeige trotz Bildunterdrückung im E-Mail-Client

Über 80 % der E-Mail-Clients unterdrücken standardmäßig die Bildanzeige. Wichtige Botschaften und Call-to-Actions werden deshalb vom Empfänger eventuell nicht wahrgenommen. Wie wäre es da mit einem praktischen Tool, dass Bilder in HTML-Tabellen oder formatierten HTML-Text konvertiert? Mozify von Email on Acid ist ein Dienst, der genau so etwas kann.

Wird der konvertierte Code in den Newsletter aufgenommen, sollen knapp 80% der E-Mail-Empfänger zukünftig diese „Bilder“ sehen können – trotz Bildunterdrückung. Die Empfänger erhalten so einen ersten optischen Eindruck der E-Mail, wichtige Inhalte fallen direkt ins Auge. Sofern die Bildunterdrückung deaktiviert ist, werden wieder die Originalbilder aus dem Newsletter angezeigt. Tests ergaben große Steigerungen der Klickraten und Konversionen.

Auch wenn der Ansatz nicht neu ist – ein Versuch lohnt sich! Wer Interesse daran hat, kann sich kostenlos für die Beta-Version von Mozify regisitrieren. Email on Acid bietet zudem Dienste für Previews in unterschiedlichsten E-Mail-Clients, Vebesserung der Zustellrate und HTML-Optimierung an.

Mozify Demonstration from Michelle Klann on Vimeo.

Eye-Tracking mit der Newsletter-Software

Beim Eye Tracking werden die Augen- und Blickbewegungen von Testpersonen auf dem Bildschirm erfasst. Dabei werden beispielsweise Reihenfolge und Intensität der Betrachtung verschiedener Elemente gemessen. Eine ideale Funktion also, um Design und Aufbau eines Newsletters qualitativ zu testen und eine Aussage darüber zu treffen, welche Elemente tatsächlich das Interesse des Leser wecken und dadurch die Performance steigern.

In der Regel wird Eye Tracking mit ausgewählten Probanden in einer Testumgebung durchgeführt und ist somit sehr aufwändig: Nicht nur benötigt man repräsentative Testpersonen, sondern auch das entsprechende Equipment. Deshalb bieten immer mehr Hersteller von Newsletter-Software ein Vorab-Eye-Tracking an. Dabei „schaut“ der Computer auf das Design und markiert diejenigen Bereiche, die dem realen Betrachter aufgrund von Eigenschaften wie Schriftgröße, Farbe oder Position voraussichtlich ins Auge fallen werden.

Dieses computerbasierte Eye Tracking hat allerdings, neben der Tatsache, dass Computer eben keine Menschen sind, den Nachteil, dass der Newsletter isoliert und nicht in seiner natürlichen Umgebung, dem E-Mail-Client, betrachtet wird. Diese stellen den Newsletter beispielsweise nicht vollständig dar oder besitzen eigene Eye-Catcher, die vom Newsletter-Design ablenken. Die Aussagekraft einer solchen Analyse relativiert sich also.

Wer die Grundsätze für Newsletter- bzw. Web-Design im Allgemeinen befolgt, wird durch den computergestützten Test in der Regel wenig Überraschendes erfahren – testen sollte man ein solches Feature, sofern vom Dienstleiter angeboten, natürlich trotzdem. Ein Eye Tracking mit realen Personen kann dagegen beispielsweise beim Aufsetzten des grundlegenden Newsletter-Templates sinnvoll sein.

Responsive mobile E-Mail-Design

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!

Bildunterdrückung: Call-to-Action Button aus HTML-Tabelle

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.

Bildanzeige in Newslettern optimieren

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.

Tipps für die Erstellung eines E-Mail-Newsletters

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!

Weiterlesen

Hotmail macht Newsletter-Überschriften grün

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

Newsletter-Vorschaubild in Facebook

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.

E-Mail-Templates und 20 Designpraktiken

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!