Was bedeutet Mobile First?
Mach mal den Test: Öffne deine eigene Website auf dem Handy. Findest du in fünf Sekunden, was du anbietest und wie man dich erreicht? Wenn nicht, ist das kein Schönheitsfehler. Hier kommen die meisten deiner Besucher an — und hier schaut auch Google hin.
Mobile First hat zwei Bedeutungen, die gern durcheinandergehen:
- Mobile-First-Design: ein Ansatz fürs Gestalten und Entwickeln. Du planst die Seite zuerst für den kleinen Bildschirm, mit dem Nötigsten in einer Spalte, und baust sie dann für Tablet und Desktop aus.
- Mobile-First-Indexierung: wie Google deine Website liest. Google nutzt laut eigener Doku die mobile Version deiner Inhalte, abgerufen mit dem Smartphone-Crawler, für Indexierung und Ranking.
Bekannt gemacht hat den Design-Ansatz der Designer Luke Wroblewski in einem Blogbeitrag von 2009. Sein stärkstes Argument: Auf einem kleinen Bildschirm ist kein Platz für Überflüssiges. Du musst entscheiden, was wirklich zählt.
Warum das zählt
Im September 2026 kamen in Deutschland laut Statcounter 59,9 % aller Seitenaufrufe von Smartphones, 38,3 % vom Desktop und nur 1,8 % von Tablets. Das Statistische Bundesamt zählte 2024 in 90,8 % der Haushalte ein Smartphone, aber nur in 40,7 % einen stationären PC.
Bei Google ist die Sache seit Sommer 2024 entschieden. Nach rund sieben Jahren Umstellung crawlt Google seit dem 5. Juli 2024 alle Websites mit dem Smartphone-Crawler. Googles Ansage dazu ist unmissverständlich: Ist dein Inhalt mit einem Mobilgerät gar nicht erreichbar, wird er nicht mehr indexiert.
Mobile First und Responsive Design
Responsive Design ist die Technik: Eine Seite, eine Adresse, das Layout passt sich der Bildschirmbreite an. Google empfiehlt genau das. Mobile First ist die Reihenfolge, in der du responsiv baust — vom Kleinen zum Großen.
Mobile First
Desktop First
Startet mit einer Spalte
Startet mit vollem Layout
Fügt für große Schirme hinzu
Nimmt für kleine Schirme weg
Zwingt zur Priorität
Lädt zum Quetschen ein
Desktop First ist nicht verboten. Die Gefahr ist nur, dass am Ende auf dem Handy eine gequetschte Desktop-Seite herauskommt, bei der Wichtiges hinter drei Menüs verschwindet.
Beispiele aus der Praxis
Mobil zählt vor allem die Geschwindigkeit. Laut Web Almanac 2024 bestanden mobil nur 43 % der Websites alle Core Web Vitals, am Desktop 54 %. Was schnelleres Laden bringen kann, zeigen zwei Fallstudien, die Google auf web.dev veröffentlicht hat:
Case A · Onlinehandel
Swappie: gebrauchte iPhones
+42 %
Umsatz von Mobilbesuchern
−55 %
Ladezeit des größten Elements
Mobile Conversion Rate im Verhältnis zum Desktop von 24 % auf 34 %
Nach rund drei Monaten Arbeit an der Ladeleistung. Testjahr nennt die Fallstudie nicht.
Case B · Telekommunikation
Vodafone: A/B-Test einer Landingpage
−31 %
Ladezeit des größten Elements
+8 %
Verkäufe
Leads pro Besuch +15 %
Der Test lief nicht rein mobil, sondern über alle Geräte. Er zeigt, was Tempo bringt — mobil wiegt es am schwersten.
Häufige Fehler
Fehler 1 · Inhalte mobil weglassen
„Auf dem Handy blenden wir den Text aus, ist eh zu lang.“ Damit blendest du ihn auch für Google aus. Google rät: gleicher Hauptinhalt, gleiche Überschriften, gleiche strukturierte Daten auf beiden Versionen. Platz sparst du mit Akkordeons oder Tabs, nicht mit Streichen.
Fehler 2 · Inhalte erst nach Klick oder Wischen laden
Der Google-Crawler klickt und wischt nicht. Was erst nach einer Aktion des Nutzers nachgeladen wird, sieht er oft nicht.
Fehler 3 · Zu kleine Buttons, gesperrter Zoom
Laut Web Almanac 2022 bestanden nur 42 % der Mobilseiten die Lighthouse-Prüfung für ausreichend große Tippflächen, und 28 % verhinderten das Zoomen. Für Menschen mit Sehschwäche ist das eine Sackgasse. Die Barrierefreiheits-Richtlinien WCAG 2.2 verlangen mindestens 24 × 24 Pixel pro Tippziel.
Fehler 4 · Nur am großen Monitor abnehmen
Wer neue Seiten nur am Schreibtisch freigibt, sieht die Version, die die wenigsten sehen. Nimm jede Seite zuerst am Handy ab.
So prüfst du deine Website
Googles Mobile-Friendly-Test gibt es seit Dezember 2023 nicht mehr. Stattdessen:
- PageSpeed Insights oder Lighthouse: misst mobil und Desktop getrennt, inklusive Core Web Vitals.
- Google Search Console: Die URL-Prüfung zeigt, wie der Smartphone-Crawler deine Seite sieht.
- Google Analytics 4: Unter „Gerätekategorie“ siehst du, wie viele deiner Besucher wirklich mobil kommen.
- Dein eigenes Handy: einmal im Monat die fünf wichtigsten Seiten durchklicken.
Häufige Fragen
Was ist der Unterschied zwischen Mobile First und Responsive Design?
Responsive Design ist die Technik, mit der sich ein Layout an die Bildschirmbreite anpasst. Mobile First ist die Reihenfolge: zuerst die kleine Ansicht planen, dann für größere Bildschirme erweitern. Responsiv kann man auch Desktop First bauen.
Was bedeutet Mobile-First-Indexierung für meine Website?
Google bewertet deine Seite anhand der mobilen Version. Seit Juli 2024 gilt das für alle Websites. Was mobil fehlt oder nicht erreichbar ist, zählt für Google nicht.
Wie prüfe ich, ob meine Website mobilfreundlich ist?
Den Mobile-Friendly-Test von Google gibt es nicht mehr. Nutze PageSpeed Insights oder Lighthouse für Ladezeit und Bedienbarkeit, die URL-Prüfung in der Google Search Console für die Sicht des Crawlers und am besten dein eigenes Handy.
Wie groß müssen Buttons auf dem Handy sein?
Die WCAG 2.2 verlangen auf Stufe AA mindestens 24 × 24 CSS-Pixel pro Tippziel, mit Ausnahmen etwa bei ausreichend Abstand. Lighthouse prüft strenger mit 48 × 48 Pixeln. Größer ist fast immer besser.
Lohnt sich Mobile First auch bei viel Desktop-Traffic?
Ja, schon wegen Google: Die Indexierung läuft mobil, egal woher deine Besucher kommen. Für die Gestaltung schau in deine eigenen Gerätezahlen und gewichte danach.
Quellen
- Google Search Central: Mobile-First-Indexierung
- Google Search Central Blog: Mobile-Indexierung abgeschlossen (2024)
- Google Search Central Blog: Mobile-first is here (2023)
- Google Search Central Blog: Page Experience (2023)
- MDN Web Docs: Responsive Design
- Statcounter: Plattform-Anteile Deutschland
- Destatis: Ausstattung privater Haushalte mit Informationstechnik
- HTTP Archive: Web Almanac 2024, Performance
- HTTP Archive: Web Almanac 2022, Mobile Web
- W3C: WCAG 2.2, Target Size (Minimum)
- web.dev: Fallstudie Swappie
- web.dev: Fallstudie Vodafone
