In Deutschland kamen im August 2026 50,9 % aller Seitenaufrufe von Mobilgeräten und 47,4 % vom Desktop (Statcounter). Viele Webseiten entstehen trotzdem am großen Monitor und werden erst danach für das Telefon zurechtgeschoben. Auf dem Smartphone merkt man das sofort. Man zoomt, scrollt seitwärts und tippt neben den Knopf.
Mobile First Design dreht die Reihenfolge um. Zuerst entsteht die schmale Fassung, danach kommt Platz für Tablet und Desktop dazu.
Was ist Mobile First Design?
Mobile First Design heißt, eine Webseite zuerst für den kleinsten Bildschirm zu gestalten und sie dann Schritt für Schritt für größere Bildschirme zu erweitern.
- Zuerst entsteht die Fassung fürs Smartphone, meist einspaltig.
- Auf dem Tablet kommen bei mittlerer Breite zum Beispiel eine zweite Spalte oder größere Bilder dazu.
- Am Desktop nutzt das Layout zuletzt den zusätzlichen Platz großer Bildschirme.
Ist Mobile First dasselbe wie Responsive Design?
Nicht ganz, aber beides gehört zusammen. Responsive Design ist die Technik, mit der sich ein Layout per CSS an die Bildschirmbreite anpasst. Mobile First beschreibt die Reihenfolge, in der man diese Anpassungen schreibt. Eine Mobile-First-Seite ist immer responsiv. Eine responsive Seite muss aber nicht mobil zuerst geplant sein.
Laut MDN, dem Entwicklerhandbuch von Mozilla, baut man zuerst ein einspaltiges Layout für schmale Bildschirme und schaltet per Media Query weitere Spalten dazu, sobald genug Breite da ist. Wer andersherum vorgeht, baut ebenfalls responsiv. Er beginnt aber am Desktop und nimmt für kleine Bildschirme wieder etwas weg. Dabei fällt auf dem Telefon leicht etwas heraus, das eigentlich wichtig war.
Warum ist Mobile First für Google und Ihre Besucher wichtig?
Google bewertet Ihre Seite anhand der mobilen Fassung. Und etwa jeder zweite Seitenaufruf in Deutschland kommt ohnehin vom Telefon.
Google indexiert mit dem Smartphone
Google nutzt für Indexierung und Ranking die mobile Fassung Ihrer Webseite. Im Oktober 2023 hat Google die Umstellung für das gesamte Web als abgeschlossen gemeldet. Ab dem 5. Juli 2024 hat Google auch die letzten Seiten umgestellt, die bis dahin noch mit dem Desktop-Crawler erfasst wurden. Seitdem crawlt und indexiert Google Seiten für die Suche nur noch mit dem Smartphone-Crawler. Den Desktop-Crawler setzt Google nach eigener Aussage nur in einzelnen Fällen ein, etwa für Produkteinträge und Google for Jobs.
Lässt Ihre mobile Seite Inhalte weg oder ist sie schlecht aufgebaut, wirkt sich das deshalb auch auf Suchen am Desktop aus.
- Die mobile Seite soll dieselben Inhalte zeigen wie die Desktop-Seite. Was nur am Desktop steht, fehlt Google im Zweifel.
- Inhalte, die erst nach Wischen, Klicken oder Tippen nachgeladen werden, lädt Google nicht. Hauptinhalte gehören deshalb nicht hinter ein solches Lazy Loading.
- Eine Seite, deren Inhalt auf Mobilgeräten gar nicht abrufbar ist, kann Google nicht mehr indexieren.
- Die Core Web Vitals nutzt Google nach eigener Aussage in seinen Ranking-Systemen. Relevanz geht aber vor. In der Search Console stehen die Werte für Mobil und Desktop getrennt. Prüfen Sie beide.
Was die Nutzungszahlen zeigen
Telefon und Rechner liegen bei den Seitenaufrufen fast gleichauf, in Deutschland mit einem knappen Vorsprung fürs Telefon. Gekauft, gebucht oder angemeldet wird am Telefon aber seltener.
- In Deutschland kamen im August 2026 50,9 % der Seitenaufrufe von Mobilgeräten, 47,4 % vom Desktop und 1,7 % von Tablets (Statcounter).
- Weltweit lagen Mobil und Desktop im selben Monat fast gleichauf, mit 49,4 % zu 49,1 % (Statcounter).
- Am Desktop endeten 3,4 % der Sitzungen mit einem Abschluss, also einem Kauf, einer Anmeldung oder einer Buchung. Im mobilen Web waren es rund 2 %. Grundlage sind 99 Milliarden Web- und App-Sitzungen auf mehr als 6.500 Websites aus neun Branchen (Contentsquare, Digital Experience Benchmark 2026).
Contentsquare erklärt den Abstand vor allem damit, dass Menschen am Telefon eher stöbern und größere Entscheidungen am Rechner treffen. Auf dem kleinen Bildschirm ist außerdem wenig Platz, deshalb wiegt dort jede Hürde schwerer. Wie viel davon an den Seiten selbst liegt, beziffert die Studie nicht. Ein umständliches Formular auf dem Handy ist aber ein Grund, den Sie selbst beheben können.
Was mobile Besucher brauchen
Wer eine Seite auf dem Telefon öffnet, tippt mit dem Finger statt zu klicken und sieht nur einen schmalen Ausschnitt.
- Der größte sichtbare Inhalt steht nach spätestens 2,5 Sekunden da. Das ist Googles Grenzwert für einen guten LCP-Wert.
- Das Menü lässt sich mit einer Hand bedienen.
- Knöpfe und Links sind groß genug für den Finger.
- Texte sind ohne Zoomen lesbar.
- Telefonnummer, Adresse und Route lassen sich direkt antippen.
Welche Regeln gelten beim Mobile First Design?
Beim Mobile First Design ordnen Sie die Inhalte nach Wichtigkeit, bauen Knöpfe für den Finger, halten die Ladezeit klein und erweitern das Layout von klein nach groß. Dazu kommen eine einfache Navigation, lesbare Schrift, kurze Formulare und Tests auf echten Geräten.
Für einige dieser Punkte gibt es belegte Richtwerte.
Inhalte nach Wichtigkeit ordnen
Auf einem schmalen Bildschirm ist wenig Platz. Sie müssen also entscheiden, was oben steht. Das ist die wichtigste Information der Seite und die Handlung, die der Besucher ausführen soll, etwa anrufen oder einen Termin buchen.
Diese Auswahl hilft auch am Desktop. Eine Seite, die auf dem Telefon mit dem Nötigsten auskommt, wirkt auf dem großen Bildschirm aufgeräumter.
Bedienelemente für den Finger bauen
Auf dem Telefon bedient man die Seite mit dem Finger, nicht mit der Maus. Das hat Folgen für die Gestaltung.
- Größe: Google empfiehlt rund 48 × 48 Pixel je Tippziel. Die Barrierefreiheitsrichtlinie WCAG 2.2 verlangt mindestens 24 × 24 CSS-Pixel, mit Ausnahmen, etwa wenn genug Abstand zu anderen Zielen besteht oder der Link im Fließtext steht.
- Abstand: Etwa 8 Pixel zwischen zwei Tippzielen empfiehlt Google, waagerecht wie senkrecht. Dann trifft der Finger nicht aus Versehen den Nachbarknopf.
- Daumenbereich: Legen Sie häufige Aktionen wie Anruf oder Terminbuchung dorthin, wo der Daumen sie erreicht, zum Beispiel in eine Leiste am unteren Rand.
- Hover: Auf dem Touchscreen gibt es kein Überfahren mit der Maus. Was nur beim Hover erscheint, sieht am Telefon niemand.
- Galerien: Bildergalerien und Karussells sollten sich wischen lassen.
Die Ladezeit von Anfang an einplanen
Unterwegs läuft das Telefon über das Mobilfunknetz, und dessen Verbindung schwankt. Planen Sie die Ladezeit deshalb mit, bevor das erste Bild eingebaut ist.
- Bilder in modernen Formaten wie WebP oder AVIF und in passender Größe ausliefern
- Bilder und Videos unterhalb des sichtbaren Bereichs erst beim Scrollen laden (Lazy Loading), Hauptinhalte aber sofort
- CSS und JavaScript verkleinern und nur laden, was die Seite braucht
- Wenige Schriften einbinden und font-display auf swap setzen, damit der Text nicht auf die Schrift wartet
- Das CSS für den ersten sichtbaren Bereich direkt in die Seite schreiben (Critical CSS)
Weitere Maßnahmen stehen im Ratgeber zur Pagespeed-Optimierung.
Von klein nach groß erweitern
Mobile First folgt dem Prinzip des Progressive Enhancement. Man beginnt mit einer schnellen Fassung, die überall funktioniert und alle Kerninhalte zeigt, und ergänzt, was größere Bildschirme zusätzlich können. Eine Seitenleiste mit weiterführenden Links erscheint dann zum Beispiel erst ab Desktopbreite, der Text daneben steht auf jedem Gerät.
Der umgekehrte Weg heißt Graceful Degradation. Er startet am Desktop und nimmt für kleine Bildschirme weg.
Die Navigation vereinfachen
Ein Desktop-Menü mit zehn Punkten und aufklappenden Untermenüs passt nicht auf ein Telefon. Mobil braucht es weniger Einträge und kurze Wege.
- Hamburger-Menü für die Hauptnavigation, mit dem Wort „Menü“ daneben
- Leiste am unteren Rand für die wenigen Aktionen, die ständig gebraucht werden
- Fixierter Kopfbereich mit Logo und dem wichtigsten Knopf
- Brotkrumen-Navigation bei tiefen Seitenstrukturen, damit Besucher sehen, wo sie sind
- Suchfeld bei Seiten mit vielen Unterseiten, gut sichtbar statt im Menü versteckt
Schrift für kleine Bildschirme wählen
Auf dem Telefon muss Text ohne Zoomen lesbar sein.
- Schriftgröße: 16 Pixel für Fließtext sind eine gute Grundlage. Das ist auch die Standardgröße, mit der Browser Text anzeigen.
- Eingabefelder: Ab 16 Pixel Schrift zoomt Safari auf dem iPhone beim Antippen nicht mehr in das Feld hinein.
- Zeilenabstand: mindestens das 1,5-Fache der Schriftgröße (WCAG 1.4.8, Stufe AAA, also eine Empfehlung und keine Pflicht nach dem BFSG).
- Kontrast: mindestens 4,5:1 zwischen Text und Hintergrund (WCAG 1.4.3, Stufe AA).
- Zeilenlänge: höchstens 80 Zeichen pro Zeile, ebenfalls aus WCAG 1.4.8. Auf dem Telefon ergibt sich das von selbst, am Desktop muss man es begrenzen.
- Überschriften: H1, H2 und H3 müssen sich sichtbar voneinander unterscheiden.
Ob Ihre Seite unter das Barrierefreiheitsstärkungsgesetz fällt, klärt der Ratgeber zum BFSG.
Ein Formular auf dem Telefon auszufüllen ist mühsam. Jedes Feld, das wegfällt, hilft.
- So wenige Felder wie möglich. Für eine erste Anfrage reichen oft Name und E-Mail-Adresse oder Telefonnummer.
- Passende Feldtypen verwenden, etwa type="tel" für Telefonnummern und type="email" für E-Mail-Adressen. Dann öffnet das Telefon die passende Tastatur.
- Autocomplete-Attribute setzen, damit der Browser Name und Adresse selbst einträgt.
- Eingabefelder groß genug und mit ausreichend Innenabstand anlegen.
- Fehler direkt am Feld anzeigen, nicht erst nach dem Absenden.
- Den Absenden-Knopf über die volle Breite ziehen.
Auf echten Geräten testen
Die Gerätesimulation im Browser zeigt nur eine Annäherung. Ob die Seite am Telefon wirklich funktioniert, sehen Sie erst auf echten Geräten.
- Google Lighthouse prüft Ladezeit, Barrierefreiheit und SEO automatisch.
- Der Core-Web-Vitals-Bericht der Google Search Console zeigt Probleme der mobilen Seiten getrennt vom Desktop.
- Mit BrowserStack oder LambdaTest testen Sie auf vielen realen Geräten und Browsern.
- Sehen Sie sich die Core Web Vitals LCP, INP und CLS regelmäßig an, nicht nur zum Start der Seite.
- Geben Sie jemandem Ihr Telefon und schauen Sie zu, wie er eine Anfrage abschickt. Dabei lernen Sie am meisten.
Woran erkennen Sie, dass Ihre Seite nicht fürs Telefon gebaut wurde?
Sie erkennen es daran, dass Sie auf dem Telefon zoomen, seitwärts scrollen oder danebentippen müssen. Eine Seite, die zuerst für den Rechner gebaut und danach mobil zurechtgestutzt wurde, zeigt meist mehrere der folgenden Merkmale. Prüfen Sie Ihre eigene Seite auf dem Telefon gegen diese Liste.
- Sie müssen zoomen, um den Text zu lesen, oder waagerecht scrollen, weil Elemente über den Bildschirmrand ragen.
- Schaltflächen liegen so dicht beieinander, dass Sie mit dem Daumen danebentippen.
- Der Inhalt springt beim Laden noch einmal um, weil Bilder ohne feste Maße eingebunden sind. Google misst das als CLS.
- Ein Pop-up verdeckt beim Aufruf den ganzen Bildschirm. Google schreibt, dass solche Einblendungen der Suchleistung schaden können, und empfiehlt stattdessen Banner, die nur einen kleinen Teil des Bildschirms einnehmen.
- Fotos kommen in Desktop-Auflösung, und das Telefon muss sie komplett laden.
- Manche Informationen erscheinen nur auf dem Desktop. Dann fehlen sie auch Google.
- Das Kontaktformular verlangt Felder, die auf dem Telefon mühsam auszufüllen sind.
- Die Telefonnummer ist nur Text und lässt sich nicht antippen.
Diese Punkte lassen sich einzeln messen und beheben. Welche Werte Ihre Seite erreicht, sehen Sie im Ladezeit-Check. Er zeigt LCP und CLS aus einem Messlauf von Google und, sobald Google genug Daten echter Besucher hat, auch INP. Dazu nennt er die Stellen, an denen sich am meisten Ladezeit sparen lässt.
Womit fangen Sie an?
Fangen Sie mit dem eigenen Telefon an. Öffnen Sie Ihre Seite, füllen Sie das Kontaktformular aus und tippen Sie auf die Telefonnummer.
Planen Sie eine neue Seite oder überarbeiten Sie eine alte, entwerfen Sie die schmale Fassung zuerst. Was auf dem Telefon funktioniert, lässt sich am Desktop leicht erweitern. Umgekehrt fällt eher etwas weg.
Wenn ein Neubau ansteht, finden Sie Ablauf und Preise auf der Seite zum Webdesign.
