Was ist Mobile-First-Design?

Was Mobile-First-Design ausmacht

Früher wurden Websites zuerst für den Desktop-Bildschirm entworfen (~1920 px breit). Erst nachträglich wurde versucht, sie auch auf dem Handy (~375 px breit) lesbar zu machen – meist mit Kompromissen.

Mobile-First dreht den Ansatz um: Designer und Entwickler starten mit dem kleinsten Bildschirm. Was für 375 px funktioniert, wird dann für 768 px (Tablet) und 1280 px (Desktop) angereichert.

Das hat Konsequenzen für die Struktur:

• Inhalte werden priorisiert (was MUSS sofort sichtbar sein?)
• Buttons müssen mit dem Daumen bedienbar sein (rund 48 × 48 px sind dafür ein empfohlener Mindestwert für die Tap-Fläche)
• Schriften ohne Zoom lesbar (16 px sind ein brauchbarer Ausgangswert)
• Bilder lazy-geladen (sonst zu langsam auf Mobilfunk)
• Komplexe Mega-Menüs werden zu Hamburger-Menüs
• Pop-ups nicht zu groß (Google straft „intrusive interstitials“ auf Mobile)

Warum Mobile-First für Ihren Betrieb wichtig ist

Drei Gründe zeigen die Dringlichkeit:

1. Suchen mit Ortsbezug passieren unterwegs. Wer „Sanitärbetrieb Bensheim“ googelt, tippt das meist im Bus oder auf dem Sofa – nicht am Schreibtisch.

2. Auf dem Mobilfunknetz fällt jede unnötige Datei auf. Was am Glasfaseranschluss im Büro sofort da ist, lässt am Handy spürbar auf sich warten – und in der Trefferliste steht schon der nächste Anbieter. Was dabei zählt, steht unter Ladezeit.

3. Googles Mobile-First-Index ist seit 2018 Standard. Das heißt: Google bewertet die mobile Version Ihrer Website als die maßgebliche. Eine schwache Mobile-Version wirkt sich deshalb auch auf die Desktop-Suche aus.

So setzen Sie Mobile-First konkret um

Wenn Sie eine neue Website bauen lassen: explizit Mobile-First-Ansatz vereinbaren. Fragen Sie nach, bei welcher Bildschirmbreite der Entwurf beginnt; bei Mobile-First sind es 375 px. Beim Webdesign aus Bensheim entsteht jede Seite in dieser Reihenfolge – zuerst das Smartphone, dann der Desktop.

Wenn Sie eine bestehende Website prüfen wollen:

1. Rufen Sie Ihre Seite auf dem eigenen Smartphone auf – im Mobilfunknetz, nicht im WLAN
2. Achten Sie darauf, ob Sie zoomen müssen, ob Sie Buttons treffen und ob sich etwas seitwärts schieben lässt
3. Messen Sie danach die Ladezeit mit den Werkzeugen im nächsten Abschnitt

Bei Problemen liegt es meist an:

• Schriften zu klein
• Buttons zu eng nebeneinander
• Viewport-Meta-Tag fehlt
• Inhalte breiter als der Bildschirm

Wie Sie Mobile-Performance messen

Womit Sie messen:

• Google PageSpeed Insights (pagespeed.web.dev) – Mobile-Tab zeigt Core Web Vitals + Verbesserungs-Vorschläge
• Google Search Console – Bereich „Core Web Vitals“ zeigt Probleme der ganzen Website
• Echtes Smartphone-Test – keine Tools-Simulation ersetzt das Aufrufen auf dem eigenen Handy

Häufige Fehler beim Mobile-First-Design

• Test nur in Chrome-DevTools – simulierte Mobile-Ansicht ist nicht identisch mit echtem Handy
• Sticky-Pop-ups die den Bildschirm bedecken – Google straft seit 2017 „intrusive interstitials“
• Komplexe Mega-Menüs ohne Mobile-Variante – auf 375 px ist die zweite Ebene kaum noch zu treffen
• Bilder ohne Lazy-Loading – der erste Aufbau lädt auch Bilder weit unterhalb der Fold-Linie mit
• Telefonnummer nicht klickbar – ohne tel:-Link muss die Nummer abgetippt werden

Häufige Fragen zu Mobile-First-Design

Reicht es nicht, dass die Website auf Mobile irgendwie funktioniert?

Nein. Google's Mobile-First-Index bewertet die Mobile-Version als Hauptversion. Eine „irgendwie funktioniert“-Mobile-Site wird damit überall als die Hauptversion bewertet.

Brauche ich eine eigene Mobile-Website?

Nein. Das war bis ca. 2015 üblich (m.example.com). Heute ist Responsive Design Standard – eine Website, die sich automatisch an alle Bildschirmgrößen anpasst.

Mein Builder (Wix/Jimdo) hat Mobile-Modus. Reicht das?

Bedingt. Builder generieren oft eine separate Mobile-Ansicht – diese ist meist abgespeckter als Desktop. Das ist okay, aber nicht optimal. Echtes Mobile-First-Design startet vom kleinen Screen aus.

Wie sehe ich ob meine Website Mobile-First ist?

Öffnen Sie sie auf einem Smartphone. Können Sie alles ohne Zoom lesen, alle Buttons mit dem Daumen treffen, schnelle Ladezeit (unter 3 Sek)? Wenn ja: vermutlich okay. Wenn nein: Handlungsbedarf.

Verfasst von David Rupa, Inhaber von Bergstraße Digital.