Orange Marketing Blog

Archiv für das Artikel-Schlagwort: "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 »

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?

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.

Ed Henrich hat auf Evernote Beispiele verschiedener Anmeldeseiten und Welcome-Messages zusammengestellt. Es handelt sich hier zwar ausschließlich um Beispiele verschiedener Online-Shops in den USA, es ist aber dennoch eine hervorragende Möglichkeit zur Inspiration.

Anmeldeseiten und Welcome-Messages auf Evernote (zusammengestellt von Ed Henrich)

Natürlich sollten diese Beispiele kritisch betrachtet werden.
So ist zu beachten, dass …

• in den USA andere rechtliche Bestimmungen gelten als in Deutschland.
• das Verhalten und die Erwartungen deutscher Nutzer sich zu den in den USA unterscheiden.
• es sich hier um Beispiele verschiedener Online-Shops im B2C Umfeld handelt.

Mitdenken ist also angesagt! Es ist keine Quelle für kopierbare Vorlagen, sondern vielmehr eine gute Möglichkeit einen Blick über den Tellerrand zu werfen und Ideen zu sammeln.

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!