Mobile-First-Webdesign: Was es bedeutet und wie Sie es umsetzen

Kurz gesagt: Mobile First bedeutet, dass Sie eine Website zuerst für das Smartphone planen, gestalten und programmieren und sie danach für Tablet und Desktop erweitern. Sie entscheiden also auf dem kleinsten Bildschirm, was wirklich wichtig ist, und fügen auf größeren Bildschirmen Platz und Extras hinzu. Für SEO zählt das, weil Google für Indexierung und Ranking die mobile Version Ihrer Inhalte verwendet.

Was bedeutet Mobile First?

Mobile First beschreibt die Reihenfolge, in der eine Website entsteht. Früher wurde meist zuerst die Desktop-Version entworfen und am Ende eine mobile Fassung abgeleitet, indem man Spalten untereinander schob und Elemente ausblendete. Bei Mobile First ist es umgekehrt: Der erste Entwurf entsteht für einen schmalen Bildschirm, der mit dem Daumen bedient wird. Erst wenn diese Version funktioniert, kommen Breakpoints für größere Bildschirme dazu.

Das betrifft drei Ebenen:

• Inhalt: Was muss ein Besucher auf dem Smartphone sofort sehen, und was kann weiter unten oder hinter einem Klick stehen?
• Gestaltung: Navigation, Schaltflächen, Formulare und Schriftgrößen werden für Touch und kleine Bildschirme ausgelegt.
• Code: Die Grund-Styles gelten für kleine Bildschirme, Media Queries mit min-width ergänzen das Layout für größere. Dieses schrittweise Erweitern nennt man auch Progressive Enhancement.

Mobile First heißt nicht, dass die Desktop-Version schlechter wird. Sie bekommt nur nicht mehr die erste Aufmerksamkeit, und oft wird sie dadurch aufgeräumter.

Mobile First, responsiv oder adaptiv, wo ist der Unterschied?

Die drei Begriffe werden oft vermischt, beschreiben aber unterschiedliche Dinge:

Google unterscheidet drei Konfigurationen für mobile Websites: responsives Webdesign, Dynamic Serving (gleiche URL, aber je nach Gerät anderes HTML) und separate URLs, etwa eine eigene m.-Subdomain. Google empfiehlt responsives Webdesign, weil es das am einfachsten umzusetzende und zu pflegende Muster ist (Google Search Central). Dynamic Serving und separate URLs entsprechen dem, was oft als adaptiv bezeichnet wird.

In der Praxis heißt die beste Wahl für die meisten Unternehmen: responsiv umgesetzt, mobil zuerst geplant. Responsiv ohne Mobile First führt häufig zu Seiten, die auf dem Smartphone zwar passen, aber wie eine zusammengequetschte Desktop-Seite wirken.

Warum Mobile First für SEO zählt (Mobile-First-Indexierung)

Google verwendet für Indexierung und Ranking die mobile Version der Inhalte einer Website, gecrawlt mit dem Smartphone-Agenten (Google Search Central). Was auf dem Smartphone fehlt, kann Google also übersehen. Daraus folgen einige konkrete Regeln aus Googles Dokumentation:

• Gleiche Inhalte: Die mobile Version sollte dieselben wesentlichen Inhalte haben wie die Desktop-Version. Akkordeons und Tabs sind in Ordnung; Inhalte, die mobil ganz fehlen, werden unter Umständen nicht indexiert.
• Gleiche Überschriften, Titel und Meta-Beschreibungen auf beiden Versionen.
• Gleiche strukturierte Daten, zum Beispiel für Breadcrumbs, Produkte und Videos.
• Bilder mit demselben Alt-Text und möglichst denselben Bild-URLs.
• Lazy Loading: Hauptinhalte dürfen nicht erst nach einem Klick oder Wischen geladen werden, denn diese Aktionen führt Google nicht aus.
• Gleiche robots-Meta-Tags: Ein noindex nur auf der mobilen Version kann die Indexierung verhindern.

Bei einer responsiven Website sind die meisten Punkte automatisch erfüllt, weil es nur ein HTML gibt. Die Ladezeit ist ein eigenes Thema: Wie schnell und stabil eine Seite auf dem Smartphone lädt, messen die Core Web Vitals. Was dahintersteckt, erklären wir in Core Web Vitals verständlich erklärt.

Schritt für Schritt: eine Website mobil zuerst planen

1. Aufgaben der mobilen Besucher klären. Sehen Sie in Ihrer Webanalyse nach, welche Seiten mobil besucht werden und was die Besucher dort tun. Ein Handwerksbetrieb braucht mobil vor allem Telefonnummer, Leistungsgebiet und Anfrageformular, ein B2B-Softwareanbieter eher eine klare Erklärung und einen Demo-Termin.
2. Inhalte priorisieren, nicht verstecken. Ordnen Sie jede Seite nach Wichtigkeit. web.dev rät ausdrücklich davon ab, Inhalte auszublenden, nur weil sie nicht auf den Bildschirm passen, denn die Bildschirmgröße sagt nichts darüber aus, was ein Nutzer braucht (web.dev).
3. Wireframes ab der kleinsten Breite. Beginnen Sie mit einer Spalte. Wo stehen Überschrift, Nutzenversprechen, Beleg und Handlungsaufforderung, wenn nur eine schmale Spalte zur Verfügung steht?
4. Bedienung für Finger auslegen. Touch-Ziele sollten etwa 48 geräteunabhängige Pixel groß sein und rund 8 Pixel Abstand zueinander haben (web.dev). Formularfelder bekommen passende Typen wie type="tel" oder type="email", damit die richtige Tastatur erscheint.
5. Viewport, Schrift und Bilder. Jede Seite braucht den Viewport-Tag <meta name="viewport" content="width=device-width, initial-scale=1">. Zoomen sollte nicht gesperrt werden, weil das die Barrierefreiheit verschlechtert. Bilder skalieren mit max-width: 100% und haben trotzdem width- und height-Attribute, damit der Platz reserviert ist und nichts verrutscht (web.dev).
6. Breakpoints nach Inhalt setzen. Nicht nach Gerätemodellen, sondern dort, wo das Layout beim Verbreitern nicht mehr gut aussieht. web.dev empfiehlt, zuerst für den kleinen Bildschirm zu gestalten und den Bildschirm dann zu verbreitern, bis ein Breakpoint nötig wird.
7. Für Tablet und Desktop erweitern. Jetzt kommen mehrere Spalten, größere Bilder, eine ausgeklappte Navigation und Zusatzinhalte dazu, die auf dem großen Bildschirm echten Mehrwert bringen.

Diese Reihenfolge ist die Grundlage, mit der wir Websites in unserem Webdesign aufbauen. Wenn Ihre aktuelle Seite auf dem Smartphone deutlich schwächer ist als auf dem Desktop, kann ein Neuaufbau sinnvoll sein. Woran Sie das erkennen, steht in unserem Beitrag zum Webseite-Relaunch.

Mobile First im Onlineshop

Im Shop entscheidet die mobile Version direkt über Umsatz, weil hier nicht nur gelesen, sondern gekauft wird. Achten Sie besonders auf diese Stellen:

• Kategorieseiten: Filter und Sortierung sind mit einem Daumen erreichbar und zeigen sofort, wie viele Produkte übrig bleiben.
• Produktseiten: Bild, Name, Preis, Varianten und der Warenkorb-Button stehen weit oben. Lieferzeit und Versandkosten sind ohne Suchen sichtbar.
• Warenkorb und Checkout: so wenige Felder wie möglich, Gastbestellung ohne Kundenkonto, Autofill über korrekte autocomplete-Attribute und Zahlungsarten, die auf dem Smartphone schnell gehen.
• Produktdaten: Die strukturierten Daten für Produkte müssen mobil vollständig vorhanden sein, denn Google liest die mobile Version.

Wenn Sie einen Shop neu aufbauen oder umbauen wollen, finden Sie in unserem Bereich Onlineshop erstellen mehr dazu, wie wir dabei vorgehen.

Wie testen Sie die mobile Version?

• Echte Geräte: Öffnen Sie die wichtigsten Seiten auf mindestens einem aktuellen und einem älteren Smartphone, im Hoch- und Querformat, und gehen Sie einen kompletten Ablauf durch, etwa eine Anfrage oder einen Kauf.
• Chrome DevTools, Gerätemodus: praktisch für schnelle Kontrollen bei verschiedenen Breiten. Google selbst nennt den Gerätemodus aber nur eine Annäherung erster Ordnung, denn der Code läuft dabei nicht auf einem Mobilgerät (Chrome for Developers).
• PageSpeed Insights: zeigt Felddaten echter Chrome-Nutzer aus den vergangenen 28 Tagen und Labordaten aus Lighthouse. Für die mobile Messung simuliert Lighthouse ein Mittelklasse-Gerät in einem Mobilfunknetz (Google for Developers).
• Lighthouse: läuft direkt in den Chrome DevTools und prüft Leistung, Barrierefreiheit, Best Practices und SEO (Chrome for Developers).
• Google Search Console: Im Bericht zu den Core Web Vitals sehen Sie, welche Gruppen von URLs mobil Probleme haben. Eine Einführung finden Sie in unserer Anleitung zur Google Search Console.

Prüfen Sie dabei ganz praktisch: Gibt es horizontales Scrollen? Lassen sich alle Links und Buttons sicher treffen? Ist der Text ohne Zoomen lesbar? Verschiebt sich etwas, während die Seite lädt? Und sind auf dem Smartphone wirklich alle Inhalte vorhanden, die auf dem Desktop stehen?