Mobile First Ansatz

„Mobile First“ Ansatz – Webdesign & Programmierung

Mobile First ist eine Strategie wie man Webseiten konzipiert und baut. Wie man das macht und welchen Einfluss das auf Design & Programmierung hat, erfÀhrst Du in diesem Beitrag.

Da mobile Internetnutzer immer mehr werden und der Trend sich klar fortsetzt, passt man die Herstellung einer Website dementsprechend an. Wie noch vor einigen Jahren – pre Smartphone – das einzige GerĂ€t zum Internet surfen der Computer war, so ist es heute anders. Das „mobile Internet“ hat einen guten Anteil am Kuchen und mittlerweile verschiebt sich auch der Fokus des gesamten Herstellungsprozess. Dieser liegt nun auf MobilgerĂ€ten.

Inhalt

  1. Was ist Mobile First?
    1. Mobile First im Design
    2. Mobile First in der Programmierung
  2. Ist „Mobile Friendly“ gleich „Mobile First“?
    1. Wieso sollte eine Website „Mobile Friendly“ sein?
    2. Wie teste ich „Mobile Friendly“?
  3. Googles Mobile First Indexing (SEO)
  4. Fazit

1. Was ist Mobile First?

Mobile First ist eine Strategie wie man Webseiten konzipiert und baut. Die zugrundeliegende Idee ist, dass sehr viele Menschen das Internet primĂ€r mobil nutzen. Das Ziel dieser Strategie ist es sich also auf MobilgerĂ€te zu fokussieren und Websites zu optimieren. Mobile First beginnt bereits in der Konzeption einer Website und zieht sich ĂŒbers Design bis hin zur Programmierung. 

ZukĂŒnftig werden noch viel mehr Menschen unterwegs im Internet surfen, daher fokussiert man sich auf diesen Anwendungsfall. Das primĂ€re Ziel von Mobile First ist also, die Besucher­erfahrung fĂŒr mobile GerĂ€te zu optimieren

„91,1 % aller Internetnutzer surfen auch unterwegs – per Smartphone.“

„IKT-Einsatz in Haushalten 2019“ – Statistik Austria

Mobile First beginnt – wie bereits erwĂ€hnt – bereits in der Konzeption, in Form einer Entscheidung. Was es aber fĂŒr Design und die Programmierung bedeutet erklĂ€re ich im folgenden Abschnitt des Beitrages.

1.1. Mobile First im Design

FĂŒr den Designprozess bedeutet das vor allem mit weniger BildschirmflĂ€che zu arbeiten. Sprich, fĂŒr dieselbe Information steht weniger Platz auf dem Bildschirm zur VerfĂŒgung.

Verglichen mit einem Desktop Rechner oder Laptop sind auch Interaktionsmöglichkeiten auf einem MobilgerĂ€t deutlich unterschiedlich. Der Kontext, in dem man das Internet benutzt, ist ebenso anders – man ist (meist) unterwegs.

Ein wesentlicher QualitĂ€tsfaktor der Mobile First Strategie sind Ladezeiten. Ein Webdesigner – mit dem Smartphone im Hinterkopf – setzt Ressourcen clever ein, damit die fertige Webseite schnell laden kann. Ressourcen, die sich stark negativ auf die Ladezeiten auswirken können sind, zum z.B. Schriftarten, Illustrationen/Symbole, Animationen.

Hier die wichtigsten Faktoren beim Designprozess:

  • Informationen ĂŒbersichtlich auf einem kleinen Bildschirm darstellen.
  • Knöpfe mĂŒssen groß genug sein.
  • Text muss lesbar bleiben & darf nicht zu klein sein.
  • Es muss mehr Platz zwischen interaktiven Elementen gelassen werden, um versehentliche Klicks mehrerer Elemente zu vermeiden.

1.2. Mobile First in der Programmierung

Die Produktion (Programmierung) einer Webseite folgt den gleichen Prinzipien wie der Mobile First Designprozess.

Vereinfacht gesagt baut man im ersten Schritt die Webseite fĂŒr das MobilgerĂ€t. Anschließend ergĂ€nzt man Ressourcen und Funktionen, die nur auf dem Desktop GerĂ€t verwendet werden. Im besten Fall werden diese Ressourcen auch nur am Rechner geladen.

Eine „abgespeckte“ Website ist das Ergebnis.

BezĂŒglich der Geschwindigkeit ist das Ziel den ersten Ladevorgang so schnell wie möglich zu machen. Genauer gesagt beim ersten Laden möglichst schnell Inhalte auf dem Bildschirm anzuzeigen.

Im Fachjargon wĂŒrde man sagen, „man möchte einen möglichst niedrigen LCP (Largest Contentful Paint) erreichen“. Was die LCP-Metrik im Detail ist, kannst Du in einem unserer BeitrĂ€ge nachlesen („Core Web Vitals erklĂ€rt“).

In einer perfekten Welt bedeutet das, dass man „alles“ lĂ€dt, was das MobilgerĂ€t braucht (ebenso am Desktop-Rechner). Den Teil, den nur der Desktop/Laptop braucht, wird dann dazu geladen. In der Praxis ist diese Trennung oft nicht hundertprozentig möglich.

Die wichtigsten Punkte bei der Programmierung:

  • Priorisierung der Ressourcen, die geladen werden
  • Optimierung der Ressourcen
  • HTML-Code muss sauber sein. Die Code-Struktur des Dokuments wenig verschachtelt und eher „flach“ sein.
  • Die mobile Webseite wird zuerst visuell gestylt (CSS) und das Design fĂŒr grĂ¶ĂŸere EndgerĂ€te ĂŒber Media Queries ergĂ€nzt. Media Queries sind eine technische Möglichkeit die aktuelle Bildschirmbreite abzufragen.

2. Ist „Mobile Friendly“ gleich „Mobile First“?

Jein, der Unterschied „Mobile Friendly“ und „Mobile First“ liegt im Detail:

  • „Mobile friendly“ Webseiten sind auf Smartphones bedienbar
  • „Mobile first“ Webseiten sind primĂ€r fĂŒr Smartphones geplant.

Somit ist eine Mobile First Website mit Sicherheit „mobile friendly“, aber das gilt nicht immer im Umkehrschluss.

In dem Zusammenhang liest man noch auf den Begriff Responsive Design.

„Responsive Design bedeutet, dass eine Webseite fĂŒr mobile GerĂ€te optimiert ist, aber nicht, dass sie nach dem Mobile First Ansatz gebaut ist.“

2.1. Wieso sollte eine Website „Mobile Friendly“ sein?

Zwei GrĂŒnde kommen sofort in den Kopf:

  1. Sehr viele Menschen nutzen das Internet per Smartphone.
  2. Eine mobil-optimierte Website erzielt ein besseres Suchergebnis.

Google hat schon vor Jahren offen kommuniziert, dass eine Webseite fĂŒr mobile GerĂ€te optimiert sein sollte. Die Optimierung – oder eben die fehlende Optimierung – ist ein sogenanntes „Signal fĂŒr die Nutzerfreundlichkeit“.

Googles Signale fĂŒr die Nutzerfreundlichkeit von Seiten
Signale fĂŒr die Nutzerfreundlichkeit von Webseiten

Detaillierte Informationen zu diesen Signalen findest Du direkt bei Google: https://developers.google.com/search/docs/advanced/experience/page-experience.

2.2. Ist meine Website „Mobile Friendly“? Wie testet man das?

Es gibt zwei Möglichkeiten, um zu testen, ob eine Webseite fĂŒr mobile GerĂ€te optimiert ist:

  1. Googles Test-Tool fĂŒr MobilgerĂ€te
  2. Google Search Console: „Bericht zur Nutzerfreundlichkeit auf MobilgerĂ€ten“

Es spielt keine große Rolle, ob man sich fĂŒr die eine oder andere Möglichkeit entscheidet. Beide Tools messen die Optimierung nach denselben Kriterien, unter anderem: 

  • Ist der Text zu klein zum Lesen?
  • Liegen anklickbare Elemente nicht zu dicht beieinander?
  • Ist der Inhalt breiter als der Bildschirm?

Googles Test-Tool

Einfach Internetadresse eingeben und auf „URL testen“ klicken.

Google Mobile Friendly Test
Dieses Online-Tool beantwortet die große Frage: „Ist Deine Webseite fĂŒr MobilgerĂ€te optimiert?“

Link zum Tool: https://search.google.com/test/mobile-friendly

Googles Search Console

Die Google Search Console zeigt Verbesserungsmöglichkeiten der Website auf und stellt weiterfĂŒhrende Informationen bereit. WĂ€hle links im MenĂŒ „Nutzerfreundlichkeit auf MobilgerĂ€ten“.

Report zur Nutzerfreundlichkeit auf MobilgerÀten in der Google Search Console
Der Report in der Google Search Console bietet hilfreiche Tipps zum Optimieren.

Wenn Du Deine Search Console noch nicht eingerichtet hast, solltest Du das mit unserer Anleitung („Google Search Console einrichten“) rasch erledigen können.

3. Mobile First Indexing (SEO)

Mobile First Indexierung durch Google hat nur am Rande etwas mit der vorgestellten Mobile First Strategie zu tun. Ab MĂ€rz 2021 indiziert Google Webseiten primĂ€r durch Ihren mobilen Google Bot. UrsprĂŒnglich war das fĂŒr Ende 2020 geplant, doch es gab Verzögerungen.

Wenn Deine Webseite bereits „responsive“ ist, also fĂŒr MobilgerĂ€ten optimiert ist, macht die Umstellung seitens Google keinen Unterschied fĂŒr Dich.

Die Mobile First Indexierung bedeutet im Wesentlichen, dass der Fokus seitens Google ganzheitlich auf MobilgerĂ€te gelegt wird und ist nur eine Fortsetzung der vielen Hinweise darauf. Man kann auch daraus schließen, dass Entscheider bei Google MobilgerĂ€ten zukĂŒnftig eine höhere Wichtigkeit in der Gesellschaft zuschreiben.

4. Fazit

Um zu verstehen was „Mobile First“ ist, habe ich die wichtigsten Aussagen zusammen gefasst:

  • Mobile First ist ein Ansatz, der in der Konzeption beginnt und ĂŒber Design bis hin zur Programmierung geht.
  • Das Ziel von Mobile First ist die Besuchererfahrung fĂŒr mobile GerĂ€te zu optimieren.
  • „Mobile Friendly“ ist nicht gleich „Mobile First“
    • „Mobile friendly“ Webseiten sind auf Smartphones bedienbar. Oft sagt man auch „Responsive Design“
    • „Mobile first“ Webseiten sind primĂ€r fĂŒr Smartphones geplant.
  • Googles „Mobile First Indizierung“ heißt, dass die mobile Version einer Website bevorzugt indiziert wird. Das kann auch eine „responsive“ Website sein, die nicht nach der „Mobile First“‑Strategie erstellt wurde

Hat Dir dieser Beitrag geholfen?
Dann bitte teile ihn – das hilft uns besonders 👍.

Wenn Du weitere Fragen hast, haben sie andere womöglich auch – hinterlasse uns ein Kommentar! 😉

Das könnte Sie auch interessieren

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert