Wie mobil müssen E-Mails sein? – So mobil wie ihre Leser!

Wie wird Responsive Design in der Praxis möglich?

Das Zauberwort für maximal flexible E-Mails heißt Responsive Design. Dank CSS3 Media Queries ist es möglich, E-Mails so zu gestalten, dass sie sich automatisch an die jeweiligen Endgeräte ihrer Leser anpassen (lesen Sie hierzu auch Teil 1 unserer Serie). Doch Responsive Design kann durch die komplizierte Beschaffenheit des E-Mail-Quellcodes - und der Anforderungen die unterschiedliche E-Mail-Clients auf Empfängerseite an den Code haben - zu einer zeitaufwändigen und kostspieligen Angelegenheit werden. Die Lösung liegt in einer Kombination aus Template-basierten E-Mail-Kampagnen und einer Plattform, die eine Menge technischer Arbeit automatisch im Hintergrund erledigt.

Automatische Anpassungen

In der Praxis kann Responsive Design nur dann durchgehend für alle Kampagnen eingesetzt werden, wenn sich der zusätzliche Aufwand bei der Produktion jeder einzelnen Kampagne in Grenzen hält. Eine komfortable Lösung besteht darin, ein Template zu nutzen, bei dem der kompliziertere Teil der Codierung bereits fest implementiert ist – die mobile Version wird dadurch beim Erstellen der Template-Kampagne quasi „automatisch erzeugt". Bei der Mobile Sense-Technologie sind dabei folgende Vorteile in jedem responsiven Template serienmäßig eingebaut:

1. Text: Optimale Lesbarkeit

Schriftgrößen, die auf dem Desktop gut lesbar sind, sind auf kleinen Smartphone-Displays nur schwer zu entziffern. Da hilft nur viel Zoomen und Scrollen? Falsch. Mit dem passenden responsiven Template wird die Schriftgröße auf Mobilgeräten automatisch auf ein komfortables Maß vergrößert.

2. Call-to-Action-Elemente: Optimale Bedienbarkeit

Textlinks, die mit der Maus leicht ansteuerbar sind, werden zum Problem, sobald sie auf einem kleinen Smartphone-Display mit dem Daumen geklickt werden müssen. Für mobile Nutzer erscheint in unserem Demo-Newsletter daher kein Textlink, sondern ein komfortabler Button am Ende von Textabschnitten. Der Abstand um den Button herum ist ausreichend groß – so lassen sich auch direkt untereinander stehende Buttons zielgenau klicken. Und da die meisten Nutzer ihr Smartphone in der rechten Hand halten und den rechten Daumen zum Scrollen und Klicken benutzen, wird auch die Ausrichtung dementsprechend optimiert: Textlinks, Call-to-Action-Elemente (CTAs) zentriert oder ebenfalls links ausgerichtet.

3. Design: Optimaler Look

Breite Layouts mit zwei oder gar drei Spalten sind für die Deskop-Version einer E-Mail nicht nur kein Problem – sie sind für das breite Desktop-Format oftmals die beste Lösung. Für Smartphone-Displays gilt das jedoch nicht: Selbst querformatig ausgerichtet sind sie immer noch ziemlich schmal. Ein gutes responsives Template sollte deshalb dafür sorgen, dass das horizontale Desktop-Design auf mobilen Endgeräten in ein vertikales Layout umgewandelt wird – mit nur einer, gut lesbaren Spalte. Sperrige horizontale Navigationsleisten können mit Mobile Sense entweder ganz ausgeblendet, mit einer reduzierten Anzahl an Elementen angezeigt oder in ein vertikales Layout überführt werden.

Manuelle Anpassungsmöglichkeiten

Diese beschriebenen „automatischen" mobilen Template-Anpassungen eignen sich hervorragend dazu, die E-Mail an die technischen und ergonomischen Besonderheiten mobiler Endgeräte anzupassen. Doch sollte auch der spezifische Rezeptionskontext der mobilen Nutzer berücksichtigt werden. Die mobil gelesenen E-Mails werden häufig nebenher geöffnet oder zwischendurch überflogen – die Aufmerksamkeitsspanne ist dadurch noch geringer als beim Desktop-Lesen. Deswegen sollte auch der Inhalt der mobilen E-Mails knapp und prägnant gestaltet sein. So kann die „Message" bei mobilen Nutzern optimal wirken. Bei mobilen E-Mails gilt also: Weniger ist mehr!

Content ausblenden

Um den Inhalt der Kampagne schnell und radikal auf das Wichtigste zu reduzieren, bieten viele responsive Templates die Möglichkeit, ganze Abschnitte für mobile Endgeräte auszublende.

Grafiken ausblenden

In der Desktop-Version dürfen Bilder keinesfalls fehlen – sie sind echte Eye-Catcher und sprechen uns emotional an. Mobile Nutzer empfinden große Bilder oftmals nur als platzverschwendende Störfaktoren, weswegen mehr gescrollt werden muss. Wenn ein Abschnitt mit einer Grafik nicht vollständig ausgeblendet werden soll, können auch nur die Grafiken des Abschnitts für mobile Endgeräte ausgeblendet werden.

Grafiken austauschen

Was aber kann man tun, wenn eine Grafik auch für mobile Nutzer angezeigt werden soll, aber zu viel Platz in der mobilen Version einnimmt? Hierfür besteht die Möglichkeit eine separate „mobile" Grafik für die mobile Darstellung auszuwählen. So können beispielsweise kleinere Bannergrafiken mit größerem Schriftzug oder auch komplett andere Bilder für die mobile Darstellung verwendet werden.

Jetzt kann mobil beginnen!

Responsive Design kann für den Nutzer einfach und unkompliziert sein – aber nur mit dem richtigen Rüstzeug. Mit einer Plattform, die hochwertige Responsive Templates zur Verfügung stellt, lassen sich E-Mails einfach und schnell für mobile Leser optimieren. Wir beraten Sie gerne welche E-Mail-Versandplattform oder welcher E-Mail-Builder die besten und flexibelsten Template-Editoren für mobiles Design bieten.