Mobiles E-Mail-Design

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.

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.

Mobiles E-Mail-Design: Fazit

Responsive Design ist zweifellos die Technologie der Zukunft, wenn es um die Optimierung von E-Mail-Kampagnen für verschiedene Endgeräte geht. Aufgrund der technischen Komplexität steht und fällt die Einsetzbarkeit von Responsive Design fürs E-Mail-Markting mit dem Vorhandensein einer geeigneten E-Mail-Plattform – und der Verwendung entsprechender Templates.

Diesen Artikel jetzt teilen
Link
Blog

Noch mehr über E-Mail-Marketing

e-mail-marketing, zustellbarkeit
Alle Kategorien

Risiko oder Chance? Hauptdomain für Marketing-E-Mails verwenden

Alle Unternehmen, die neben der geschäftlichen E-Mail-Korrespondenz auch E-Mail-Marketing-Kampagnen versenden, stehen bei der Konfiguration der Versandeinstellungen ihres E-Mail-Versandtools vor einer wichtigen Frage: „Sollten alle E-Mails meines Unternehmens über die gleiche Domain versendet werden?

e-mail-marketing, studie
Alle Kategorien

E-Mail-Marketing der 1.000 umsatzstärksten deutschen Onlineshops 2024

Publicare Marktübersicht: Diese 75 E-Mail-Marketing-Lösungen nutzen die EHI Top 1.000 E-Commerce-Firmen in Deutschland in 2024.

e-mail-marketing, studie
Alle Kategorien

Revolution im Postfach: Gmail verdrängt GMX und Web.de

Revolution im Postfach Gmail verdrängt GMX und Web.de: Die Deutschen wenden sich von deutschen E-Mail-Anbietern ab

e-mail-marketing, studie
Alle Kategorien

E-Mail-Template-Baukästen im Test: Welches Tool überzeugt 2024?

E-Mail-Template-Baukästen im Test: Welches Tool überzeugt 2024? Es gibt zahlreiche E-Mail-Marketing-Plattformen auf dem Markt (allein im deutschen E-Commerce werden 75 verschiedene Marketing-Plattformen genutzt!).

e-mail-marketing
Alle Kategorien

E-Mails für alle: Tipps und Tricks für barrierefreies E-Mail-Marketing

Bei der Gestaltung von Websites und Apps ist Barrierefreiheit schon lange ein wichtiges Thema um sicherzustellen, dass Inhalte auch für Menschen mit Behinderungen zugänglich sind. Gemäß dem European Accessibility Act und Barrierefreiheitsstärkungsgesetz müssen

e-mail-marketing, studie
Alle Kategorien

E-Mail-Marketing der 1000 größten E-Retailer Nordamerikas

Marktanteile der E-Mail Service Provider der Top 1000 Online-Shops in Nordamerika und Vergleich mit den meistgenutzten E-Mail-PLattformen der Top 1000 Ecommerce Unternehmen Deutschlands

e-mail-marketing
Alle Kategorien

Warum Countdown-Clocks in E-Mails (fast) am Ende sind

3-2-1-Schluss? Warum Countdown-Clocks in E-Mails (fast) am Ende sind: Knappheit ist eine uralte Verkaufsstrategie, Zeitdruck ist eine Variante davon,

e-mail-marketing, studie
Alle Kategorien

Studie zum E-Mail-Marketing im E-Commerce 2023

Analyse des E-Mail-Marketing der 1000 umsatzstärksten deutschen Onlineshops: ESP-Marktanteile 2023 und Marketing-Trends: Wo bleibt die Innovation?

e-mail-marketing
Alle Kategorien

14 Mythen, wann man wem Werbe-E-Mails schicken darf - und wann nicht

14 Mythen, wann man wem Werbe-E-Mails schicken darf – und wann nicht: Die Frage, welche rechtlichen Leitplanken werbetreibende Unternehmen beim Aufbau von E-Mail-Adressverteilern