MOBILE

Designstrategien für mehr mobile Klicks

Von Sebastian Fleischmann, 28. Januar 2013

Etwa 40 Prozent aller E-Mails werden heute auf einem mobilen Endgerät geöffnet – Tendenz steigend. Doch ob die Anwender so viel Spaß dabei haben, darf zumindest bezweifelt werden: Häufig ist das Nutzererlebnis aufgrund von unproportionalen Bildern, Wartezeiten beim Laden, zu kleinen Links, ewigem Scrollen oder zu viel Text auf dem kleinen Bildschirm enttäuschend. Um dem Nutzer auch auf mobilen Endgeräten eine ansprechende Erfahrung zu bieten und somit den Kundendialog auch hier zukunftsgerichtet zu etablieren, gibt es verschiedene Vorgehensweisen für eine mobile Optimierung.

Analyse der Zielgruppe und ihrer Endgeräte

Bevor jedoch ein strategischer Ansatz gewählt wird, sollte untersucht werden, wie viele Empfänger im eigenen Verteiler ihre Mails tatsächlich mobil öffnen und welche Betriebssysteme, E-Mail-Clients und Browser bevorzugt genutzt werden. Relevant ist hier insbesondere der Gerätetyp, denn von diesem hängt die Breite des Bildschirms ab, für den ein Webangebot entwickelt werden muss. Weiterhin ist die bevorzugt verwendete Betriebssoftware von Interesse, denn sie bestimmt die Darstellung des verwendeten HTML-Codes.

Wenn das mobile Publikum eine relevante Größe hat und dessen präferierte Betriebssysteme bekannt sind, kann eine entsprechende Strategie entwickelt werden. Mit wenig Aufwand lassen sich E-Mails für die meisten mobilen Endgeräte formatieren, bei iOS-Endgeräten kann so eine ansprechende Darstellung der Inhalte erzeugt werden. Für eine gemischte Empfängergruppe oder hauptsächlich Endgeräte mit Android empfiehlt sich aufgrund der großen Anzahl unterschiedlicher Endgerätehersteller und E-Mail-Clients eher ein responsives Design. Basierend auf HTML5 und CSS3 reagiert die E-Mail auf die Abmessungen des Endgeräts und passt die Darstellung der Inhalte entsprechend an.

Grundlagen der Optimierung für mobile Endgeräte

Wenn die Mehrheit der Leser ihre E-Mails nicht mehr am Desktop-PC sondern auf Smartphones liest, empfiehlt sich die Optimierung als erster Schritt. Prinzipiell muss hier die E-Mail so entworfen werden, dass sie sich auch auf kleinen Bildschirmen gut anzeigen lässt. Dieser Ansatz lässt sich recht leicht in bestehende Programme integrieren. Dabei gilt es zu beachten, dass Nutzer, die Mails mobil aufrufen, häufig unterwegs sind und oft nicht viel Zeit haben. Deshalb sollten Botschaften klar, prägnant und einfach formuliert sein. Unterstützend können grafische Elemente mit wenig Speichervolumen den Text erklären.

Um das Interesse und die Aufmerksamkeit des Nutzers zu halten, müssen die mitgeteilten Informationen leicht aufnehmbar sein, etwa indem Botschaften in thematische Blöcke untereinander aufgeteilt werden. Zudem können weitere Details am unteren Bildschirmrand angeteasert werden und so zum vertikalen Scrollen verleiten. Wenn auf weitere Inhalte verlinkt wird, sollte beachtet werden, dass ein menschlicher Finger mehr Platz zum Klicken braucht als ein Mauszeiger. Daher muss ein Link oder ein Button in einer mobil optimierten E-Mail größer sein. Im besten Fall sollte auch genügend Abstand zwischen zwei verlinkten Elementen sein, um zu verhindern, das versehentlich falsch geklickt wird. Alternativ können auch ganze Textblöcke verlinkt sein.

Optionen für responsives Design

Responsives Design ist keine Verbesserung bestehender Formate, sondern die Erschaffung einer neuen, komplexen Form. Einmal angelegt passen sich E-Mails besser an die Gegebenheiten aller Empfängerendgeräte an. Responsives Design eignet sich daher besonders für Mail-Clients, die CSS unterstützen, also alle nativen E-Mail-Anwendungen auf iOS- und einigen Android-Endgeräten. Die HTML-Datei der E-Mail erkennt automatisch die Größe des empfangenden Bildschirms, reagiert darauf und passt die Botschaft entsprechend an.

Grafische Elemente, Schriftgrößen und Zeilenabstände werden dazu nicht mehr absolut angegeben, sondern in relativen Werten. Für ein gelungenes responsives Design können Elemente zudem beispielsweise verpackt werden und ordnen sich dann je nach Bildschirmbreite nebeneinander oder untereinander an. So werden etwa aus vier Elementen auf einer Breite von 640 Pixeln auf dem iPhone mit 320 Pixeln zwei mal zwei Elemente. Das Verstecken von aufwendigen grafischen Elementen in der mobilen Ansicht führt zudem dazu, dass die Botschaft schneller geladen wird und übersichtlicher in der Darstellung ist. Ein Link kann auf die versteckten Bilder hinweisen, sodass der Empfänger selbst entscheiden kann, ob er diese laden und ansehen möchte. Werden Bilder in der E-Mail gezeigt, sorgt eine automatische Skalierung dafür, dass sie auf dem mobilen Endgerät gut dargestellt werden. Sollten Bilder etwa auf der Breite von 320 Pixeln verschwommen erscheinen, hilft es, das Bild um 100 Prozent vergrößert zu senden – die automatische Skalierung sorgt dann für ein scharfes Bild.

Die richtige mobile Strategie

Ist die Gruppe von mobilen Empfängern entsprechend groß, empfiehlt sich die Entwicklung einer mobilen Strategie mit Blick auf die genutzten Betriebssysteme. Langfristig sollten die Gewohnheiten der Nutzer und zukünftige Trends genau beobachtet werden, um gegebenenfalls weitere Optimierungen vorzunehmen. Die Einbindung von mobilen Endgeräten in eine kanalübergreifende Kommunikationsstrategie ist aus dem zeitgemäßen Marketing nicht mehr wegzudenken und sollte daher immer in strategische Planungen einbezogen werden.

Sebastian Fleischmann / Selligent Über den Autor/die Autorin:

Sebastian Fleischmann ist Head of Sales bei Selligent, einem interntionalen Software-Anbieter für Dialogmarketing und Kampagnenmanagement. Dort leitet er das Vertriebsteam. Fleischmann war zuvor Sales Director der Oracle Marketing Cloud. Während dieser Zeit etablierte der studierte Betriebswirtschaftler neue Geschäftsfelder und Standorte in den BENELUX-Staaten sowie in Skandinavien. Von 2010 bis 2014 unterstützte Fleischmann Responsys Marketer bei der Umsetzung effizienter und individueller digitaler Marketing-Kampagnen.