Mobile-First-Layouts im E-Mail-Marketing: Fluid vs. Responsive Design
Die Nutzung des Internets über mobile Endgeräte wie das Smartphone ist mittlerweile der von Usern am häufigsten gewählte Weg, Online-Inhalte zu konsumieren. Über 80 % der Nutzer greifen mobil auf das Internet zu¹. Dieser Trend wirkt sich auch auf die Content-Präsentation aus. Das heißt: An „Mobile First“-Layouts kommt heute kein Content-Angebot mehr vorbei. Das Konzept ist heute Grundvoraussetzung für eine positive User Experience und hat deshalb auch im E-Mail-Marketing über die vergangenen Jahre stark an Bedeutung gewonnen.
Das beweisen auch zahlreiche Optimizely-Kunden. Sie legen größten Wert auf „flexible Layouts“, die es E-Mails ermöglichen, sich an die unterschiedlichen Ausgabeformate der verschiedenen Endgeräte automatisch anzupassen. Dies kann auf unterschiedliche Art und Weise geschehen.
Responsive vs. Fluid Design
Beim Blick in die Theorie kristallisieren sich zwei konzeptionelle Ansätze heraus: das querformatige Desktop-Layout, bei dem sich das Design zuerst an der Bildschirmausgabe orientiert, sowie das neuere, eher hochformatige Mobile-First-Layout. Letzteres besagt: Das Design wird zuerst für mobile Endgeräte optimiert, bevor dann im zweiten Schritt die Optimierung für die Ausgabeformate größerer Endgeräte folgt.
Zu diesen Mobile-First-Design-Typen zählen heute das Responsive sowie das Fluid Design. Sie verfolgen ein klares Ziel: Durch die optimierte Darstellung einer E-Mail die Customer Experience der Empfänger so positiv zu gestalten, dass diese möglichst lange in der E-Mail verweilen – also lesen – und bestenfalls sogar klicken bzw. konvertieren.
CSS-basierte Anpassung vs. Maximalbreite
Während sich das Responsive Design per CSS-Query automatisch an verschiedene Bildschirmgrößen anpasst – etwa durch das Ein-/Ausblenden bzw. die Skalierung bestimmter Content-Elemente oder durch Breakpoints (Umbrüche), die eine Veränderung der Spaltenzahl im Layout bewirken – benötigt das Fluid Design keine CSS-Gestaltungsanweisungen, um E-Mail-Content in allen möglichen Ausgabeformaten, Maßen und Endgeräten korrekt darzustellen. Meist grenzt die Angabe der Maximalbreite ("max-width") in Prozent das Design geräteübergreifend ein, um bei größeren Bildschirmen nicht die volle Breite auszufüllen. Das würde die Leserlichkeit eines E-Mail-Newsletters negativ beeinträchtigen und auf Seiten der Empfänger zu einer nicht wünschenswerten User Experience führen. In diesem Fall steigt die Wahrscheinlichkeit, dass User das Lesen einer E-Mail oder eines Newsletters frühzeitig abbrechen
Textlastiges vs. komplexes E-Mail-Design
Für textlastiges Layout eignet sich aus diesem Grund auch das fluide Design in ganz besonderem Maße. Es ermöglicht eine prozentuale Größenanpassung, um die Darstellung von Inhalten in der Breite zu begrenzen, so dass Content den Bildschirm förmlich „fließend“ füllt. Weiterer Pluspunkt: Fluides Design kontrolliert das Gesamterscheinungsbild, welches auch einer Vielzahl an Endgeräten und Freemail-Clients gut gerendert wird. Wird das Layout jedoch komplexer, gerät das fluide Design an seine Grenzen.
An diesem Punkt spielt das Responsive Design seine Vorteile aus. Es bietet geräteübergreifend eine weitaus größere Kontrolle bei der korrekten Darstellung von E-Mail-Content. Hauptgrund dafür: CSS. Über die Cascading Style Sheets (CSS), die im HTML-Code einer E-Mail enthalten sind, lassen sich unterschiedlichste Gestaltungsanweisungen, also auch Responsive Design, im Detail spezifizieren, präzise definieren und an das Rendering im jeweiligen E-Mail-Client anpassen.
Flexibles E-Mail-Layout ist Aufgabe für Spezialisten
Das E-Mail-Layout an unterschiedlichste Darstellungsanforderungen technisch anzupassen, ist eine Aufgabe für Spezialisten. Optimizely bietet hier mit Mobile Fusion eine Template-Kit-Extension für sein E-Mail-Marketing-Tool Campaign. Es passt die in Campaign bereits enthaltenen Newsletter-Vorlagen für die Ausgabe auf mobilen Endgeräten an. Smartphones und Tablets unterscheiden sich in der Template-Handhabung und in der Darstellung von Laptop oder Desktop-PCs. Der Bildschirm ist je nach Gerätetyp wesentlich kleiner. Der vorhandene Platz muss daher optimal ausgenutzt werden. In Mobile Fusion wählen Anwender lediglich eine Vorlage aus, die für die mobile Ausgabe optimiert werden soll. Das Finishing übernimmt die Full-Service-Anpassung von Optimizely.
Deutsche Bahn favorisiert fluides Template-Design
Auf ganz ähnlicher Basis setzt der Optimizley Campaign-Kunde Deutsche Bahn in Zusammenarbeit mit Optimizely und der Kreativ-Agentur Ogilvy ein individuell entwickeltes Newsletter-Template um. Die Template-Entwicklung orientierte sich dabei an einem „fluiden“ Aufbau, so dass sich der Content automatisch an die Breite des Browserfensters in der gewünschten Darstellung anpasst – also auch jene Browserfenster, die etwa über ein Smartphone angezeigt werden. Das erfordert ein Höchstmaß an Layout-Flexibilität. Deshalb basieren die Spaltenbreiten im fluiden Template-Design eigentlich auf Prozentwerten anstatt auf starren Pixel-Angaben. Für die Multichannel-Ausspielung definierten die Deutsche Bahn dennoch eine fixe Obergrenze von 320 px – für die optimale Mobile-Darstellung – sowie eine Obergrenze von 450 px – für die Desktop-Darstellung. Dazwischen skaliert das fluide Template sozusagen stufenlos.
Zielgruppe nicht vergessen
Entscheidend bei der Wahl des Design- und Layout-Typs ist die Zielgruppe. Eine Analyse des bisherigen Userverhaltens bzw. der Userakzeptanz unterstützt Versender bei der Identifikation des passenden E-Mail-Layouts. Oberstes Ziel sollte dabei sein, die Usability zu maximieren. Dies kann zum Beispiel über kurze Content-Ladezeiten – wie im Falle des gerade einmal 100 Kb große Deutsche-Bahn-Templates – gewährleistet werden. Die Berücksichtigung dieses und weiterer Kriterien verbessert in der Summe die User Experience und steigert letzten Endes Conversion Rate und Umsatz. Hier lohnen sich auch Experimentation-Maßnahmen. Multivariate Tests liefern wertvolle Insights, wie sich Design- und Layout-Kriterien im Hinblick auf die Performance optimieren lassen.
