Category Archives: html

10 große Kleinigkeiten für den Erfolg: Praktische E-Mail-Design-Tipps

Willkommensemail nach der Newsletter-Anmeldung

Willkommensemail nach der Newsletter-Anmeldung

Für DZ-Media (VG von Berlin nach Essen! :-) ) habe ich im Zusammenhang mit dem Website-Relaunch ein Newsletter-Template bzw. eine Willkommens-E-Mail erstellt, die Sie über die Newsletter-Bestellung auf dz-media.de in Ihr Postfach beamen können. Einige Takeaways aus dem Erstellungs- und Test-Prozess, die ich gerne mit Ihnen teile:

  1. Links mit text-decoration formatieren:
    Formatieren Sie Links immer mit dem CSS-Attribut

    style="text-decoration:underline;"

    im Tag

    <a ...>

    . So stellen Sie sicher, dass der Link durchwegs unterstrichen (= Webstandard) dargestellt wird. Der Webmailer web.de lässt standardmäßig nämlich den Unterstrich weg. Ohne Unterstrich verfehlt der Link möglicherweise die Aufmerksamkeitswirkung und die Response des E-Mailings verringert sich.

  2. Linktext nutzen:
    Platzieren Sie in Ihrer E-Mail Linktexte der Form

    http://www.IhreDomain.de/startseite.htm

    ? Dann achten Sie darauf, dass Ihre E-Mail-Versandsoftware für solche Links keine Trackinglink-Ersetzung vornimmt. Oder ändern Sie den Linktext um in z.B. “Startseite“. Denn stimmen Link-Text (in obiger Hyperlink-Form) und der darunter liegende Link nicht überein, schlägt Thunderbirds Phishing-Schutz Alarm. (Vgl. auch vorangegangener Beitrag)

  3. Absätze mit break :
    Erwägen Sie, Absätze mit

    <br />

    (= break, Zeilenumbruch) statt

    <p>

    (= Paragraph) zu formatieren. Denn beim

    <p>

    sind die Zeilenabstände in den Webmailern und E-Mail-Clients z. T. nicht einheitlich. Yahoo! Classic und neuerdings auch Googlemail fügen beispielsweise einen größeren Zeilenabstand ein, als die meisten anderen Freemailer/E-Mail-Clients. Evt. kann dies das Layout Ihres Newsletters stören.

  4. Aufzählungen mit •:
    Eine Aufzählung müssen Sie nicht zwangsweise mit <ul> und <li> formatieren, wie im klassischen Webdesign. Ähnlich wie beim <p> können hier die Abstände unterschiedlich interpretiert werden. Probieren Sie die save Variante über die HTML-Entität

    &amp;bull;

    , die einen Aufzählungspunkt liefert.

  5. Kommentare entfernen:
    Vergessen Sie nicht, vor dem Versand ggf. Kommentare im E-Mail-Template zu entfernen. Der Webmailer AOL interpretiert mitunter Kommentar-Anfang und -Ende falsch, sodass Teile des Kommentars unbeabsichtigterweise dargestellt werden können und somit das E-Mail-Layout stören:

    Vorsicht bei auskommentierten HTML-Teilen

    Vorsicht bei auskommentierten HTML-Teilen

  6. Rahmen-Tabelle nach <body>:
    Platzieren Sie Ihr Template immer in einer umschließenden Tabellen-Zelle (“Wrapping-Table“). Formatieren Sie diese (und idealerweise alle weiteren Zellen der verschachtelten, untergeordneten Tabellen) mit einer passenden Hintergrundfarbe. Denn Formatierungen im

    &lt;Body&gt;

    -Tag werden möglicherweise von Webmailern ignoriert/gefiltert. Und so vermeiden Sie nicht zuletzt Darstellungsfehler, die bei der Verwendung von Skins z. B. bei GoogleMail auftreteten können.

  7. Hintergrundgrafiken bei Googlemail:
    Üblicherweise werden Hintergrundbilder mit der CSS-Formatierung

    style="background-image:url(GRAFIKURL)"

    eingebunden. Dies funktioniert nicht zuletzt bei Outlook 2007 nicht, das je nach Verteiler eine hohe Verbreitung besitzen kann. Auch Googlemail, das ebenfalls verbreitet ist lässt diese Formatierung unbeachtet. Hier gibt es aber einen Workaround: binden Sie Hintergrundgrafiken über das Attribut

    &lt;td background="GRAFIKURL" &gt;

    in Tabellenzellen ein.

  8. Webanalytics nutzen:
    Bringt die Willkommens-E-Mail nun etwas? Beschäftigen sich die Leser mit den in der E-Mail angerissenen Inhalten? Um etwas Licht in die Frage “Was geschieht nach dem Klick” bringen zu können, binden Sie ein Webanalytics-Tool ein. Das Thema ist derzeit ein Trendthema der E-Mail-Service-Provider. Spannend insbesondere, wenn man an automatische Recovery-E-Mails an Warenkorb-Abbrecher denkt usw. Wem aber zunächst eine einfache Auswertungsmöglichkeit zur weiterführenden Erfolgsmessung ausreicht, kann auf das kostenlose Google Analytics zurückgreifen. (vgl. vorangegangener Beitrag)
  9. Snippet-Text nutzen:
    Der Snippet-Text wird als kurzer Anreißer von z. B. Thunderbird und Outlook 2007 beim E-Mail-Eingang im Balloon-Tip angezeigt. Auch Googlemail liefert im Posteingang neben dem Betreff einen solchen kurzen Ausschnitt aus dem E-Mail-Inhalt. In der Regel wird vom E-Mail-Client bzw. Webmailer hierfür der zuerst gefundene Text in der E-Mail gewählt – “Bei Darstellungsfehlern hier klicken” ist sicher suboptimal, da dies kein Interesse weckt. Besser: ein kurzer Inhalts-Teaser im Pre-Header der E-Mail. (Vgl. auch die Ausführungen von Mark Brownlow hierzu)
  10. Eyetracking-Test durchführen:
    Besonderes Schmankerl: die Aufmerksamkeitsanalyse (Stichwort “Eyetracking”) vom E-Mail-Service-Provider optivo, die im Erstellungsprozess wertvolle Hinweise darauf liefert, welche bzw. ob die wichtigsten Bereiche beim ersten Überfliegen der E-Mail mit dem Auge erfasst werden. Gefahr: Falls dies nicht der Fall ist, wird sich der Empfänger höchstwahrscheinlich nicht weiter mit der E-Mail auseinandersetzen. Von meinem Berliner AG habe ich ein paar Freikontigente erhalten (merci :-) ) – et violá:

    optivo: Aufmerksamkeitsstarke Bereiche in der E-Mail hervorheben

    optivo: Aufmerksamkeitsstarke Bereiche in der E-Mail hervorheben

    optivo: Voraussichtliche Heatmap per Mausklick erstellen

    Voraussichtliche Eye-Tracking-Heatmap (rot=hohe Aufmerksamkeit; weiß=keine Aufmerksamkeit)

    Zwar von der Aufmerksamkeitsverteilung noch nicht optimal, aber damit gebe ich mich erst einmal zufrieden :-) ; auf dem Team-Foto im Header beanspruchen die Mädels für meinen Geschmack etwas viel zuviel Aufmerksamkeit ;-) ;-) , aber gut… die bekannte Absender-Brand oben rechts wird auf den ersten schnellen Blick genauso wahrgenommen, wie Headlines und die verlinkten Handlungsaufforderungen. Im nächsten Schritt wären nun ein paar Tests für Optimierungen interessant:

    • Lässt etwa ein verkleinertes Brandlogo mehr Luft/Aufmerksamkeit für die Headlines
    • Liefert eine andere Formatierung (z. B. Schritfarbe) des Inhaltsverzeichnisses mehr Aufmerksamkeit auf diesen elementaren Teil der E-Mail
    • … ……

    Mehr zur Aufmerksamkeitsanalyse:
    http://www.optivo.de/de/solutions/products/broadmail/aufmerksamkeitsanalyse.html

Hervorhebungen in E-Mails mittels blinkendem Text

Eine bislang äußerst spärlich genutzte, aber prinzipiell sehr effektive Möglichkeit, E-Mails mit mehr Dynamik anzureichern ist blinkender Text. Dazu ein Beispiel aus dem coupons4u-Newsletter vom 27.2.09:

[youtube=http://www.youtube.com/watch?v=EPZPHkM5nPs]

Der Vorteil: eine derartig hervorgehobene Textpassage zieht nahezu garantiert Aufmerksamkeit auf sich und kann positiv & dynamisch wirken – und zwar auch dann, wenn externe Bilder, die als animierte Grafiken Dynamik erzeugen können vom E-Mail-Client oder Freemailer unterdrückt wurden (siehe Video 1-6 Sek.). Nachteil: da technisch keine Kontrollmöglichkeit über das Blinken hinsichtlich Dauer und Frequenz besteht, kann der Effekt auch zuviel Aufmerksamkeit auf sich ziehen, den Leser nerven und damit negativ wirken. Ferner wird der Effekt browserseitig nicht durch den Internet Explorer unterstützt.

Der Einsatz von blinkendem Text sollte also im Einzelfall immer hinsichtlich der Vor- und Nachteile genau abgewogen und wohl “dosiert” werden. Ferner sollte der blinkende Text nicht in lange Textabsätze integriert werden, da dies das Lesen des Absatzes stark erschwert. Wirkungsvoll ist die Formatierung z. B. als alleinstehender Link oder als Headline/Claim im Rahmen eines kurzen 2- oder 3-Zeilers mit knappen Worten. Die Einbindung im coupons4u-Newsletter (siehe Video) finde ich persönlich z. B. sehr gelungen…

Welche Möglichkeiten der Implementierung gibt es und wie sieht die Unterstützung der Möglichkeiten bei den E-Mail-Clients und Freemailern aus?

Möglichkeit 1: HTML

Der hervorgehobene Text wird einfach in die HTML-Tags

&lt;blink&gt;...&lt;/blink&gt;

eingeschlossen.

Möglichkeit 2: CSS

Hierbei wird dem entsprechenden HTML-Tag über CSS die Text-Eigenschaft

text-decoration:blink;

hinzugefügt. Beispiel für einen Hyperlink:

&lt;a href="http://css4you.de" style="text-decoration:blink;"&gt;...&lt;/a&gt;

Unterstützung gängiger Clients[1]:

HTML? CSS?
gmx.de nein ja
web.de nein ja
Yahoo! Mail nein ja
AOL nein ja
Googlemail nein ja
Windows Live nein ja
Freenet ja ja
Thunderbird 2 ja ja
Outlook 2007[2] nein nein
Outlook 2002 nein nein

Somit ist klar: wenn blinkender Text genutzt wird, sollte die Einbindung in jedem Fall über eine CSS- statt HTML-Formatierung erfolgen.

Fußnoten

[1] Die Webmailer wurden hier im Mozilla Firefox getestet; der Internet Explorer unterstützt die blinkende Formatierung gänzlich nicht. Hier wird der Text statisch eingeblendet.

[2] Bei Outlook 2007 funktioniert das Attribut nicht korrekt – die Hintergrundfarbe blinkt mitunter, was aber eher wie ein Darstellungsfehler wirkt.

Couponing per Barcode-Aufdruck in E-Mails

Abb. 1: EAN 13-Strichcode als Grafik zur Einbindung in eine E-Mail

Abb. 1: EAN 13-Strichcode als Grafik zur Einbindung in eine E-Mail

Jürgen Unger von DWMS macht im Xing-E-Mail-Marketing-Forum darauf aufmerksam, dass über die DWMS-E-Mail-Infrastruktur nun auch Coupons als Strichcodes in E-Mailings eingebunden werden können:

(…) In der Filiale wird dieser ausgedruckte Strichcode dann an der Scannerkasse gutgeschrieben und zeitgleich entwertet. Schummeleien durch Mehrfachausdruck oder Kopieren des klasischen Coupons sind damit ausgeschlossen.

Die Strichcodes können mit personalisierten Informationen angereichert werden, die bei aggregierter Auswertung der Aktion nach dem Clearing wertvolle Informationen liefern können:

Zugleich können aber die Barcodes auch mit individuellen Zusatzinformationen versehen werden (z.B. sozio-demographische Cluster) oder man kann Testen, welches der zusätzlichen Angebote in der Mail (Sponsor?) wie gewirkt hat.

Weitere Auskunft per E-Mail:

Falls gewünscht, kann auch die nächstgelegene Filiale individuell in die Mail eingespielt werden – Voraussetzung ist lediglich die Übermittlung der Postleitzahlen der teilnehmenden Filialen. Wir nutzen für dieses Feature [Barcodes in E-Mails] im ersten Schritt unseren eigenen Adressbestand (650.000 mit postalischer Adresse bzw. 990.000 insgesamt) (…)

Barcodes in E-Mails: online meets offline

Half Price Books mit Strichcode-Coupons (Quelle: Smith-Harmon)

Half Price Books mit Strichcode-Coupons (Quelle: Smith-Harmon)

Coupon-/Gutscheinaktionen in Form von Barcodes in E-Mails und Newslettern stellen eine interessante Verknüpfung von Online- und Offline-Welt dar. Auch wenn diese Verknüpfung durch den Medienbruch (“zur Filiale gehen”) und Aufwand (“ausdrucken”) auf den ersten Blick schwach sein mag – laut einer (US-)Studie von Epsilon (vgl. vorangegangener Beitrag) kauften 2008 immerhin 67% stationär ein Produkt mit Bezug auf eine E-Mail des Händlers.

Ablauf eines Couponings

Für ein effizientes elektronisches Clearing in der Filiale des Händlers werden die Coupon-Informationen in der Regel als Europäische Artikel Nummer (EAN) kodiert. Die Nummer kann grafisch dargestellt dann als Barcode-Grafik (vgl. Abb. 1) in die E-Mail eingebunden werden. Diese Grafik kann wiederum – in der ausgedruckten E-Mail – mit dem Kassenscanner gelesen und dann verarbeitet werden.

In den Code sind standardmäßig die folgenden Informationen zu integrieren: 981 oder 982 als Couponpräfix für Gutscheine,[1] Couponherausgeber, Rabattwert, Produkt und Gültigkeitsdatum.[2] Zur Abbildung reicht hier die 13-stellige Standard-EAN als Gutscheinnummer. Daneben können weitere Informationen kodiert werden, wie z. B. eine eindeutige Seriennummer (zur eindeutigen Zuordnung oder Vermeidung von Mehrfacheinlösungen). Hierzu kann das EAN 128-Protokoll eingesetzt werden, das über den längeren GS1-128-Strichcode grafisch abgebildet wird.[3]

Praxis: Implementierung einer Barcode-Lösung

JanieAndJack mit Strichcode-Coupon (Quelle: Smith-Harmon)

JanieAndJack mit Strichcode-Coupon (Quelle: Smith-Harmon)

Wer selbst eine einfache Lösung für die Implementierung von Coupons als Barcodes in seine E-Mailings schaffen möchte, ist vielleicht schon mit einer der verfügbaren Public Domain-Lösungen gut beraten. Ich empfehle den Test der Bibliothek PHP-Barcode. PHP-Barcode ist Open-Source, steht unter der GNU General Public License und ist bereits Teil des populären XAMPP-Paketes. Die Lösung ist geeignet zur Erzeugung von EAN-13, EAN-8, UPC, ISBN, 39, 128(a,b,c), I25, 128RAW, CBR, MSI, PLS, 93. Die Implementierung des Barcodes in Ihre E-Mail erfolgt nach der Installation dann per Grafikeinbindung:

&lt;img src="barcode.php?code=[EAN_13_VARIABLE]"&gt;

wobei [EAN_13_VARIABLE] beim Versand dynamisch durch die EAN-13-kodierten Gutscheincodes der E-Mail-Empfänger ersetzt wird.

Fußnoten

[1] Vgl. Coupons erobern Deutschland auf Seite 2 [pdf, 4 Seiten], erschienen auf gs1-germany.de.

[2] Vgl. gs1-germany.de: Personalisierte Gutscheine.

[3] Vgl. EAN 128-Standard für personalisiertes Couponing [pdf, 2 Seiten], erschienen auf: gs1-germany.de.

CSS-Support deutscher Freemailer

sitepackage:// hat die CSS-Unterstützung einiger im deutschsprachigen Raum verbreiteter Freemailer unter die Lupe genommen. Im Vergleich mit dabei:

  • GMX
  • Freenet
  • Web.de
  • Hotmail
  • Yahoo

Das Tutorial ist in zwei Teile gesplittet und hier abrufbar:

(Via EmailMarketingBlog.de)

Inbox: Hervorhebung der persönlichen Anrede

Hervorhebung der persönlichen Anrede

Abb. 1: myPrinting.de: Hervorhebung der persönlichen Anrede

Gerade trudelte ein Mailing von myPrinting.de via adRom in meinem Posteingang ein (vgl. Abb. 1). Auch wenn es mit der Ersetzung der Variablen beim Versand scheinbar nicht so ganz geklappt hat (“(…), Herr/Frau Nachname, bald ist wieder Valentinstag.”) – die Hervorhebung der Anrede durch die blaue (bzw. wahrscheinlich bei Frauen pinke) Hintergrundfarbe sowie den Rahmen finde ich gelungen und ist mir einen Tipp wert.

Bedeutung der Anrede

die Anrede geht unter

Abb. 2: Yves Rocher: Anrede geht unter

Nichts liest der Leser lieber, als seinen Namen“; vom Anstand und der Wertschätzung des Lesers ganz abgesehen – durch eine Anrede wirkt die E-Mail persönlicher und der Leser fühlt sich direkt angesprochen. Somit gelingt es eher, eine Brücke zwischen Werber und Leser zu schlagen und die Werbebotschaft dringt besser durch. Nur was nützt es, wenn die persönliche Anrede unter geht und nicht wahrgenommen wird (vgl. Abb. 2)… Durch eine Hervorhebung wie in Abb. 1 kann ein positiver Effekt auf die Aufmerksamkeit nahezu sichergestellt werden.

Die Formatierung der Anrede aus Abb. 1 in HTML zum Testen:

&lt;span style="background-color: #8DD4F9; border: black 1px solid;
font-size: medium;"&gt;&lt;font size="4"&gt;
SALUTATION LASTNAME&lt;/font&gt;&lt;/span&gt;