Konzeption & Kreation // Online Marketing // Webentwicklung

Mobile first – 5 Tipps für deinen mobilen Erfolg

Marc Faber //

Das Aufrufen von Websites über mobile Endgeräte hat das Abfragen über den Desktop überholt. Heutzutage schläft man neben dem Smartphone, trägt es beim Spazierengehen mit sich und auch bei der Arbeit wird es des Öfteren herausgeholt. 2019 lag der Anteil der mobilen Nutzer in Deutschland bereits bei 74 %1. Die zunehmende Verbreitung und verstärkte Online-Nutzung des Smartphones bekräftigen die These „Mobile first“ – Websites, Social-Media-Kampagnen, Search-Anzeigen und alles Weitere, was Personen über das Netz (be-)suchen, muss möglichst nutzerfreundlich und vor allem mit einer schnellen Ladezeit auf den kleinen Screen gebracht werden.
Im Folgenden zeigen wir dir 5 Tipps, um erfolgreich Mobile-Websites zu gestalten und Search-Kampagnen sowie Social Posts für mobile Endgeräte zu konzipieren.

Mobile first – Websites für mobile Endgeräte ausrichten

Kennst du noch die 3D-Bücher aus den 90ern, bei denen man die Grafiken erst ganz nah ans Auge halten musste und sie dann schnell in Ferne rücken, um etwas erkennen zu können? Ungefähr so ist es mit Websites in der Smartphone-Ansicht, wenn sie noch nicht für die Betriebssysteme Android und Mac OS optimiert wurden. Man starrt lange darauf und weiß nicht, wo man hinklicken soll. Um dies zu vermeiden, solltest du folgende Tipps für Mobile first befolgen:

Mobile first Tipp 1: Von Anfang an das Navigationsmenü mitdenken

In der Desktop-Variante gibt es immer genug Platz für ein umfangreiches Navigationsmenü, welches die einzelnen Rubriken und Unterseiten einer Website darstellt. In der mobilen Variante ist hierfür kein Platz. Lösung: Mit dem Einsetzen eines Burger-Menüs oder eines Bottom-Navigation-Elements nimmt man vertikal keinen Platz weg und schafft stattdessen mehr Raum für User-relevante Inhalte.

Mobile First - Beispiel Burger-Menü
Beispiel Burger-Menü
Mobile First - Beispiel Bottom Navigation
Beispiel Bottom Navigation

 

Mobile first Tipp 2: Mobile Seiten auf UX optimieren

Wenn du die Darstellung der Website für das Smartphone ausrichtest, solltest du auf folgende drei Dinge (in chronologischer Reihenfolge) achten:

  1. Die Seite zielgruppengerecht ausrichten. Solltest du nicht die Zielgruppe sein, stellt sich die Frage: Wer ist die Zielgruppe und welche Ansprüche hat sie an die mobile Version?
  2. Sollte es bereits eine bestehende Seite geben, prüfe über Analytic Tools, welcher Content auf der Seite am gefragtesten ist und stelle diesen in den Vordergrund. Wie zu Beginn gesagt: Du hast wenig Platz, stell daher das Wichtigste in den ersten Screen. Es könnte ein fataler Fehler sein, einfach nur den Inhalt des Desktop-Startscreens auf die mobile Startseite zu pressen.
  3. Reduziere den Informationsgehalt. Eine Studie belegt, dass mobile Inhalte um das Zweifache schwieriger zu verstehen sind als solche auf einem großen Screen2. Denn wenn man durch ein Schlüsselloch schaut, erkennt man nicht die umliegenden Elemente, die in der Desktop-Variante so wichtig sind, um den Gesamtkontext zu verstehen. Zudem beeinträchtigt längeres Scrollen die Merkfähigkeit. Je kürzer also der Content in der mobilen Variante, desto besser.

Mobile first Tipp 3: Für eine schnellere Ladegeschwindigkeit sorgen

Mobile Nutzer sind ungeduldig – 53 % verlassen eine mobile Seite, wenn sie nicht schneller als in 3 Sek. lädt.3 Das bedeutet, dass immer mehr Unternehmen einen starken Fokus auf die Ladezeit setzen werden. Denn Mobile Websites verdoppeln die Conversion Rates, wenn sie 2 Sek. schneller laden.4 Die Seiten booking.com, otto.de und check24.de laden sogar in unter 1 Sek.5 Jeder Click von der Startseite zur Produktdetailseite bis zum Warenkorb und den Payment-Modalitäten erfordert Zeit. Je schneller das geht, umso weniger genervt ist und umso weniger Zeit hat der User, darüber nachzudenken, den Absprung (Bounce) zu tätigen. Jede Millisekunde, die an Schnelligkeit gewonnen wird, erhöht den Traffic und folglich die Conversion Rate. Daher wird dringend empfohlen, alles zu tun, um die Ladegeschwindigkeit zu erhöhen: Bilder komprimieren, Animationen (mit hohen Ladezeiten) sperren oder durch Bilder in der mobilen Ansicht ersetzen, CSS-Code reduzieren, Inhalte nur im sichtbaren Bereich laden etc.

Mobile first Tipp 4 – Social-Media-Kampagnen für Mobile optimieren

In Deutschland nutzen mittlerweile 30 Mio. Personen soziale Netzwerke über ihr Mobiltelefon, das ist fast die Hälfte der Bevölkerung. Dabei werden außer WhatsApp hauptsächlich YouTube, Facebook und Instagram genutzt. 6 Bei dem Kanal Facebook wurde 2019 die Bildgröße von Posts auf 4:5 statt 2:3 verkleinert und die dargestellte Textlänge auf drei Zeilen reduziert. Wir empfehlen folglich, Texte für Social-Media-Postings möglichst kurz zu halten und innerhalb der maximalen drei Zeilen nach AIDA zu texten: Aufmerksamkeit erzeugen, Interesse wecken, Begehrlichkeit wecken und schlussendlich einen Handlungsaufruf einzubinden. Das Posting-Bild wird noch vor dem Text wahrgenommen und sollte in Form eines Thumb-Stoppers fungieren. Also ein Bild sein, das von seiner Aufmerksamkeit so stark ist, dass der User beim schnellen Scrollen durch den Newsfeed bei diesem Bild sofort anhält, weil es sich so wesentlich von den anderen Postings unterscheidet.

Mobile first Tipp 5 – Search-Anzeigen für Mobile optimieren

Google ist die größte Suchmaschine der Welt, hält in Deutschland einen Marktanteil von 90 % und verzeichnet ca. 140 Mio. Suchanfragen pro Tag.7 Dabei werden mittlerweile mehr Suchanfragen über das mobile Endgerät als über den Desktop getätigt.8 So ist es natürlich wichtig, dass die SERP-Snippets für die organischen wie auch Paid-Kampagnen für den kleinen Screen optimiert werden. Da mittlerweile mehr Personen ihre Suchanfragen über Mobiltelefone im Netz platzieren, sollten die Anzeigen immer auf Mobile ausgerichtet werden. Das bedeutet Anzeigentexte sollten immer kürzer gefasst werden. Während in der Desktop-Variante bis zu 160 Zeichen ausgespielt werden, sind es bei den mobilen Suchergebnissen gerade einmal 70 Zeichen – der Rest wird abgeschnitten. Daher sollte der AIDA-Text immer auf diese Zeichenlänge reduziert werden, damit für den User alles Essenzielle erkennbar ist.

Fazit

Mobile ist nach wie vor auf den Vormarsch und die Frage ist, wie lange der Desktop noch eine tragende Rolle spielt. Die vermehrte Nutzung des Internets über das Smartphone spricht für sich – wer auf der sicheren Seite sein will, sollte dem Credo Mobile first folgen und Websites sowie Online-Kampagnen immer zuerst auf Mobile optimieren. Gerade Search-Anzeigen sollten zunehmend auf Mobile optimiert werden, denn wie lange noch getippt statt gesprochen wird, wissen wir nicht, und Voice Search geschieht vornehmlich über Smartphones.

  1. https://initiatived21.de/app/uploads/2020/02/d21_index2019_2020.pdf
  2. I. Singh, M. Sumeeth und J. Miller: Evaluating the Readability of Privacy Policies in Mobile Environment, International Journal of Mobile Human Computer Interactions, vol. 3, no. 1 (January-March 2011), S. 55–78.
  3. https://www.thinkwithgoogle.com/intl/de-de/marketingressourcen/ux-design/bewertung-der-geschwindigkeit-auf-mobilgeraten-wie-schneidet-ihre-website-abdie-halfte-aller-zugriffe-im-web-erfolgt-mittlerweile-uber-mobilgerate/
  4. Akamai, State of Online Retail Performance, 2018.
  5. https://www.thinkwithgoogle.com/intl/de-de/marketingressourcen/mobile-werbung/verpasste-chancen-nur-5-der-deutschen-mobilen-websites-laden-innerhalb-einer-sekunde/
  6. https://datareportal.com/reports/digital-2020-germany
  7. https://www.websiteboosting.com/magazin/02/keyword-recherche-im-longtail.html
  8. https://www.brightedge.com/sites/default/files/BrightEdge-Mobile-Research-Paper-2017.pdf