Orange Marketing Blog

Archiv für die Kategorie: "HTML & Design"

Das neue Jahr hat nun begonnen und wie jedes Jahr hat man nicht nur private, sondern auch berufliche Vorsätze und Visionen. Nun, das Jahr 2011 hat ernüchternde Resultate geliefert, was z. B. Social Media Marketing und Email Marketing betreffen …

Wieder einmal wurde Email als ein veraltetes Medium bezeichnet. Social Media Marketing hat einen Höhenflug erlebt jedoch teilweise enttäuschende Resultate geliefert, welche aber auf falsche Strategien zurückzuführen sind!

Was war 2011 los!?

Unternehmen und Marketingagenturen wurden schlichtweg überrannt und versuchten sich irgendwie zurechtzufinden. Die Zahl der Mitglieder in sozialen Netzwerken stieg rasant an und Smartphones eroberten den Markt für das mobile Internet aber es fehlten Marketingstrategien und Konzepte. Kurz gesagt es herrschte Chaos und Hilfslosigkeit …

Was hat uns 2011 gelehrt?

Soziale Netzwerke sind keine Zwecks die einzige Patentlösung für eine erfolgreiche Kundenkommunikation und Smartphones revitalisierten das Email Marketing. Somit war 2011 das Jahr des Konsumenten. Der Kunde war auch im Netz der König …

Die Globalisierung hat nun einen Wendepunkt erreicht!

Der Kunde lässt sich nicht steuern, sondern gibt den Kurs an und steuert mit. Word of Mouth Marketing ist wieder hoch im Kurs und da sollte man auch ansetzen und gleich zu Beginn des neuen Jahres seine Marketingstrategien anpassen und ergänzen.

Email ist weiterhin „der” Knotenpunkt zwischen Unternehmen und Konsumenten. Hierrüber kann man Kunden gezielt steuern und führen, denn Email ist nach wie vor das einzige One to One Kommunikation -Tool, worüber man eine Brücke zwischen verschiedenen Medien erschaffen kann. Aus einem Newsletter heraus kann der Kunde auf Social Media Präsenz des Unternehmens geleitet werden, wertvolle Inhalte mit seinem Netzwerk teilen und das Beste ist, Emails können jetzt ohne Weiteres überall empfangen und gelesen werden. Email ist nun mobil, zeitlos und kennt keine Grenzen.

Das sollten Sie in 2012 tun:

• Überprüfen und überarbeiten Sie Ihre Email- bzw. Newsletter-Vorlagen auf die mobile Tauglichkeit.
• Bieten Sie SWYN-Links an, damit der Empfänger interessante Inhalte mit seinem Netzwerk teilen kann.
• Erarbeiten Sie eine Multi-Channel-Strategie und holen Sie das Beste aus Ihren Medien heraus.
• Content und Relevanz sind überlebenswichtig für eine Marketingstrategie. Die Informations- und Daten-Flut nimmt rasant zu. Daher ist Monitoring unentbehrlich!
• Seien Sie kreativ und interaktiv.

Mit Email Marketing können Sie nach wie vor eine enge und persönliche Beziehung zum Kunden aufbauen, welche für eine langfristige Kundenbindung von großer Wichtigkeit sein wird.

Schauen Sie sich einfach um, welche Geräte nutzen die Menschen in Ihrer unmittelbaren Umgebung, um zu telefonieren? Wenn Sie genau darauf achten, dann werden Sie feststellen, dass die meisten Menschen Smartphones nutzen. Nun was heißt das genau?

Wir gehen einige Jahre zurück. 2005 - E-Mail Marketing war in Deutschland sehr neu bzw. nur einige wenige Firmen hatten Newsletter oder kommunizierten in regelmäßigen Abständen und mit einer Strategie über E-Mail mit ihren Kunden und Interessenten. Mobiles Internet gab es noch kaum und somit musste man sich die Versandzeit genau überlegen. Auch die Wochentage musste man testen, um letzten Endes gute Resultate erzielen zu können. Ich hatte damals während meines Studiums bei einem amerikanischen Softwarehersteller in der Marketingabteilung gearbeitet und wir hatten damals schon ein sehr starkes E-Mail Marketing betrieben. Nicht nur Newsletter, sondern auch Events wurden regelmäßig über E-Mail kommuniziert. Wir haben ziemlich gut und genau segmentiert und somit bekamen die Finanz-Leiter nur die für sie relevanten Informationen und die IT-Leiter ebenfalls. Da bemerkte ich, dass wir in Gegensatz zu den deutschen Firmen um einiges weiter sind, nicht nur wegen des hohen Marketing-Budgets, welches wir unter anderem auch für das E-Mail Marketing zur Verfügung hatten. Für unseren Marketing Direktor war es eindeutig, dass er mit E-Mail Marketing enorm viel Geld sparen kann und es auch tatsächlich tat. Die Resultate konnten gemessen werden und die Kampagnen wurden immer weiter optimiert. Unser einziges Problem war der Zugriff der Empfänger auf ihren E-Mail-Konten. Dagegen konnte wir nichts unternehmen. Weiterlesen »

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 Mensch ist ein emotionales Wesen und lässt sich oft von seinen Gefühlen leiten. Diese Tatsache spielt für die Entscheidungen, die wir fällen eine große Rolle!

Blumen symbolisieren das Leben, die Freude oder auch Trauer, je nach Art und Farbe. Das Wort Sympathie und Antipathie bestimmt ebenfalls sehr stark unser Leben. Wie gut können wir mit einem Kollegen zusammenarbeiten? Oder wie sympathisch ist der Versicherungsmakler, der uns eine neue Versicherung verkaufen möchte? Nicht nur die Fakten und Tatsachen, sondern auch das berühmte Bauchgefühl bringt uns dazu Entscheidungen zu fällen, die teilweise enorm wichtig sind und gerade deshalb sollten wir Emotionen sehr ernst nehmen. Marketing ist ein Spiel mit den Gefühlen der Menschen. Es gibt nicht nur gute oder schlechte Produkte sondern viele vergleichbare Produkte und auch viele potenzielle Käufer, welche überzeugt werden müssen und das schafft man nur auf der emotionalen Ebene.

Denken wir an den Valentinstag. Die Farbe Rot und Rosa spielen in der Farbpalette der Produkte die Hauptrolle. Sie symbolisieren die Liebe und Leidenschaft. Herzförmige Karten oder Geschenkverpackungen berühren uns auf eine ganz andere Ebene, wo wir den Alltag vergessen und uns anderen, schöneren Seiten des Lebens widmen können. Weihnachten ist die Zeit der Farbe Grün…

Was ich damit sagen möchte ist, dass wir jedem Produkt eine Farbe und Emotion zuweisen und sie dann in einem Newsletter visualisieren können. So wird erstmal beim Aufmachen des Newsletters eine Sympathie geschaffen. Man muss dabei die CI-Vorgaben nicht komplett ignorieren! Vielmehr geht es um die kleineren Elemente, die in einem harmonischen Zusammenspiel ein perfektes Bild ergeben. Wir leben in einer Gesellschaft mit vielen verschiedenen Kulturen und die kulturellen Aspekte sollte man nicht außer Acht lassen! Die Farbe schwarz symbolisiert z. B. in vielen Ländern Ostasiens Trauer und Tod. Ein Börsen Newsletter, der im Design viel schwarz enthält, würde demnach bei einem japanischen Investor eher negative Gefühle erwecken oder? Also die Zielgruppe spielt wieder eine wichtige Rolle!

Manchmal fixieren wir uns so sehr auf unser Ziel, dass wir den Weg dahin vernachlässigen und manchmal ist der Weg tatsächlich das Ziel…

Internet wird immer öfter mobil genutzt und die Endgeräte, welche hierfür zum Einsatz kommen, sind ebenso oft Smartphones, Pocket-PCs oder Mininotebooks. Auf der anderen Seite werden die Monitore immer größer, also für welches Gerät sollte nun der Newsletter optimiert werden?

Internetseiten kann man so programmieren, dass sie sich dem Bildschirm des Nutzers anpassen aber E-Mails bieten solche Möglichkeiten nicht. E-Mails (auch Newsletter) werden oft überflogen und schnell gelesen. Darüber hinaus lesen viele ihre E-Mails im Vorschaufenster ihres E-Mail Clients. Ein Newsletter dürfte daher nicht länger als 1024 Pixel sein. Der Versand eines Newsletters mit 2000 Pixel ist oft reine Informationsverschwendung! Auch die Breite spielt eine große Rolle. Nicht zu schmal aber auch nicht sehr breit! 600 bis 700 Pixel sollten nicht überschritten werden. Wenn möglich sollte man aber bei 600 Pixel bleiben.

600 x 1024 Pixel ist also eine gute Universalgröße und so können auch die mobilen Nutzer den Newsletter ziemlich gut lesen.

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″?>

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