Wichtige Grundlagen über das Mobile First-Konzept
Die Mobile First-Strategie beschreibt eine neue Vorgehensweise bei der Konzeption und Erstellung von Websites, Onlineshops und Plattformen. Wird dieser Ansatz verfolgt, arbeiten UX-/UI-Designer:innen und Web-Developer:innen zuerst an der Umsetzung des Projekts für die mobilen Ansichten (Smartphone und Tablet). Erst im Anschluss wird auf dieser Basis das Desktop-Design entwickelt und programmiert.
Zu Beginn des Beitrags gehen wir detailliert auf die Mobile First-Strategie ein und erklären euch ihre Hintergründe sowie die bedeutsamsten Grundlagen. Im Anschluss stellen wir die Vor- und Nachteile der Mobile First-Methode gegenüber. Zum Abschluss beleuchten wir das Mobile First-Konzept aus der Sicht einer UX-/UI-Designerin – dafür haben wir unsere erfahrene Designerin Monika befragt.
Mobile First ist viel mehr als nur ein Trend
Lange Zeit war es im UX-/UI-Design und in der Programmierung üblich, sich zuerst um die Konzeption, das Design und die technische Umsetzung der Desktop-Version eines Webprojekts zu kümmern. Erst im Anschluss wurden die Seiten mittels Responsive Design für die kleineren Bildschirmgrößen von Smartphones und Tablets optimiert. Im E-Commerce verbreitete sich aufgrund der stetig steigenden Anzahl von mobilen Surfer:innen die Erstellung von separaten Mobile-Shopping-Apps, die die Anforderungen und Bedürfnisse dieser Zielgruppen bestmöglich berücksichtigen.
Die Mobile First-Strategie beruht auf der Tatsache, dass mittlerweile die große Mehrheit der Browser-Suchanfragen auf Smartphones und Tablets durchgeführt werden. Auch wenn ihr im B2B-Bereich tätig seid, ist diese Entwicklung relevant für euch, da durchschnittlich rund 50 % dieser Kundinnen und Kunden auf diese Weise Recherche über Produkte und Dienstleistungen durchführen. Hinzukommt, dass Google seit 2021 auf das sogenannte Mobile-First-Indexing setzt. Dies bedeutet, dass die Crawler von Google bei der Erstellung von organischen Rankings die mobile Version der zu bewertenden Website analysieren. Die Qualität der mobilen Ansichten ist zu einem bedeutsamen Ranking-Faktor geworden, weshalb viele SEO-Expertinnen und Experten die Mobile First-Strategie befürworten.
Dennoch müssen wir berücksichtigen, dass der umgekehrte Workflow der Mobile First-Methode die Arbeitsprozesse von Designer:innen und Programmierer:innen verändert. Bei der Konzeption, beim Design-Entwurf und bei der Programmierung verfolgen wir das Prinzip, uns auf das Wesentliche, auf die essenziellen Funktionen und Inhalte zu konzentrieren. Der Grund liegt auf der Hand: Auf kleinen Geräten verfügt eine Seite über deutlich weniger Platz und bei der mobilen Navigation bestehen andere Userflows und Prioritäten. Ein professionelles mobiles Design vereinbart zielgruppengerechtes UX-/UI-Design, Funktionalität und Benutzerfreundlichkeit. Mit der Mobile First-Strategie verfolgt ihr das Ziel, euren (potenziellen) Kundinnen und Kunden die bestmögliche User Experience auf allen Geräten anbieten zu können.
Vor- und Nachteile der Mobile First-Strategie
In der Praxis verfügt der Mobile First-Ansatz gemäß unserer Erfahrung über folgende Vor- und Nachteile:
Vorteile:
- Fokus auf den Prioritäten der Zielgruppen: Wie bereits erwähnt, steht euch auf Smartphone- und Tablet-Bildschirmen weniger Platz für euren Content zur Verfügung. Diesen vermeintlichen Nachteil könnt ihr allerdings in einen erfolgsfördernden Vorteil verwandeln. Durch eine genaue Analyse der Bedürfnisse eurer Zielgruppen könnt ihr feststellen, welche Informationen und Funktionen besonders relevant für sie sind. Die Reihung der Inhalte nimmt beim mobilen Design eine noch bedeutsamere Rolle ein als beim Desktop-Design, da die User:innen nicht alles auf einem Blick sehen und mehr scrollen müssen. Die Beschränkung auf das Wesentliche sorgt für eine bessere Navigation und Orientierung der User:innen und erhöht die Wahrscheinlichkeit, dass sie dem von euch gewünschten Userflow folgen und Call-to-Action-Buttons ausführen.
- Im Trend der Zeit: Hochwertige, mobile Webseiten anzubieten, entspricht dem Zeitgeist und den Erwartungen von vielen Zielgruppen. Wenn ihr eure Website nicht für die mobile Ansicht optimiert, werden viele potenzielle Kundinnen und Kunden die Website vorzeitig verlassen, da die Navigation zu umständlich ist und bestimmte Funktionen gar nicht oder nur teilweise funktionieren. Da die Häufigkeit der Smartphone- und Tablet-Nutzung aller Voraussicht nach weiter zunehmen wird, solltet ihr Zeit und Ressourcen in die Umsetzung einer Mobilversion eures Internetauftritts investieren, um online langfristig wettbewerbsfähig zu bleiben.
- PageSpeed: Durch die Fokussierung auf die wichtigen Content-Elemente befinden sich in der Regel keine sehr komplexen Funktionen auf den Webseiten, die die Ladegeschwindigkeit drosseln. Der PageSpeed ist ein wichtiger Google-Ranking-Faktor und PageSpeed-Optimierungsmaßnahmen sind fast immer Bestandteil von professionellen SEO-Strategien, die das organische Browser-Ranking verbessern.
- Effiziente Programmierung: In der Praxis nimmt die technische Umsetzung von Mobile First UX-/UI-Design insgesamt oft weniger Zeit in Anspruch als die klassische Methode, bei welcher zuerst die Desktop-Version programmiert wird. Bei der mobilen Optimierung einer Desktop-Version treten oft Bugs und Platzprobleme auf, die es notwendig machen, den Aufbau eurer Webseiten nachträglich anzupassen. Wenn aber eine Mobilversion in eine Desktop-Version erweitert wird, können viele dieser Probleme nicht auftreten. Den zusätzlichen Platz könnt ihr für die Platzierung von mehr userfreundlichem Content nützen.
Nachteile:
- Zeitaufwand der Konzeption: UX- und UI-Designer:innen müssen dafür sorgen, dass die Besucher:innen eines Mobile First-Webauftritts genauso gut informiert werden und genauso viele Handlungsaufforderungen durchführen wie auf Websites, die gemäß dem Standardschema erstellt wurden. In vielen Fällen nimmt die Konzeption mehr Zeit in Anspruch, da der notwendigen Beschränkung auf die wesentlichen Inhalte eine umfangreiche Analyse der Suchintentionen, Wünsche und Anforderungen der Zielgruppen vorausgeht.
- Mobile First „Gewöhnungsphase“: Wir dürfen nicht vergessen, dass die Mobile First-Strategie einen neuen Denkansatz im UX-/UI-Design und in der Webprogrammierung darstellt. Wenn eine Digitalagentur ihre Prozesse gemäß dieser Methode anpasst, müssen sich die Designer:innen und Programmierer:innen erst an den neuen Ablauf der Projektumsetzung gewöhnen. Arbeiten für ein Projekt verschiedene Agenturen und/oder Einzelpersonen zusammen, müssen sich alle auf diese Strategie einigen und sie ganzheitlich umsetzen, denn nur so können alle Projektbeteiligten von ihr profitieren.
Mobile First aus Sicht einer UX-/UI-Designerin
Für unsere UX-/UI-Designerin Monika macht der Grundsatz der Beschränkung auf das Wesentliche den Kern der Mobile First-Strategie aus: „Mobile User:innen möchten auf einer Website die Navigation schnell und problemlos bedienen und ohne langes Scrollen ihre gewünschten Inhalte aufrufen können. Um ihnen dies zu ermöglichen, muss ich bei der Entwicklung des UX-/UI-Konzepts Kreativität beweisen, um alle wichtigen Informationen und Funktionen an passender Stelle zu platzieren.“
Monika // UX / UI Designerin
Für Designer:innen gibt es bestimmte Elemente, auf die sie bei der Entwicklung eines Mobile First-Designs besonders achten müssen. Beispielsweise wird beim Desktop-Design gerne der Hover-Effekt eingesetzt. Durch diesen Effekt ändert sich die Optik, meist die Hintergrundfarbe, des Elements, über das die User:innen mit ihrer Maus fahren. Da auf Smartphones und Tablets aber mit den Fingern geklickt wird, funktioniert dieser Effekt nicht. Monika kommt zu folgendem Schluss: „Um auch den mobilen Website-Besucher:innen zu signalisieren, dass sie mit dem betroffenen Element interagieren können, müssen sich anklickbare Buttons und Bereiche optisch deutlich von den statischen Inhalten unterscheiden.“
Mindestens genauso relevant ist die Wahl der richtigen Größe von Buttons, Navigations-Icons und Schriften. Diese müssen unbedingt groß genug sein, sodass es zu keiner Beeinträchtigung der User Experience kommt. Wichtige Elemente sollten nicht weiter als eine Daumenlänge voneinander entfernt sein, da viele User:innen diesen Finger zur Navigation einsetzen. Ebenso sollten Buttons nicht zu nah aneinander und nicht am unteren Bildschirmrand platziert werden, um die Benutzerfreundlichkeit zu gewährleisten. „Den Einsatz einer Sidebar müssen wir bei jedem mobilen Projekt genau überdenken, da viele Smartphone- und Tablet-Nutzer:innen am rechten Rand mit ihrem Finger nach unten scrollen“, sagt Monika.
Insgesamt können die Designer:innen, die Programmierer:innen und die User:innen von der Umsetzung einer Mobile First-Strategie profitieren. Die Konzentration auf das Wesentliche beschleunigt Arbeitsprozesse der Website-Ersteller:innen und sorgt für mehr Übersichtlichkeit für die Betrachter:innen des Endproduktes.