Mobile First ist ein Design- und Entwicklungsansatz, bei dem eine Webseite oder Anwendung zuerst für mobile Endgeräte entworfen wird und erst danach für größere Bildschirme (Tablet, Desktop) erweitert. Die Reihenfolge ist hier entscheidend: Statt eine Desktop-Variante nachträglich “mobil-tauglich” zu machen, beginnt der Entwurf bei der kleinsten Bildschirmgröße – und wächst von dort nach oben. Hinter dem Konzept steht eine simple Realität: Mehr als die Hälfte des weltweiten Web-Traffics kommt heute von mobilen Geräten, und Google indexiert seit 2020 fast ausschließlich die mobile Version einer Webseite. Wer das Smartphone nicht als Ausgangspunkt nimmt, baut zwangsläufig am wichtigsten Nutzungsszenario vorbei.
Mobile First vs. Responsive Design
Die beiden Begriffe werden häufig synonym verwendet, beschreiben aber unterschiedliche Dinge:
| Konzept | Was es beschreibt |
|---|---|
| Responsive Design | Eine Webseite passt sich unterschiedlichen Bildschirmgrößen fluide an – per CSS Media Queries, flexible Grids, skalierbare Bilder. |
| Mobile First | Die Reihenfolge der Entwicklung: zuerst die mobile Variante, dann nach oben skalieren. |
Mobile First ist also kein Gegensatz zu Responsive Design – es ist die Herangehensweise, mit der ein Responsive Design heute fast immer gebaut wird. Im CSS äußert sich das in der Schreibweise von Media Queries: min-width-Queries (mobile zuerst, dann größer) sind Mobile First, max-width-Queries (Desktop zuerst, dann kleiner) sind Desktop First.
/* Mobile First: Basis-Styles gelten für klein, Media Queries erweitern */
.headline { font-size: 1.5rem; }
@media (min-width: 768px) {
.headline { font-size: 2rem; }
}
@media (min-width: 1200px) {
.headline { font-size: 2.75rem; }
}
Warum Mobile First sich durchgesetzt hat
- Mobile-First-Indexing von Google: Seit September 2020 nutzt Google primär die mobile Version einer Webseite für die Indexierung und das Ranking. Inhalte, die nur auf Desktop angezeigt werden, sind faktisch unsichtbar.
- Nutzerverhalten: Über 60 % des organischen Traffics laufen mobil. In manchen Branchen (News, Local Search, Social-Referral) liegt der Anteil bei über 80 %.
- Performance-Druck: Mobile Geräte haben langsamere CPUs und schwankende Netzverbindungen. Wer zuerst hier optimiert, baut automatisch schlanker.
- Inhaltliche Disziplin: Der enge mobile Viewport zwingt Designer und Redakteure, die wirklich wichtigen Inhalte und Call-to-Actions zuerst zu zeigen. Was mobil oben steht, ist meistens auch desktop-relevant.
Auswirkungen auf das Design
Mobile First verändert konkret, wie Layouts entstehen:
- Single-Column-Layouts sind die Basis – die Spalten kommen erst bei größeren Viewports dazu
- Navigation kollabiert in ein Burger-Menü oder eine Sticky-Bottom-Bar – komplexe Mega-Menüs werden ab Tablet wieder aufgefaltet
- Touch-Targets ab 44×44 px – Buttons und Links müssen mit dem Daumen treffsicher bedienbar sein
- Typografie skaliert mit: Basis-Schriftgröße 16–18 px für gute mobile Lesbarkeit, größere Headlines erst ab Tablet
- Bilder werden responsive ausgespielt:
srcset,sizes, moderne Formate (WebP/AVIF) reduzieren Datenvolumen drastisch - Conversion-Pfade werden vereinfacht: Formulare mit weniger Feldern, klarere Hierarchie der CTAs
Mobile First und Core Web Vitals
Die Core Web Vitals – Googles Performance-Metriken – werden mobil gemessen. Das macht Mobile First indirekt zu einem SEO-Faktor:
- LCP (Largest Contentful Paint): Mobile sollte das Hauptelement in <2,5 s erscheinen
- CLS (Cumulative Layout Shift): Layout darf nicht springen, besonders kritisch bei nachgeladenen Bildern und Ads
- INP (Interaction to Next Paint): Tap-Reaktion unter 200 ms
Wer Mobile First konsequent umsetzt, hat fast immer auch grüne Web Vitals.
Häufige Fehler beim Mobile First
- Versteckte Inhalte: Content per
display: nonemobil ausblenden – Google sieht ihn dann ggf. trotzdem nicht im Index - Tap-Targets zu klein: Links direkt nebeneinander, ohne ausreichenden Abstand
- Schriftgrößen unter 16 px: iOS zoomt dann beim Tap in ein Formularfeld – schlechte UX
- Riesige Hero-Bilder ohne
srcset: Mobile lädt unnötigerweise das Desktop-Asset - Horizontaler Scroll: ein Element ist breiter als der Viewport und reißt die Seite auf
Häufige Fragen zu Mobile First
Ist Mobile First für jede Webseite Pflicht? Praktisch ja. Selbst Branchen mit überwiegend B2B-Desktop-Nutzung haben heute über 30 % mobilen Traffic – meist im Erstkontakt. Wer dort schlecht erscheint, verliert den Lead, bevor der Desktop überhaupt zum Einsatz kommt.
Mobile First oder eine eigene mobile Domain (m.example.com)? Eine eigene m.-Subdomain ist veraltet und schafft technische Probleme (Duplicate-Content, Redirect-Ketten). Heutiger Standard ist responsive Mobile First auf einer Domain.
Funktioniert Mobile First auch für komplexe B2B-Software? Ja – aber mit Augenmaß. Datentabellen, Multi-Pane-Layouts und Drag-&-Drop-Workflows sind mobil oft nicht sinnvoll bedienbar. Hier wird mobil meist ein reduzierter Read-Only-Modus angeboten, die Vollfunktion bleibt Desktop-only.
Verändert sich der Aufwand durch Mobile First? Insgesamt nein – der Aufwand verschiebt sich nur. Die mobile Variante kostet vorne mehr Zeit, dafür entsteht das Desktop-Layout durch additive Erweiterung schneller.
Fazit
Mobile First ist heute Standard, nicht Empfehlung. Wer eine neue Webseite plant oder ein Bestandsprojekt überarbeitet, sollte den mobilen Use-Case als Ausgangspunkt nehmen – nicht aus Trend-Gründen, sondern weil Google, Nutzer und Performance-Metriken dort entschieden werden. Wir setzen Mobile First in jedem Projekt konsequent um – egal ob Website-Entwicklung, Webshop oder Relaunch. Sprich uns für ein unverbindliches Beratungsgespräch gerne an.