Mobile-First-Design: Warum das Smartphone zuerst kommt
Mobile-First-Design erklärt: warum Google und Kunden Websites nach der Smartphone-Version beurteilen und wie Sie Layout, Inhalte, Tempo und Formulare planen.
Mobile-First-Design bedeutet, dass Sie Ihre Website zuerst für den kleinsten Bildschirm planen und bauen und sie erst danach für Tablets und Desktops erweitern – nicht umgekehrt. Das ist wichtig, weil die meisten Menschen Ihrem Unternehmen zuerst auf dem Smartphone begegnen und Google für Indexierung und Ranking in erster Linie die mobile Version einer Seite heranzieht. Ist die Smartphone-Version nur ein Nachgedanke, dann ist genau diese Version das, wonach Kunden und Suchmaschinen Sie beurteilen.
Dieser Artikel erklärt, was Mobile First in der Praxis bedeutet, warum es mehr ist als „die Seite schrumpft schön zusammen“ und was Sie heute auf Ihrer eigenen Website prüfen sollten.
Mobile First vs. „Responsive“: Wo liegt der Unterschied?
Fast jede moderne Website ist responsive – sie passt sich der Bildschirmbreite an. Dorthin führen aber zwei Wege:
| Desktop First | Mobile First | |
|---|---|---|
| Ausgangspunkt | Ein breites Desktop-Layout | Ein schmales Smartphone-Layout |
| Danach | Für Mobilgeräte quetschen, ausblenden und stapeln | Für größere Bildschirme Spalten und Extras ergänzen |
| Typisches Ergebnis auf dem Smartphone | Enge Menüs, winziger Text, versteckte Inhalte, schwere Seiten | Fokussierte Inhalte, große Touch-Flächen, leichtere Seiten |
| Prioritäten | Für einen großen Bildschirm festgelegt | Für die härteste Einschränkung festgelegt |
Das entscheidende Wort heißt Prioritäten. Auf dem Smartphone können Sie nicht alles gleichzeitig zeigen – Mobile First zwingt Sie also zu entscheiden, was am wichtigsten ist. Diese Entscheidung macht anschließend auch die Desktop-Version aufgeräumter.
Warum Mobile-First-Design für Ihr Unternehmen zählt
Ihre Kunden sind am Smartphone
Menschen suchen ein Restaurant, einen Zahnarzt, einen Lieferdienst oder eine Produktbewertung auf dem Smartphone – oft unterwegs, mit einer Hand, über mobile Daten. In Moldau und Rumänien ist das Smartphone, wie in den meisten Ländern Europas, das alltägliche Gerät zum Surfen, um Unternehmen per Viber oder Telegram zu schreiben und um zu bezahlen. Ist Ihre Website auf dem Smartphone umständlich, kehren viele Besucher einfach zu den Suchergebnissen zurück und tippen auf das nächste.
Google bewertet die mobile Version
Google nutzt die Mobile-First-Indexierung: Es crawlt und bewertet in erster Linie die mobile Version Ihrer Seiten. Inhalte, die nur auf dem Desktop existieren, zählen unter Umständen praktisch nicht. Auch die Core Web Vitals, Googles Kennzahlen zur Nutzererfahrung, werden auf den Geräten echter Besucher erhoben – viele davon Smartphones. Deshalb gibt es einen eigenen Leitfaden zu Ladezeit und Core Web Vitals.
Hinzufügen ist günstiger als Weglassen
Die Smartphone-Version zuerst zu gestalten ist einfacher: eine Spalte, die wesentlichen Inhalte, die Haupthandlung. Für den Desktop später eine Seitenleiste oder zusätzliche Spalten zu ergänzen, ist leicht. Ein überladenes Desktop-Layout auf einen Smartphone-Bildschirm zu zwängen, endet dagegen meist in Kompromissen und zusätzlichem Entwicklungsaufwand.
Prinzipien des Mobile-First-Designs
Inhalt zuerst, Dekoration danach
Beginnen Sie mit der Frage: Was braucht jemand am Smartphone auf dem ersten Screen? Meist: was Sie tun, für wen und die Haupthandlung – anrufen, buchen, bestellen, Angebot anfordern. Große dekorative Slider und automatisch startende Videos schieben das aus dem sichtbaren Bereich und bremsen die Seite.
Für Daumen gestalten
Platzieren Sie wichtige Aktionen dort, wo der Daumen sie leicht erreicht. Machen Sie Touch-Flächen groß genug – Apple empfiehlt mindestens 44×44 Punkte, Googles Material Design 48×48 dp, und WCAG 2.2 legt 24×24 CSS-Pixel als absolutes Minimum fest – und lassen Sie Abstand dazwischen, damit niemand den falschen Link trifft. Ein fixierter „Anrufen“- oder „Bestellen“-Button am unteren Rand funktioniert für lokale Unternehmen oft gut.
Lesbar ohne Zoomen
Fließtext um 16px, angenehmer Zeilenabstand, kurze Absätze und starker Kontrast. Wenn jemand mit zwei Fingern zoomen muss, um Ihre Preise zu lesen, hat das Design versagt.
Einfache Navigation
Ein klares Menü mit wenigen Hauptpunkten schlägt jedes Mega-Menü. Halten Sie Logo, Menü-Button und die eine wichtigste Aktion (Telefon, Warenkorb, Buchung) sichtbar. Verwenden Sie Beschriftungen, nicht nur Icons.
Formulare, die die Tastatur respektieren
In Formularen geben mobile Nutzer am häufigsten auf. Fragen Sie nur ab, was Sie brauchen, verwenden Sie die passenden Eingabetypen, damit das Smartphone die richtige Tastatur zeigt, und lassen Sie den Browser automatisch ausfüllen:
<input type="tel" name="phone" autocomplete="tel" inputmode="tel">
<input type="email" name="email" autocomplete="email">Zeigen Sie Fehler direkt neben dem Feld an und löschen Sie niemals, was der Nutzer bereits eingegeben hat.
Performance gehört zum Design
Ein Smartphone im Mobilfunknetz verzeiht weniger als ein Laptop im Büro-WLAN. Komprimieren und skalieren Sie Bilder, nutzen Sie moderne Formate, laden Sie nur den Code, den die Seite braucht, und verzichten Sie auf schwere Widgets von Drittanbietern. Eine schnelle mobile Seite ist oft die größte einzelne UX-Verbesserung, die Sie umsetzen können.
Ein Mobile-First-Prozess, Schritt für Schritt
- Aufgaben auflisten, die Menschen auf Ihrer Website erledigen, und markieren, welche davon unterwegs passieren.
- Zuerst das Smartphone-Layout skizzieren – eine Spalte mit Blöcken nach Priorität. Der Projekt-Konfigurator auf dieser Website hat eine mobile Vorschau, sodass Sie Blöcke stapeln und sehen können, wie die Seite auf dem Smartphone wirkt.
- Für kleine Bildschirme schreiben: kurze Überschriften, überfliegbare Listen, klare Buttons.
- Komponenten mit Zuständen gestalten: Buttons, Formulare, Menüs, Karten – für Touch, nicht für Hover.
- Hochskalieren: Spalten, größere Bilder und sekundäre Inhalte für Tablets und Desktops ergänzen.
- Auf echten Smartphones testen – einem günstigen Android-Gerät und einem iPhone, über mobile Daten, bei Tageslicht.
Mobile-First-Checkliste für Ihre aktuelle Website
- Die Haupthandlung ist auf dem Smartphone ohne Scrollen sichtbar.
- Keine Seite scrollt horizontal.
- Text ist ohne Zoomen lesbar; Buttons lassen sich leicht antippen.
- Das Menü ist einfach und funktioniert mit einer Hand.
- Telefonnummern sind antippbare Links, Adressen öffnen sich in Karten.
- Formulare nutzen die richtigen Tastaturen und Autofill.
- Bilder sind komprimiert; die Seite lädt über mobile Daten schnell.
- Pop-ups verdecken auf kleinen Bildschirmen nicht den Inhalt.
- Alles Wichtige vom Desktop gibt es auch mobil.
- Die Website ist für Menschen mit Behinderungen und mit Screenreader nutzbar.
Der letzte Punkt verdient einen eigenen Artikel – siehe Grundlagen der Barrierefreiheit im Web.
Heißt Mobile First, dass ich eine App brauche?
Nicht unbedingt. Eine gut gebaute Mobile-First-Website – oder eine Progressive Web App – deckt die meisten Bedürfnisse kleiner und mittlerer Unternehmen ab: Katalog, Buchung, Bestellungen, Kontakt. Eine native App mit React Native / Expo ist sinnvoll, wenn Menschen Ihren Service täglich nutzen oder Sie tiefgehende Gerätefunktionen brauchen. Beide Optionen können Sie auf der Seite zur App-Entwicklung vergleichen.
FAQ
Ist Mobile First dasselbe wie Responsive Design?
Nicht ganz. Responsive Design bedeutet, dass sich das Layout an jeden Bildschirm anpasst. Mobile First beschreibt die Reihenfolge, in der Sie gestalten und bauen: zuerst das Smartphone, dann größere Bildschirme. Eine Mobile-First-Website ist responsive, aber eine responsive Website ist nicht immer Mobile First.
Sieht eine Mobile-First-Website auf dem Desktop schlechter aus?
Nein – meist sogar aufgeräumter. Sie gestalten trotzdem ein vollständiges Desktop-Layout; Sie starten nur mit klaren Prioritäten, statt eine überladene Seite zurechtzustutzen.
Wie prüfe ich, ob meine Website mobilfreundlich ist?
Öffnen Sie sie auf Ihrem eigenen Smartphone über mobile Daten und versuchen Sie, die Hauptaufgabe zu erledigen: Preis finden, anrufen, bestellen. Prüfen Sie die Seite anschließend mit PageSpeed Insights auf Geschwindigkeit und Core Web Vitals. Für schnelle Layout-Checks hilft der Gerätemodus der Chrome DevTools.
Lässt sich meine bestehende Website ohne komplettes Redesign auf Mobile First umstellen?
Manchmal. Navigation, Touch-Flächen, Formulare, Bilder und Ladezeit zu verbessern, kann viel bewirken. Wurde die Struktur selbst nur für den Desktop gebaut, ist ein Neubau auf lange Sicht oft schneller und günstiger.
Gebaut für das Smartphone in der Hand Ihrer Kunden
Ihr nächster Kunde hält wahrscheinlich gerade ein Smartphone in der Hand. Skizzieren Sie die Struktur Ihrer Website mit der mobilen Vorschau im Konfigurator – und lassen Sie uns eine Website bauen, die sich auf jedem Bildschirm natürlich anfühlt. Was dazugehört, sehen Sie unter Website-Entwicklung.
