Orange Marketing Blog

Archiv für das Artikel-Schlagwort: "HTML"

Social Media gewinnt immer mehr an Bedeutung und darf nicht ignoriert werden. Ich hatte bereits im Juni einen Beitrag über dieses Thema verfasst: Share With Your Network und E-Mail Marketing - Mehr CTR und Newsletter-Abonnenten mit SWYN-Links

Welche Plattformen eignen sich aber besonders für B2B? In Deutschland werden Facebook, Xing, LinkedIn und Twitter am meisten benutzt und mittlerweile bieten alle die “Sahre With Your Network” -Funktion an. Der Nutzer klickt auf einen Button und schon kann er den Newsletter in seinem SM-Account mit anderen teilen.

Beispiel Facebook:

Wie bindet man aber diese Funktion in seinem Newsletter ein. Ich zeige hier, wie man mit relativ geringem Aufwand den eigenen Newsletter mit den vier meist genutzten B2B-Plattformen verbindet und somit den Newsletter “Sozial” macht! Weiterlesen »

Oft scheitern schöne Newsletter-Designs daran, dass aufwendige Grafiken erstellt werden müssen bzw. Texte in Grafiken eingebettet werden müssen und somit jede Änderung am Text auch gleichzeitig eine Grafik-Änderung mit sich bringt. Ein viel größeres Problem ist es jedoch, wenn Grafiken geblockt werden! Denn dann sieht man auch keinen Text!

Das Problem kann man nun mit einem einfachen Trick umgehen! Hier sehen sie die Anleitung, wie Sie Grafiken auch als Hintergrundbilder in Ihren HTML-E-Mails einbinden können! Weiterlesen »

Der wichtigste Grund für eine HTML-E-Mail ist natürlich der Einsatz von Grafiken für das Design eines Newsletters oder die Darstellung wichtige Inhalte wie z. B. Charts oder auch Personen. Nun kann man nicht ohne Bedenken beliebige Bildformate in einer E-Mail einfügen! Verschiedene E-Mail-Clients reagieren unterschiedlich auf diverse Bildformate. Damit das HTML-Design nicht drunter leiden muss, sollte man einiges beachten:

Bildformat

Generell sollten in HTML-E-Mails die für Web vorgesehene Grafikformate, welche auch nicht so moderne Browser anzeigen können eingesetzt werden: die Formate GIF und JPEG. Das Format PNG gewinnt im Web-Bereich wegen der hohen Komprimierungsrate des Bildes also eine sehr hohe Qualität mit einer kleinen Dateigröße zunehmend an Beliebtheit, wird jedoch oft aus Sicherheitsgründen von Firewalls geblockt oder von einigen E-Mail-Clients nicht unterstützt! So zeigt Lotus Notes erst ab der Version 8.5 PNGs in HTML-E-Mails.

Animation (Flash und bewegte Bilder GIFs)

Flash
Von Flash sollte man generell die Finger lassen. Flash funktioniert in keinem E-Mail-Client und Webmail! Möchte man Videos in E-Mails einfügen, dann sollte man den Film auf einem Server laden und aus der E-Mail heraus mit einem Screenshot darauf verweisen!

Animierte GIF
Auch hier sind die Einsatzmöglichkeiten begrenzt, denn Outlook unterstützt in der Versionen 2007 und 2010 animierte GIFs nicht! So wird statt der Animation nur der erste Frame der Animation als ein statisches Bild angezeigt! Da sich Outlook noch als Standard-Client für E-Mails mit über 30% behaupten kann und in B2B Bereich besonders beliebt ist, sollte man sehr vorsichtig mit animierte GIFs in E-Mails umgehen!

Lotus Notes und Outlook reagieren unterschiedlich auf:

• Aufzählungsangaben in HTML: <ul> und <ol>
• Ausrichtung von Grafiken: .<…align=”middle”…>

Outlook 2007

Während Lotus Notes auch in Version 7 align=”middle” akzeptiert, wird diese Angabe von Outlook 2007 ignoriert! So kann man z. B. einen Download-Link nicht an einem PDF-Icon vertikal zentriert ausrichten!

Lösung:
Link und Grafik in einer Tabelle mit zwei Spalten packen und die Spalten (<td>) mit valign=”middle” versehen. So kann man sicherstellen, dass der Text immer vertikal zentriert an Grafik ausgerichtet ist.

Lotus Notes

Aufzählungen im Text sind nichts Besonderes. Das stimmt nicht ganz, wenn man mit Lotus Notes zutun hat! Zwar klappt es mit der Aufzählung jedoch die Absätze oberhalb und unterhalb der Aufzählung haben keinen Zeilenabstand zur Aufzählung selbst. So kleben sie buchstäblich aneinander!

Aufzählung in Lotus Notes

Auch ein line break <br /> hilft da nicht viel, da man damit den Abstand in anderen E-Mail Clients um eine weitere Zeile vergrößert.

Lösung:
Wieder mal hilft hier die Tabellen-Struktur. Einfach die Aufzählungen in einer Tabelle packen, <li>’s ohne <ul></ul> bzw. <ol></ol> angeben und jeweils in Absätzen oben und unten einen Zeilenabstand mit <br /> einfügen:

Absatz oben…<br />
<table>
<tr>
<td>
<li>Aufzählung 1</li>
<li>Aufzählung 2</li>
<li>Aufzählung 3</li>
</td>
</tr>
</table>
<br />Absatz unten…

Das funktioniert in Outlook 2007, Lotus Notes und auch in anderen E-Mail Clients.

Diese Angaben werden gerne und oft vergessen und das führt zu einem Design-Bruch in HTML-E-Mails. Die Webmailer sind da resistenter jedoch bei Outlook und Lotus Notes können die fehlenden Angaben zum Darstellungsfehler führen:

Breiten- und Höhen-Angaben für Bilder
Die fehlenden Angaben führen dazu, dass die Clients mit der Voreinstellung “Bilder in HTML-E-Mails nicht direkt anzeigen” die Dimensionen der Grafiken nicht berechnen können und somit wird an dieser Stelle den Platzhalter (mit dem bekannten, roten X) für das geblockte Bild über die gesamte Breite des Fensters gezogen. So wird aus einer Newsletter-Breite von z. B. 700px eine von sagen wir mal 1000px und das kann fatale Folgen für das Design haben. Auch die Höhen-Angaben sind wichtig, damit bei geblockten Grafiken die Formatierung des Newsletters bestehen bleibet!

Fehlende Breiten- und Höhen-Angaben für Spalten “<td>”
Dass die Breiten-Angaben nicht fehlen dürfen und für die richtige Aufteilung der Spalten wichtig sind, ist klar. Anders sieht es jedoch mit den Höhen-Angaben aus. Während Outlook und Webmailer die Höhen-Angaben für <td> akzeptieren, werden diese von Lotus Notes bis Version 7 ignoriert! Das kann dazuführen, dass die verschiedenen Bereiche des Newsletters, welche in mehreren Zeilen unterteilt sind, aneinander kleben. Auch wenn ich ungern transparente GIFs als Abstandhalter sehe, sind diese unentbehrlich, wenn mann die Formatierung in Lotus Notes beibehalten möchte!

Der Zukunftstrend geht immer weiter in Richtung mobile PCs.

Die aktuellen Funktelefone sind jetzt schon für viel mehr als nur telefonieren gebaut und gedacht. Sie haben E-Mail und Messenger Funktionen, können Dokumente lesen und bearbeiten und dank immer günstiger werdenden Tarifen, kommen diese Funktionen auch immer häufiger zum Einsatz! Nur ein kleines Problem haben alle diese Geräte und das ist das kleine Display. Anders gesagt ist das kein Problem, sondern eine neue Herausforderung für Webseitenbetreiber und vor allem E-Mail Marketer. Wie schafft man es, dass der Empfänger seinen Newsletter auch unterwegs vernünftig lesen kann? Die Antwort ist eine Version, die zwar ebenfalls HTML-codiert ist, damit man trotzdem die Klicks aufzeichnen kann, aber nur Textelemente enthält. Man bietet sozusagen neben der Webversion auch eine Mobilfunkversion an! Da die Mobilversion keine Designelemente enthält, kann man sie mit sehr geringem Aufwand erstellen! In E-Mail weist man dann z. B. mit diesem Satz auf die Versionen:

Falls Sie diese E-Mail nicht richtig lesen können, wählen Sie eine der folgenden Varianten: Webversion oder Mobilfunkversion.

Probieren Sie doch diesen Vorschlag aus und schauen Sie, wie viel Prozent Ihrer Empfänger Ihre E-Mails von unterwegs lesen. Ist bestimmt sehr interessant zu wissen oder?

Gerade bei etwas umfangreicheren Newsletter ist es sinnvoll eine Navigations- bzw. Menüleiste anzubieten, um dem Empfänger einen besseren Überblick zu verschaffen aber…

In Lotus Notes funktionieren diese sogenannten Anker-Links nicht. Auch bei diversen anderen Webmailern kommt es immer wieder zu Problemen. Diese Verweise sind jedoch sehr wichtig, denn ohne sie muss der Empfänger die ganze Zeit hin und her scrollen und verliert irgendwann die Lust am Lesen. Also wie kann man das Problem umgehen?

Ganz einfach! Über die Webversion des Newsletters kann man dieses Problem lösen, in dem man den Empfänger mit dem Klick auf den Menülink direkt auf die Webversion weiterleitet.

Hier ein Beispiel:

Quellcode der HTML-E-Mail
<a href=”http://www.muster-webversion-newsletter.de/#Anker1″>Link1</a>

Quellcode der Webversion des HTML-Newsletters
<a name=”Anker1″>Ziel1</a>

So wird der Empfänger mit dem Klick direkt auf die Webversion des Newsletters und genau auf die gewünschte Stelle geleitet und kann weiterhin den Newsletter ohne Einschränkungen weiterlesen. Das funktioniert aus jedem E-Mail-Clint und Webmail heraus!

Zeichencodierungsfehler in HTML E-Mails gefährden auch den Erfolg einer Kampagne!

Jeder hat schon einmal diesen Effekt gesehen. Die E-Mail sieht plötzlich nicht mehr so aus, wie sie aussehen sollte. Bindestriche werden als Quadrate angezeigt und aus “ß” wird “?” usw. Aber woran liegt das? Schließlich am eigenen Bildschirm sah alles ganz gut und fehlerfrei aus!
Dieses Problem taucht auf, wenn z. B. E-Mail-Programme wie Outlook oder Lotus Notes empfangene E-Mails decodieren und anzeigen möchten und dabei keine Zeichencodierungsvorgaben vorfinden. Somit kann die Darstellung der Sonderzeichen fehlschlagen!

Zeichencodierungstabellen
Um das Problem besser zu verstehen, gehe ich an dieser Stelle kurz auf “Character-Set” ein. Jeder Buchstabe und jedes Zeichen ist in einer bestimmten Codierung hinterlegt und wird auch danach angezeigt. Im Laufe der Zeit kamen aus diversen Gründen (Sonderzeichen, Sprachen usw.) verschiedene Codierungstabellen zustande und damit ist auch ein neues Problem geboren! Wenn ein Zeichen in einer Tabelle nicht definiert ist, kann es auch nicht nach der Codierung dieser Tabelle dargestellt werden! Wenn man einen Text verfasst und die Codierung nicht vorgibt, können andere Programme und Server, die eine andere Codierung als Standard benutzen den Text unter Umständen nicht fehlerfrei anzeigen. Die am meisten verbreiteten Codierungen sind ISO-8859 und UTF-8.

Wie kann man das Problem vermeiden?
Der E-Mail-Server muss richtig konfiguriert sein und die E-Mails mit der richtigen Codierung verschicken. Natürlich kann man im Quellcodebereich “<head>” mit der Angabe der Meta-Tag eine Codierung vorgeben, jedoch viele E-Mail-Server überschreiben den Bereich “<head>” mit eigenen Angaben! Daher sollte die Konfiguration unbedingt auf der Server-Ebene vorgenommen werden.

Hier sind zwei Beispiele für die Meta-Tag-Angabe:

Für HTML
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>

Für XML
<?xml version=”1.0″ encoding=”utf-8″?>

Man trifft im Netz oft den Hinweis, „setzt bitte target=“_blank“ für alle Links, damit sie in ein neues Fenster aufgehen“ aber ist es wirklich so wichtig?
Das mag wohl für die Webversion des Newsletters (Landingpage) wichtig sein jedoch E-Mail Clients wie Outlook oder Lotus Notes öffnen automatisch ein neues Fenster und viele Webmails ebenfalls.

Wenn man einen Newsletter programmieren möchte, hat man ganz andere Sorgen! Viele CSS-Befehle werden von diversen Clients oder Webmails nicht korrekt interpretiert. Man kann sagen, dass die Programmierung einer HTML-Email sich von Webdesign komplett unterscheidet. Die Technik kommt hier zuerst. Daher sollte man ganz genau prüfen, welche Befehle unterstütz werden, dann wird schnell deutlich, dass die Möglichkeiten begrenzt sind.
Design-Probleme sollte man aber auch nicht immer mit Bildern lösen. Wenn das Bild-Text-Verhältnis zu groß wird, könnte die Email auch als Spam markiert werden.

Die ganze Sache kann also schnell ins Auge gehen. Nicht selten bekommen wir Newsletter, die mit Microsoft Word erstellt und dann als Webseite gespeichert wurden. Viele denken, dass sie so Geld sparen und damit argumentieren, dass sie auch früher Newsletter und E-Mails über Outlook verschickt haben. Auf die Frage ob sie jemals gesehen haben, wie sie beim Empfänger ankamen, erfolgten nicht selten Sekunden der Stille. Nicht immer bekommt man eine Reaktion vom Empfänger. Viele löschen einfach die E-Mails (falls sie überhaupt ankommen sollten) oder bestellen den Newsletter ab. Also wenig oder gar keine Beschwerden heißt nicht automatisch, dass alles in Ordnung sein muss. Hier ist es wieder die Kommunikation gefragt. Auch mal nachfragen, wie die Newsletter beim Empfänger ankommen.

Anmeldungen für einen Newsletter sind wichtig. Noch wichtiger ist es aber sie auch zu behalten!

Was vor 10 Jahren kaum ein Thema war, ist heutzutage eine Plage, die nicht nur Firmen, sondern auch immer mehr Privatpersonen heimsucht.

Zahlreiche Produkte und immer strenger konfigurierte Spamfilter trotzen Spam-E-Mails entgegen. Aber nicht nur Spam-E-Mails, immer öfter fallen auch wichtige E-Mails und Newsletter, die man selber abonniert hat Spamfilter zum Opfer. In diesem Fall spricht man von „False-Positive“.

Wie kann man aber verhindern, dass so etwas eigenem Newsletter widerfährt! E-Mail und Newsletter-Dienstleiter sprechen immer mehr davon, dass sie eine hohe Zustellrate nachweisen können und sprechen von bis zu 96% Zustellrate oder auch mehr. Dass ihre E-Mail-Server richtig konfiguriert sind oder sie auf diverse White-Lists gelistet sind, setzen wir voraus aber ein wichtiger Faktor bleibt der Kunde und seine Texte, die er schreibt! Alles nutzt nichts, wenn der Verfasser sich nicht an gewisse Spielregel hält und dazu muss er wissen, wie Spamfilter funktionieren.

Viele Spamfilter gehen nach einem Punkteprinzip vor und je nachdem wie streng ein Filter eingestellt ist, reichen z.B. 7 Punkte aus, um eine E-Mail als Spam zu markieren. Nachfolgend 10 wichtige Hinweise, wie diese Punkte zustande kommen:

• Spammer sind ganz schlechte Kodierer! Daher sollte man darauf achten, dass bei HTML-E-Mails, die Kodierung sauber und richtig sein sollte. Manche verfassen Ihre Newsletter in Word und speichern ihn als HTML und nutzen diesen dann für Ihr Newsletter. Spamfilter kommen mit MS-Office spezifische Kodierung nicht zurecht.
• Verhältnis Bilder und Texte. Punkte gibt es auch dafür, wenn in einer E-Mail verhältnismäßig mehr Bilder als Texte benutzt werden sollten. Grund dafür ist, dass viele Spammer auch Texte als Bilder speichern, um von Spamfilter nicht erfasst zu werden.
• Die Betreffzeile sollte keine eindeutige Nutzer-ID’s enthalten, die den Empfänger identifizieren. Genauso keine Sonderzeichen oder mehrere Leerzeichen hintereinander. Man sollte auch nicht alles im Betreff groß schreiben oder jedes Wort mit einem Großbuchstabe anfangen. Auch Aussagen, die etwas garantieren oder gar Kostenlos anbieten, sollte man im Betreff aber genauso im E-Mail-Text vermeiden.
• E-Mail-Links, die versenden einer E-Mail mit einem bestimmten Betreff erzwingen. Hier ein Beispiel:  <a href=”mailto:musterman@domain.de?subject=Beispieltext”>musterman@domain.de</a>. Wenn man auf diesen Link klicken sollte, startet z.B. Outlook und bereitet den Versand einer E-Mail an mustermann@domain.de mit dem Betreff “Beispieltext” vor.
• E-Mails nicht mit Priorität Hoch senden!
• Pornografischbezogene Wörter sollten vermieden werden. Auch solche Sätze wie „Heißer Sommer bringt heiße Preise“ sollte man vermeiden und sie anders formulieren.
• Generell sehr eindeutig Werbebezogene Inhalte sollten vermieden werden. Der Inhalt sollte Informationen enthalten aber nicht aggressiv auffordernd sein, etwas zu tun.
• Sehr große Schriften, Font +2 und mehr sollten vermieden werden.
• 1×1 Pixel große Bilder, die technische Zwecke (Tracking usw.) dienen, bringen auch Punkte mit sich.
• Nicht gültige E-Mails sollten sofort aus der Versandliste für die zukünftige Mailings entfernt werden. Absender bzw. E-Mail-Server, welche immerwieder ungültige E-Mails anschgreiben, werden als Spammer in Blacklists aufgenommen.
  

Je nachdem wie ein Spamfilter konfiguriert ist, wird für ein Vergehen halben Punkt und für ein Anderes mehrere Punkte vergeben! Beachtet man diese Regeln, sollte man sehr gute Chancen haben, damit der eigene Newsletter Spamfilter nicht zum Opfer fällt und den Empfänger erreicht. Einige Dienstleister bieten auch Kontrollmechanissmen an, um die E-Mails vor dem Versand auf Spamwahrscheinlichkeit zu prüfen.

Wie man sieht, unterscheidet sich eine Werbe-E-Mail deutlich von einem Brief-Mailing. Hier herrschen ganz andere Spielregeln!

Ein wirkliches Problem, womit alle E-Mail Marketer und Dienstleister zu kämpfen haben ist die Darstellung in IBMs Lotus Notes.

Warum sich IBM nicht zumindest an die Mindestanforderungen wie Microsoft mit Outlook 2007 hält ist unbegreiflich. Ändert jedoch nichts daran, dass in der Finanzbranche überwiegend Notes im Einsatz ist.

Um sich von vorne herein viel Ärger zu sparen, empfehlt es sich erst einmal anzuschauen was Notes wirklich unterstützt und was nicht. CSS-Anweisungen werden nur zum Teil unterstützt. Eine gute Übersicht bietet daher die Webseite email standards project. Da sieht man unter anderem auch, dass Befehle wie „Margin“ und „Padding“ nicht unterstützt werden.

Bewegt man sich jedoch überwiegend in B2C Bereich, muss man sich eher Outlook 2007 und die Webmailer unter die Lupe nehmen. Aber meistens wenn eine E-Mail in Lotus Notes gut aussieht, wird zu 99% überall anders auch eine gute Figur machen.

Danke an allen Kommentatoren, die diesen Beitrag mit wertvollen Hinweisen ergänzt haben!

Hier finden Sie weitere sehr nützliche Links zum Thema HTML-Newsletter Programmierung:

• CampaignMonitor: Guide to CSS support in email clients
• sitepoint: How to Code HTML Email Newsletters
• 24 ways: Rock Solid HTML Emails