Früher war die Desktop-Version einer Website die Hauptsache, die mobile Version war der Nachschlag. Heute ist es umgekehrt, und das nicht seit gestern. Wer eine Seite baut, ohne zuerst ans Handy zu denken, baut für eine Minderheit.
Ich will hier nicht mit Statistiken kommen. Es gibt genug Zahlen da draußen, die alle in dieselbe Richtung zeigen — die meisten Besuche kommen mobil, viele lokale Suchanfragen enden auf einem Handy innerhalb einer Stunde in einer Handlung, Google indexiert seit Jahren die mobile Version zuerst. Die Frage ist nicht, ob mobil wichtig ist. Die Frage ist, was du damit machst.
Mobile-First heißt denken, nicht nur bauen
Die meisten verstehen unter „mobil-tauglich" eine Seite, die auf dem Handy irgendwie aussieht. Das ist das Minimum, nicht das Ziel. Mobile-First als Denkweise heißt: Du fängst beim Handy an und erweiterst dann auf größere Bildschirme, nicht umgekehrt.
Warum das einen Unterschied macht: Wer für den kleinen Bildschirm plant, entscheidet sich. Was davon kommt wirklich auf die Startseite? Welche Navigationspunkte sind wichtig genug, um oben zu stehen? Was muss sofort lesbar sein, was darf in einen Accordion-Kasten?
Wer für den Desktop plant und dann „mobil anpasst", quetscht am Ende eine Desktop-Idee in ein klein Format. Das Ergebnis sieht responsiv aus, fühlt sich aber an wie ein gefalteter Prospekt.
Die Dinge, die wirklich stören
Aus der Arbeit an bestehenden Websites — das sind die Probleme, die ich am häufigsten sehe:
Text, den man zoomen muss. Wenn die Schrift auf dem Handy so klein ist, dass der Leser hineinzoomen muss, um einen Absatz zu lesen, ist sie zu klein. 16 Pixel ist das Minimum für Fließtext. Wer aus Designgründen darunter geht, opfert Lesbarkeit für Ästhetik.
Buttons, die für Finger zu klein sind. Mauszeiger sind präzise. Finger nicht. Ein Button, der weniger als 44 mal 44 Pixel groß ist, ist auf dem Handy ein Glücksspiel — trifft man ihn, trifft man auch den daneben.
Hover-Effekte als einzige Interaktion. Auf dem Handy gibt es kein Hovern. Wer wichtige Informationen nur in einem Tooltip beim Hovern sichtbar macht, versteckt sie für die Hälfte seiner Besucher.
Pop-ups, die den Bildschirm blockieren. Cookie-Banner, Newsletter-Pop-ups, Chat-Widgets — alle gleichzeitig, alle darüberlegend. Die Seite lädt, und der Besucher sieht erst mal nichts vom Inhalt. Google bestraft das mittlerweile explizit.
Formulare, die nicht funktionieren. Felder, die auf iOS verschwinden, Autofill, das die falschen Daten einträgt, Pflichtfelder ohne Fehlermeldung. Probier dein Kontaktformular mal auf einem alten Android-Gerät aus.
Ladezeit ist die unhinterfragte Grundlage
Bevor wir über hübsche Mobile-Designs reden: Wie schnell lädt deine Seite auf dem Handy? Nicht auf deinem Büro-WLAN. Auf einem durchschnittlichen Mobilfunknetz, mit einem zwei Jahre alten Gerät.
Die meisten Website-Besitzer kennen ihre Ladezeit nicht. Ich frag regelmäßig, und die häufigste Antwort ist „keine Ahnung, schnell genug". Wenn sie es dann messen, sind sie oft überrascht.
Drei Sekunden sind eine gute Zielmarke für das erste Rendering. Alles, was länger dauert, verliert Besucher — und zwar nicht die ungeduldigen, sondern die normalen. Eine Seite, die fünf Sekunden lädt, hat nicht „fünf Sekunden Ladezeit", sie hat eine Absprungrate, die sie unsichtbar macht.
Was Ladezeit wirklich treibt, sind meistens Bilder (zu groß, falsches Format), Scripts (Tracking, Chat, Cookie-Banner, die alle einzeln laden), und schlechtes Hosting. Die Lösung ist selten „eine schnellere Website bauen" — es ist „die paar Sachen rausnehmen, die sie langsam machen".
Touch ist nicht Maus
Es klingt banal, aber die Konsequenzen sind real. Finger haben keine Pixel-präzise Positionierung. Sie haben Daumen, die von unten ans Display greifen. Sie haben Feuchtigkeit, Handschuhe, kaputte Displays.
Was das für eine Website bedeutet:
- Klickziele groß genug — 44 Pixel sind kein Maximum, sondern ein Minimum.
- Genug Abstand zwischen klickbaren Elementen, damit der Finger nicht das Falsche trifft.
- Wichtige Buttons im unteren Bildschirmbereich, wo der Daumen natürlich ist. Nicht oben, wo man strecken muss.
- Keine Interaktion, die nur per Hover funktioniert. Jede Information, jede Aktion muss ohne Maus erreichbar sein.
Was „mobile-friendly" wirklich heißt
Google hat einen Test namens „Mobile-Friendly", der dir ein Etikett gibt. Das Etikett ist das Minimum. Es sagt: Deine Seite lädt auf dem Handy, der Text ist lesbar, die Buttons sind groß genug, das Menü funktioniert.
Das ist die Grundvoraussetzung, nicht das Ziel. Eine Seite kann „mobile-friendly" sein und trotzdem frustrierend. Die Frage, die dich interessieren sollte, ist nicht: „Besteht die Seite den Google-Test?" Sondern: „Wenn jemand auf dem Handy nach meinem Service sucht, auf meine Seite klickt und eine Anfrage losschicken will — wie viele schaffen das ohne aufzugeben?"
Die zweite Frage beantwortet dir kein automatisierter Test.
Testen, nicht vermuten
Das Wichtigste zuletzt: Teste deine Seite auf einem echten Handy. Nicht im Browser-Fenster auf deinem MacBook, wo du die Größe zusammenschiebst. Auf einem echten Handy, mit richtigem Mobilfunk, an einem Ort, an dem du nicht dein Büro-WLAN hast.
Am besten auf zwei: einem aktuellen iPhone und einem günstigeren Android-Gerät aus dem letzten Jahr. Was auf dem einen schnell und flüssig läuft, ruckelt auf dem anderen. Was auf dem einen gut lesbar ist, bricht auf dem anderen.
Wenn du jemanden kennst, der nicht technisch versiert ist — Mutter, Nachbar, Freund —, gib ihnen dein Handy und sag: „Find die Telefonnummer und ruf an." Wenn sie innerhalb von fünf Sekunden klicken, hast du gewonnen. Wenn sie suchen, musst du nachbessern.
Mobile-First ist keine Checkliste, die man einmal abarbeitet. Es ist die Gewohnheit, jede Entscheidung zuerst durch die Brille des Handys zu betrachten. Wer das konsequent macht, baut Seiten, die nicht nur „responsive" sind, sondern die tatsächlich funktionieren, wo die Leute sind: unterwegs, mit dem Daumen, ungeduldig.