Mobiles E-Mail-Design

2. April 2013

Ihre Kunden lesen Ihre E-Mails mal am Smartphone, mal am Desktop-PC – je nach Situation. Damit Ihre Message maximale Wirkung beim Kunden erzielen kann, müssen E-Mail-Kampagnen so gut wie möglich an verschiedenste Bildschirmgrößen, Auflösungen, Rendering-Engines und Lesegewohnheiten angepasst werden. Wie mobiles E-Mail-Design gelingen kann, verraten wir hier – inklusive kostenlosem Design-Test für Ihre Kampagne.

E-Mails to go

Vieles wurde bereits über mobiles E-Mail-Design geschrieben und gebloggt. Häufig stehen dabei die technischen Eigenschaften mobiler Endgeräte im Vordergrund: kleines Display, Touchscreen und langsame Datenverbindung wollen berücksichtigt werden, um eine rundum positive User Experience zu gewährleisten. Doch ist das wirklich schon alles?

Tatsächlich unterscheiden sich mobile Endgeräte nicht nur durch ihre technischen Eigenschaften von Desktop-Computern – sie wurden auch für völlig andere kommunikative Verwendungszwecke geschaffen. Mobile E-Mails sind E-Mails to go. Sie werden nebenher geöffnet, zwischendurch überflogen und en passant begutachtet – in der Straßenbahn, im Café oder auf dem Weg zum nächsten Termin. In genau diesen Rezeptionskontexten müssen sie sich bewähren – um zumindest für eine spätere Lektüre im Posteingang verbleiben zu dürfen. Erfolgreiches mobile design bedeutet daher, E-Mail-Kampagnen optimal anzupassen – an mobile Endgeräte und mobile Kommunikationsbedürfnisse. Doch welche Möglichkeiten gibt es überhaupt, um aus E-Mails wirklich Mobil-Mails zu machen?

Die dezidierte Mobilversion

Mobiles E-Mail-Design kann durch die Erstellung einer dezidierten Mobilversion realisiert werden. Die dezidierte Mobilversion ist eine eigenständige Version der E-Mail, die zusätzlich zur Desktop-Version bereitgestellt wird. Häufig wird sie im Preheader-Bereich der Desktop-Version verlinkt und ist so für die Empfänger erreichbar.

Technischer Aufwand: Der initiale technische Aufwand für diese Lösung kann unterschiedlich hoch ausfallen. Im einfachsten Fall muss lediglich für jedes genutzte E-Mail-Template ein entsprechendes mobiles Gegenstück bereitgestellt werden. Komplexere Szenarien können jedoch beispielsweise die automatische Erstellung der Mobilversion aus dem HTML-Code der Desktopversion beinhalten. Dies verringert den laufenden Mehraufwand bei der Produktion einzelner Kampagnen.

Darstellung auf Mobilgeräten: Dezidierte Mobilversionen lassen sich so optimieren, dass sie auf nahezu allen mobilen Endgeräten korrekt angezeigt werden. Da sich das Erscheinungsbild der E-Mail jedoch nicht automatisch an die Endgeräte der Rezipienten anpasst, bekommen Smartphone-Nutzer in der Regel nach wie vor zunächst die Desktop-Version zu Gesicht.

Nutzerfreundlichkeit: Das größte Handicap einer dezidierten Mobilversion ist ihre geringe Nutzerfreundlichkeit. Ergreifen die Nutzer mobiler Endgeräte nicht selbst die Initiative, werden sie die Mobilversion einer Kampagne nie zu Gesicht bekommen. Smartphone-Nutzer sehen sich immer wieder aufs Neue gezwungen, einen winzigen Link im Preheader-Bereich einer nicht mobile-optimierten E-Mail zu suchen. Haben die Empfänger die Möglichkeit, ihre E-Mail-Präferenzen in einem Nutzer-Account auf ‚mobil’ zu setzen, so erhalten sie zwar automatisch die Mobilversion aller Kampagnen – sehen diese aber auch beim neuerlichen Betrachten der E-Mail auf ihrem Desktop-Computer.

	Dezidierte Mobilversion	Mobile-orientiertes HTML	Responsive Design
Technischer Aufwand
Darstellung auf Mobilgeräten
Nutzerfreundlichkeit
Nutzung des Medien-potenzials

Mobile-orientiertes HTML

Warum sollte man sich überhaupt die Mühe machen und unterschiedliche Versionen für verschiedene Endgeräte bereitstellen? Wäre es nicht einfacher, die technischen Beschränkungen mobiler Endgeräte als kleinsten gemeinsamen Nenner zu betrachten? So könnte eine HTML-Version für alle Endgeräte erstellt werden, welche sich an den Anforderungen mobiler Geräte orientiert: Kampagnen werden beispielsweise generell einspaltig gestaltet, die Schriftgröße wird erhöht, große Buttons und kleinere Grafiken werden eingebunden.

Technischer Aufwand: Da nur eine HTML-Version erstellt werden muss – und das Layout aufgrund der Mobil-Orientierung schlicht gestaltet ist –, ist „Mobile-orientiertes HTML“ mit geringem technischen Implementierungsaufwand verbunden – und verursacht keinerlei zusätzlichen Aufwand bei der Kampagnen-Produktion.

Darstellung auf Mobilgeräten: Wenn die mobilen Anforderungen bei der Erstellung des „Mobile-orientierten HTML“ berücksichtigt werden, werden die E-Mails auf nahezu allen Mobilgeräten korrekt anzeigt.

Nutzerfreundlichkeit: Für Mobilnutzer ist dies bestens geeignet. Durch die Restriktionen des mobile-optimierten Layouts wird jedoch eine ideale Desktop-Optimierung verhindert. Dies stellt den größten Nachteil von „Mobile-orientiertem HTML“ dar – denn nach wie vor liest die Mehrzahl der Empfänger ihre E-Mails (auch) am Desktop-Computer. Auf dem Desktop betrachtet kann eine mobile-orientierte E-Mail jedoch schnell unpassend und unattraktiv erscheinen – wertvolle Klicks und Conversions könnten so verschenkt werden.

Responsive Design

Wäre es nicht schön, wenn sich das Aussehen unserer E-Mails flexibel ans Endgerät anpassen könnte? Dynamische Technologien machen es möglich! Sie sorgen dafür, dass Empfänger stets automatisch diejenige Version einer E-Mail zu sehen bekommen, die für ihr Endgerät optimiert wurde. Aus technischer Sicht gibt es hier zwei Möglichkeiten: zum einen die serverseitige Anpassung der E-Mail mittels User-Agent-Weichen, zum anderen die clientseitige Anpassung durch Responsive Design. Beim Responsive Design sorgen spezielle Anpassungen des E-Mail-Quellcodes dafür, dass sich das Erscheinungsbild der E-Mail dem verwendeten Gerät anpasst. Der wichtigste und ausschlaggebende Faktor hierbei ist die Verwendung von CSS3 Media Queries. Mit ihrer Hilfe kann die Bildschirmgröße des Endgerätes abgefragt und anschließend das jeweils optimale Stylesheet zur Darstellung der E-Mail verwendet werden. So ist es möglich, E-Mail-Elemente für verschiedene Typen von Endgeräten unterschiedlich darzustellen.

Technischer Aufwand: Die Produktion von Freestyle-Kampagnen ist durch die komplizierte Beschaffenheit des responsiven Quellcodes sehr aufwändig. Bei der Produktion Template-basierter Kampagnen hängt der Produktionsaufwand vor allem davon ab, ob eine E-Mail-Plattform verwendet wird, die den Einsatz von Responsive Design für ihre Nutzer vereinfacht.

Darstellung auf Mobilgeräten: Das mobile Erscheinungsbild der E-Mail wird bisher in den nativen Apps auf dem iPhone und nahezu allen Android-Versionen angezeigt Bei der Verwendung anderer Apps oder dem Browser wird teilweise noch die ursprüngliche Desktop-Darstellung angezeigt. Es zeichnet sich aber eine Entwicklung ab, dass die Anzahl der Clients, welche Responsive Design unterstützen, stetig wächst.

Nutzerfreundlichkeit: Der größte Vorteil von Responsive Design ist, dass es sowohl den Anforderungen von Desktop-Usern als auch von Mobil-Usern gerecht wird. Smartphone-Nutzern wie Desktop-Nutzern wird gleichermaßen eine ihrem Nutzerbedürfnis entsprechende Darstellung der E-Mail geboten – automatisch und flexibel.