Wie denn nun?! Newsletter-Design

Mobile-Only? Mobile-First? Responsive oder ganz Old School eine für die Ansicht auf Desktops optimierte Variante? Wir stellen Ihnen heute alle aktuellen Möglichkeiten zur Optimierung Ihres Newsletter vor und verraten Ihnen, wann welche Version sinnvoll ist. 

Mobile Optimierung im E-Mail-Marketing: Warum überhaupt?

Seit 2011 ist der Anteil von E-Mails, die auf Mobilgeräten geöffnet werden, um über 400 Prozent gestiegen. Nur zwei Jahre später wurden schon 50 Prozent aller E-Mails mobil gelesen. Und 2018 sendeten und empfingen bereits 82,3 Prozent der Deutschen regelmäßig oder gelegentlich ihre E-Mails auf dem Smartphone:

Mobile E-Mail Nutzung
Q: Repräsentative Umfrage unter 1008 deutschen Internet-Nutzern ab 14 Jahren im Auftrag von WEB.de und GMX; März 2018

Diese Entwicklung der Nutzergewohnheiten macht deutlich: Die Optimierung von E-Mails für mobile Endgeräte ist längst für alle Pflicht, die E-Mail-Marketing professionell betreiben.

Von Desktop- zu Mobile Only

Bevor Smartphones, Tablets & Co. ihren Siegeszug antraten, genügte es, E-Mails in einer Desktop-Only Version zu produzieren. Umfassende Optimierungen waren in dieser Zeit lediglich nötig, wenn etwa eine perfekte Lotus Notes-Darstellung gewünscht wurde. Heute jedoch ist die mobile Optimierung von E-Mails die Voraussetzung für ein erfolgreiches E-Mail-Marketing. Und dazu existieren verschiedene Möglichkeiten:

Übersicht über die Möglichkeiten zur Mobile-Optimierung von E-Mail-Designs:

Mobile friendly-Variante:

Bei dieser Variante handelt es sich um eine erweiterte Desktop-Variante, die in der Regel auch auf mobilen Endgeräten optimal dargestellt wird.

Pro
  • Mit wenige Optimierungsaufwand aus Desktop-Version realisierbar
  • Weitere Varianten mit moderatem Aufwand realisierbar, da Darstellungstests auf mobilen Clients nötig
  • Erfordert keine extra mobile Variante
  • Mobile friendly Version wird auch auf Desktops optimal dargestellt
Contra
  • Keine automatische Anpassung an mobile Clients
  • Stellt nur die Desktop-Variante sicher in mobilen Clients dar

Skalierbares Design

Skalierbare Designs sind in der Regel am einfachsten zu implementieren. Da skalierbare E-Mails die Breite von Tabellen oder Bildern zwischen Geräten nicht anpassen und keine CSS Media Queries enthalten, um Inhalte auszutauschen oder die Textgröße zu ändern, ist es wichtig, eine Reihe von Techniken anzuwenden, mit denen der Inhalt skalierbarer E-Mails nicht nur auf dem Desktop, sondern auch auf Mobilgeräten angezeigt wird.

Pro
  • Ein einfaches (normalerweise einspaltiges) Layout, das sich gut skalieren lässt
  • Großer Text, der auf Bildschirmen aller Größen lesbar ist
  • Große, berührungsfreundliche Handlungsaufforderungen
Contra
  • Mailing passt sich nicht an Devices bzw. Bildschirmbreiten an – daher ist diese Variante auf Desktops schlecht lesbar
  • Textgrößen, Bildgrößen etc. können nicht für mobile Endgeräte optimiert werden, da es keine Breakpoints für mobile Geräte gibt

Fluid/Hybrid Design

Fluide E-Mails verwenden eine prozentuale Größenanpassung, um die Breite von Tabellen und Bildern an die Bildschirmgröße anzupassen, auf der sie angezeigt werden, ähnlich wie bei sogenannten „flüssigen“ Layouts im Web. Fluide E-Mails sind mit skalierbaren E-Mails vergleichbar, da sie das Layout oder den Inhalt einer E-Mail nicht selbstständig anpassen, aber den zusätzlichen Vorteil haben, dass der Inhalt „fließt“, um Platz auf dem Bildschirm zu füllen. Aus diesem Grund eignen sich flüssige Designs normalerweise am besten für textlastige Layouts, da hier mehr Kontrolle darüber besteht, wie sich Texte und Bilder zueinander verhalten.

Pro
  • Funktioniert auf fast allen Geräten und E-Mail-Clients
  • Ermöglicht mehr Kontrolle über das Erscheinungsbild von E-Mails
  • Verlässt sich nicht auf Media Queries
  • Kinetic Funktionen (z. B. Dropdowns oder Slider) auf mobilen Geräten und auch vielen Webclients möglich
Contra
  • Kann bei komplexen Layouts schwierig werden
  • Nicht alle Designelemente passen sich vorteilhaft an mobile Geräte an

Responsive Design

Responsive Design beschreibt, dass das Design sich automatisch an die Bildschirmgröße anpasst, wodurch Änderungen an Schriftgrößen, Farben oder Inhaltsreihenfolge möglich sind. Durch diese Anpassungen kann ein besseres Leseerlebnis auf Mobilgeräten erzielt werden.
Mit Responsive Design kann der Newsletter optimal auf verschiedenen Devices dargestellt werden, unabhängig davon, welches Gerät verwendet wird.

Pro
  • Bietet mehr Kontrolle über das E-Mail-Design
  • Wird von Gmail App unterstützt, so dass Responsive Designs auf vielen Devices funktioniert
  • Zeigt die Mail angepasst an das Device an
  • Kinetic Funktionen (z. B. Dropdowns oder Slider) auf mobilen Geräten und auch vielen Webclients möglich
Contra
  • Wird nicht auf jedem Gerät unterstützt
  • Nicht alle Designelemente passen sich vorteilhaft an mobile Geräte an

Mobile-First

Responsive Design ist das Ergebnis eines eher technischen Ansatzes, Mobile-First dagegen ist eine Designstrategie.
Der Nachteil dabei ist, dass sich mehrere visuelle Aspekte schlecht an mobile Geräte anpassen, wenn sie nicht auf Desktops optimiert werden. Um dem entgegenzuwirken, haben Designer einen neuen Ansatz mit dem Titel „Progressive Enhancement“ oder „Mobile-First-Strategie“ gewählt.
Dazu müssen Sie einen Newsletter für das kleinstmögliche Gerät entwerfen und sich dann durch Hochskalieren an Desktop-Computer anpassen.
Das von Luke Wroblewski entworfene Mobile-First-Konzept schlägt vor, dass das mobile Design im Mittelpunkt der Designstrategie steht und die Einschränkungen und das Verhalten beim Surfen auf mobilen Geräten berücksichtigen sollte.
Es ist zu Beginn der Mobile-First-Strategie erforderlich, Inhalte nach Wichtigkeit zu kategorisieren und das Gesamtdesign zu verfeinern. Zusätzliche Inhalte können später für diejenigen hinzugefügt werden, die über Desktops surfen.

Pro
  • Design, Bilder und Funktionen für das Smartphone angepasst
  • Design, Bilder und Funktionen können separat für Desktop- und mobile Clients optimiert werden
  • Intuitive Bedienung, schnellere Klickwege und ein insgesamt besseres mobiles Nutzererlebnis
  • Man konzentriert sich inhaltlich auf die wesentlichsten Aspekte (Text rückt in den Vordergrund, da nicht so viele Designelemente ablenken)
  • Kinetic Funktionen (z. B. Dropdowns oder Slider) auf mobilen Geräten und auch vielen Webclients möglich
Contra
  • Nicht alle Designelemente sehen auf allen Bildschirmgrößen vorteilhaft aus, das Design sollte daher einfacher gehalten sein
  • Nicht alle Designelemente passen sich vorteilhaft an mobile Geräte an

Mobile-Only

Das Konzept „Mobile-Only“ bezieht sich auf eine Strategie exklusiv für mobile Geräte. Dabei spielt die Desktopversion, anders als bei Mobile-First, gar keine Rolle. Auf dem Desktop ist das gleiche Mailing, wie in der mobilen Variante zu sehen. Dabei wird es auf die volle Breite skaliert.

Pro
  • Design, Bilder und Funktionen für das Smartphone angepasst
  • Intuitive Bedienung, schnellere Klickwege und ein insgesamt besseres mobiles Nutzererlebnis
  • Es muss lediglich ein mobiles Design erstellt werden
  • Kinetic Funktionen (z. B. Dropdowns oder Slider) auf mobilen Geräten und auch vielen Webclients möglich
Contra
  • Wirkt auf dem Desktop meist etwas groß
  • Ist hauptsächlich für mobile Geräte konzipiert, daher weniger benutzerfreundlich am Desktop

Die aktuelle Entwicklung des Internetverkehrs zeigt: Mobile-Only wird immer relevanter.  Studien zeigen, dass Internetnutzer mittlerweile rund 60 Prozent ihrer Onlinezeit in Apps und mobilen Browsern verbringen. Besonders beliebt sind dabei Onlineshopping-Apps. Ihnen ist zu verdanken, dass mittlerweile weltweit über 50 Prozent des gesamten Umsatzes im Onlineshopping über mobile Endgeräte generiert wird. Viele Online Pure Player setzen daher längst auf Mobile-Only. Bei den großen Playern besuchen allein 75 bis 85 Prozent der Kunden den jeweiligen Onlineshop per App.

Damit Unternehmen einen Nutzen aus dieser Entwicklung ziehen, sollten E-Mails so konzipiert werden, dass sie vollständig nutzerorientiert sind: schnell, übersichtlich und vor allen Dingen verkaufsorientiert und intuitiv. Gerade wenn der Onlineshop mobil optimiert ist, sollte das Mailing passend dazu konzipiert werden.

Und diese Variante empfehlen Ihnen die rabbit-Experten …

Bei der E-Mail-Optimierung gilt Kunde und Usability first! Damit hängt die Entscheidung für welche Option Sie sich entscheiden von Ihren Abonnenten, deren Endgeräte-Präferenzen und Bedürfnissen ab. Wenn Sie Ihre Zielgruppen also auch künftig zum richtigen Zeitpunkt optimal erreichen möchten, müssen Sie sich noch stärker auf die Nutzungsrealität der User einstellen.

Dazu gehört auch die Ausrichtung auf unterschiedliche Devices im Rahmen einer übergreifenden Marketing-Strategie. Da aber nicht alle Empfänger Ihrer Verteiler identische Endgeräte nutzen, müssen Sie derzeit immer Kompromisse eingehen. Nur gut also, dass Ihre E-Mails nicht überall gleich aussehen müssen. Je nach Komplexität Ihres Designs kann zudem ein anderer Ansatz sinnvoll sein.

Unabhängig davon ob Mobile-First, Mobile-Only oder Responsive: Die Steigerung von Usability und positivem Nutzererlebnis wird auch im E-Mail-Marketing immer bedeutsamer. Wir bei rabbit arbeiten daher derzeit mit fluiden, Responsive bzw. Mobile-First und Mobile-Only Mailings. Und letzteren gehört perspektivisch die Zukunft. Gerne beraten wir Sie, was für Ihre Zielgruppe die beste Lösung ist und setzen spannende Newsletter Kampagnen mit Ihnen um.

Newsletter

Top-Knowhow im Abo

Kostenlos und unverbindlich: Jetzt einfach zum rabbit-Newsletter anmelden: