Über 60 Prozent deiner Besucher kommen übers Handy. Google bewertet nur noch die mobile Version. Checkliste, typische Fehler und konkrete Umsetzungstipps für Mobile First.
Mach einen einfachen Test: Öffne deine Website auf deinem Handy. Nicht auf dem großen iPhone Pro Max, sondern auf einem normalen Gerät. Ist der Text lesbar ohne Zoomen? Findest du den Kontakt-Button sofort? Laden die Bilder sauber? Wenn du bei einer dieser Fragen zögerst, hast du ein Problem. Denn über 60 Prozent deiner Besucher kommen genau so auf deine Seite – über das Smartphone. Und Google bewertet seit 2021 ausschließlich die mobile Version für dein Ranking.
Die Zahlen: Mobile ist kein Trend mehr
In Deutschland kommen mittlerweile über 60 Prozent aller Website-Besuche über mobile Geräte. Bei manchen Branchen – Gastronomie, lokale Dienstleister, E-Commerce – sind es 75 bis 80 Prozent. Das ist nicht überraschend, wenn man darüber nachdenkt: Die meisten Menschen haben ihr Smartphone immer dabei, den Laptop nicht.
Google hat darauf reagiert und indexiert seit März 2021 ausschließlich die mobile Version deiner Website. Das nennt sich Mobile-First Indexing. Deine Desktop-Version ist für das Ranking faktisch irrelevant geworden. Trotzdem sitzen die meisten Webdesigner vor einem 27-Zoll-Monitor und designen erst die Desktop-Ansicht. Das ist, als würdest du ein Buch für Smartphones schreiben und es dann auf Papier drucken.
Was Mobile First wirklich bedeutet
Mobile First heißt nicht „die Desktop-Seite irgendwie aufs Handy quetschen". Das wäre Responsive Design – wichtig, aber nur die halbe Miete. Mobile First bedeutet:
- Du designst zuerst für den kleinsten Bildschirm. Alles, was auf 375 Pixel Breite funktioniert, funktioniert auch auf 1920 Pixel.
- Du priorisierst rigoros. Weniger Platz zwingt dich zu klareren Entscheidungen: Was ist wirklich wichtig? Was kann weg?
- Du optimierst für Touch-Bedienung. Große Buttons, ausreichend Abstand zwischen klickbaren Elementen, kein Hover-Effekt als einzige Interaktionsmöglichkeit.
- Du denkst an mobile Ladezeiten. Viele Nutzer sind über Mobilfunk verbunden, nicht über WLAN. Jedes Kilobyte zählt.
- Erst danach erweiterst du das Layout für Tablet und Desktop – mit zusätzlichen Spalten, größeren Bildern, erweiterten Navigationen.
Warum das einen Unterschied macht
Wenn du zuerst für Desktop designst, musst du nachher Dinge weglassen oder zusammenschieben. Das führt fast immer zu Kompromissen. Wenn du zuerst für Mobile designst, fügst du nachher Dinge hinzu. Das führt zu besseren Ergebnissen – auf allen Geräten.
Die häufigsten Mobile-Fehler
Wir prüfen jede Woche Websites und sehen immer die gleichen Probleme:
- Navigation, die nicht funktioniert: Hamburger-Menüs, die sich nicht öffnen, Dropdowns, die auf Touch-Geräten nicht reagieren, oder Navigationen mit drei Klickebenen.
- Zu kleine Schrift: Alles unter 16 Pixel Schriftgröße ist auf dem Smartphone schwer lesbar. Viele Websites nutzen 14 oder sogar 12 Pixel – das zwingt zum Zoomen.
- Buttons zu nah beieinander: Wenn zwei Buttons nur 5 Pixel Abstand haben, tippt man regelmäßig den falschen. Apple empfiehlt mindestens 44 mal 44 Pixel als Tippfläche.
- Pop-ups auf Mobile: Ein Pop-up, das den ganzen Bildschirm blockiert und dessen Schließen-Kreuz kaum treffbar ist. Google bestraft übrigens störende Interstitials auf Mobile seit 2017 mit Ranking-Abzügen.
- Formulare mit 15 Feldern: Auf dem Desktop nervig, auf dem Handy eine Zumutung. Jedes Feld, das nicht zwingend nötig ist, kostet Conversions.
- Horizontales Scrollen: Tabellen, Bilder oder iFrames, die breiter sind als der Bildschirm. Ein absolutes No-Go.
Die Mobile-Checkliste
Nimm diese Liste und geh deine Website Punkt für Punkt durch:
- Schriftgröße mindestens 16 Pixel im Fließtext
- Buttons mindestens 44 mal 44 Pixel groß
- Mindestens 8 Pixel Abstand zwischen klickbaren Elementen
- Wichtigste CTA ohne Scrollen sichtbar
- Telefonnummer als klickbarer tel:-Link
- Bilder responsive mit srcset-Attribut
- Kein horizontales Scrollen – auf keiner Seite
- Formulare maximal 3 bis 5 Felder auf Mobile
- Ladezeit unter 3 Sekunden bei 4G-Verbindung
- Keine Pop-ups, die den Inhalt blockieren
Navigation auf Mobile: Weniger ist mehr
Die Navigation ist auf Mobile der kritischste Punkt. Auf dem Desktop kannst du ein Mega-Menü mit 30 Links bauen. Auf dem Handy hast du Platz für 5 bis 7 Hauptpunkte – mehr nicht.
Gute Mobile-Navigationen haben diese Eigenschaften:
- Maximal 7 Hauptmenüpunkte
- Klare, kurze Bezeichnungen (nicht „Unsere umfassenden Leistungen", sondern „Leistungen")
- Hamburger-Menü mit sichtbarem Label (das reine Icon wird von vielen Nutzern nicht als Menü erkannt)
- Kontakt-Button oder Telefonnummer immer sichtbar, auch ohne Menü zu öffnen
- Breadcrumbs auf Unterseiten, damit der Nutzer weiß, wo er ist
Formulare auf dem Smartphone
Formulare auf Mobile brauchen besondere Aufmerksamkeit. Was auf dem Desktop in 30 Sekunden ausgefüllt ist, dauert auf dem Smartphone 2 Minuten – oder wird abgebrochen.
- Weniger Felder: Name, E-Mail, Nachricht. Mehr braucht ein Kontaktformular auf Mobile selten.
- Richtige Input-Typen: type="email" für E-Mail-Felder (zeigt die richtige Tastatur), type="tel" für Telefon, inputmode="numeric" für Zahlen.
- Große Eingabefelder: Mindestens 44 Pixel hoch, damit man sie gut treffen kann.
- Auto-Complete aktivieren: Moderne Browser können Felder automatisch ausfüllen – lass sie.
- Fehler inline anzeigen: Nicht erst nach dem Absenden, sondern direkt am Feld.
Richtig testen: Echte Geräte statt Simulator
Der Entwicklermodus im Browser zeigt eine Annäherung, aber nicht die Realität. Teste deine Website auf echten Geräten:
- Ein iPhone SE oder iPhone 13 mini (kleiner Bildschirm, hohe Verbreitung)
- Ein Mittelklasse-Android-Gerät (Samsung A-Serie oder ähnlich) – nicht das neueste Flaggschiff, sondern was die meisten Menschen tatsächlich nutzen
- Ein Tablet im Hochformat
Du wirst überrascht sein, was auf echten Geräten alles anders aussieht als im Simulator. Touch-Flächen fühlen sich anders an, Schriften wirken kleiner, und die Ladezeit über Mobilfunk zeigt die wahre Performance.
Praxis-Tipp: Bitte fünf verschiedene Leute, auf deiner Website eine bestimmte Aufgabe zu erledigen – zum Beispiel ein Kontaktformular ausfüllen oder eine bestimmte Information finden. Beobachte, ohne zu helfen. Du wirst in 10 Minuten mehr über die Mobile-Qualität deiner Website lernen als in jeder Analyse.
Häufige Fragen
Ist Responsive Design dasselbe wie Mobile First?
Nein. Responsive Design bedeutet, dass sich das Layout an verschiedene Bildschirmgrößen anpasst. Mobile First bedeutet, dass du beim Design zuerst an den kleinsten Bildschirm denkst und von dort aus erweiterst. Mobile First ist eine Designphilosophie, Responsive Design eine technische Umsetzung.
Muss ich eine eigene mobile Version meiner Website bauen?
Nein, separate mobile Websites (m.domain.de) sind veraltet. Eine einzige responsive Website, die sich an alle Bildschirmgrößen anpasst, ist der Standard. Google empfiehlt das ausdrücklich.
Wie teste ich, ob meine Website mobilfreundlich ist?
Nutze den Lighthouse-Test in Chrome (Rechtsklick → Untersuchen → Lighthouse → Mobile). Google PageSpeed Insights testet ebenfalls die mobile Version. Und am wichtigsten: Teste auf echten Geräten.
Was sind AMP-Seiten und brauche ich die?
AMP (Accelerated Mobile Pages) war ein Google-Projekt für ultraschnelle mobile Seiten. Google hat AMP seit 2021 nicht mehr bevorzugt behandelt. Für die meisten Websites ist AMP nicht mehr nötig – eine schnelle, gut optimierte responsive Website reicht.
Meine Desktop-Version sieht toll aus, mobile ist okay. Reicht das?
Nein. Google nutzt ausschließlich die mobile Version für das Ranking. Wenn deine mobile Version „nur okay" ist, wirkt sich das direkt auf deine Sichtbarkeit aus – egal wie gut die Desktop-Version ist.
Das Wichtigste auf einen Blick
- Über 60 Prozent der Besucher kommen mobil – in vielen Branchen noch mehr
- Google bewertet seit 2021 nur noch die mobile Version deiner Website
- Mobile First bedeutet: Zuerst für das Smartphone designen, dann erweitern
- Die häufigsten Fehler: zu kleine Schrift, zu kleine Buttons, zu viele Formularfelder
- Teste auf echten Geräten, nicht nur im Browser-Simulator
- Gute Mobile-Optimierung verbessert die Nutzererfahrung auf allen Geräten
Merksätze
Was auf dem Smartphone nicht funktioniert, funktioniert für die Mehrheit deiner Besucher nicht.
Mobile First ist keine Einschränkung – es ist ein Filter für das Wesentliche.
Deine Website sieht auf dem Handy nicht gut aus? Wir machen einen kostenlosen Mobile-Check und zeigen dir, wo die größten Hebel liegen.
