Mobile-First wird 2026 auf jeder Konferenz und in jedem LinkedIn-Post gepredigt. Trotzdem sehe ich fast jede Woche das gleiche Problem: Eine frisch gebaute Website, die am Desktop hübsch aussieht und auf dem Handy zusammenbricht. Nicht weil die Designer schlecht sind. Sondern weil sie den Begriff falsch verstehen.
Mobile-First heißt nicht, dass man am Ende auch mal auf dem Smartphone reinschaut. Es heißt, dass das Handy der Ausgangspunkt ist. Alles andere kommt danach. Und genau diesen Reihenfolge-Trick machen viele Kollegen kaputt.
Warum entwerfen so viele weiter am großen Bildschirm?
Ganz ehrlich: weil es bequemer ist. Ein 27-Zoll-Monitor gibt Platz. Man kann große Bilder setzen, breite Menüleisten, elegante Hover-Effekte. Das fühlt sich beim Entwerfen gut an. Der Designer sitzt vor seinem Cinema Display, zieht Kästen, alles wirkt großzügig.
Dann wird das Ganze für Mobile "runtergebrochen". Und das ist der Denkfehler. Ein Desktop-Layout, das man auf 375 Pixel Breite quetscht, ist kein Mobile-Layout. Es ist ein zusammengedrücktes Desktop-Layout. Der Unterschied klingt akademisch, ist aber der Grund, warum sich so viele Handy-Seiten falsch anfühlen.
Wenn man dagegen mit dem schmalen Viewport anfängt, muss man von der ersten Minute an priorisieren. Was ist wirklich wichtig? Was kommt zuerst? Ein 375-Pixel-Bildschirm verzeiht keine Deko. Diese Härte ist ein Geschenk, weil sie die Seite zwingt, ehrlich zu sein.
Die vier Fails, die ich immer wieder sehe
1. Buttons zum Zielen statt zum Tippen
Ein Finger ist kein Mauszeiger. Apple empfiehlt seit Jahren mindestens 44 mal 44 Punkt für Touch-Ziele, Google nennt in seinen Material-Richtlinien 48 mal 48 dp. Trotzdem baue ich regelmäßig Seiten um, bei denen der "Jetzt anrufen"-Button 30 Pixel hoch ist und direkt neben einem zweiten Link klebt. Wer dann mit dem Daumen tippt, trifft die Hälfte der Zeit daneben. Bei einer Handwerker-Seite in Olching war der wichtigste Button, die Telefonnummer, so klein, dass ältere Kunden ihn schlicht nicht getroffen haben. Das kostet echte Anrufe.
2. Hover-Menüs ohne Touch-Alternative
Auf dem Desktop klappt ein Untermenü auf, wenn man mit der Maus drüberfährt. Auf dem Handy gibt es kein "drüberfahren". Es gibt nur tippen. Wenn das Hauptmenü aber nur per Hover funktioniert, kommt der Handy-Nutzer nie zu den Unterseiten. Ich habe das bei einer Kanzlei-Website in Germering gesehen: Die Leistungsseiten waren am Smartphone praktisch nicht erreichbar, weil das Aufklapp-Menü nur mit Maus reagierte. Monatelang. Niemandem war es aufgefallen, weil intern alle am Desktop gearbeitet haben.
3. Riesen-Header, die den halben Bildschirm fressen
Ein fixierter Header mit Logo, Slogan und drei Zeilen Navigation sieht am Desktop schick aus. Am Handy nimmt so ein Ungetüm gern die Hälfte der sichtbaren Fläche weg, bevor der Besucher überhaupt Inhalt sieht. Er scrollt und der Header bleibt kleben. Auf einem iPhone mit ohnehin knappem Platz ist das ärgerlich. Faustregel: Der Header darf auf dem Handy höchstens etwa 15 Prozent der Höhe belegen.
4. Wichtiges landet außerhalb der Daumenzone
Die meisten Menschen halten ihr Handy in einer Hand und bedienen es mit dem Daumen. Der Daumen erreicht bequem die untere Hälfte des Bildschirms. Der obere Rand ist Streckzone. Wenn der einzige Call-to-Action ganz oben rechts sitzt, muss man umgreifen. Klingt nach Kleinigkeit, entscheidet aber, ob jemand anruft oder weiterwischt.
Die Restaurant-Speisekarte, die dreimal Zoom brauchte
Ein Beispiel, das mir hängen geblieben ist. Ein Restaurant-Kunde aus dem Münchner Westen wollte seine Speisekarte online haben. Der Desktop-Entwurf war richtig gut. Zweispaltig, klare Preise, schöne Typografie, alles an seinem Platz. Auf dem großen Monitor: ein Genuss.
Dann habe ich die Seite auf meinem eigenen iPhone geöffnet. Die zwei Spalten waren auf 375 Pixel gepresst worden, die Schrift dadurch winzig. Um den Preis für die Schweinshaxe zu lesen, musste ich dreimal mit den Fingern aufziehen. Dreimal zoomen für eine Zahl. Kein Mensch macht das, wenn er hungrig um 19 Uhr eine Karte checkt.
Das Frustrierende daran: Es lag nicht am Können. Es lag daran, dass vor dem Launch niemand die Seite mit einem echten Daumen auf einem echten Telefon getestet hatte. Alle Freigaben liefen über Laptop-Screenshots. Wir haben die Karte dann auf dem Handy einspaltig gemacht, größere Schrift, tippbare Kategorien zum Aufklappen. Zwei Stunden Arbeit. Der Unterschied war Tag und Nacht. Mehr dazu, wie wir generell arbeiten, steht auf unserer Seite zum Webdesign.
Ein Mobile-First-Test, den auch Nicht-Techniker schaffen
Sie müssen kein Entwickler sein, um die schlimmsten Fehler selbst zu finden. Nehmen Sie sich zehn Minuten und Ihr eigenes Handy. Hier ist der Ablauf, den ich auch Kunden gebe:
- Einhändig testen. Nehmen Sie das Handy in eine Hand, so wie Sie es im Alltag halten. Kein Auflegen, kein zweite Hand zum Zeigen. Kommen Sie mit dem Daumen an jeden wichtigen Button? An die Telefonnummer, das Kontaktformular, das Menü?
- Nicht zoomen dürfen. Verbieten Sie sich das Aufziehen. Wenn Sie irgendwo zoomen müssen, um etwas zu lesen, ist die Schrift zu klein. Punkt. Kein Kunde zoomt freiwillig.
- Die Fünf-Sekunden-Frage. Öffnen Sie die Startseite und zählen Sie bis fünf. Wissen Sie danach, was die Firma macht und wie man Kontakt aufnimmt? Oder frisst der Header noch alles?
- Der Kalt-Test bei schlechtem Empfang. Schalten Sie WLAN aus und laden Sie die Seite über Mobilfunk, am besten unterwegs im Zug Richtung München. Dauert es ewig, ist die Seite zu schwer. Echte Nutzer warten nicht.
- Menü mit Handschuh. Klingt albern, ist aber ehrlich: Wenn Sie das Menü mit einem dicken Winterhandschuh noch treffen, sind die Ziele groß genug.
Machen Sie diesen Durchlauf einmal auf einem iPhone und einmal auf einem Android-Gerät, falls verfügbar. Die beiden rendern manche Dinge unterschiedlich. Und lassen Sie am besten jemanden ran, der die Seite noch nie gesehen hat. Sie selbst wissen ja, wo alles ist. Ein fremder Daumen ist der ehrlichste Tester.
Warum das 2026 mehr zählt als je zuvor
Google indexiert schon seit Jahren primär die mobile Version einer Seite. Das heißt: Was auf dem Handy kaputt ist, zieht Ihr komplettes Ranking runter, auch bei Desktop-Suchen. Nach den Zahlen, die wir bei eigenen Kundenprojekten in Fürstenfeldbruck und Umgebung sehen, kommen je nach Branche 60 bis 80 Prozent der Besucher übers Handy. Bei Gastro und lokalen Dienstleistern eher am oberen Ende. Ich nenne bewusst eine Spanne, weil das stark schwankt und ich keine Studienzahl vorgaukeln will, die für Ihre Seite gilt.
Die Rechnung ist trotzdem simpel. Wenn die Mehrheit Ihrer Interessenten mit dem Daumen ankommt, dann ist die Handy-Ansicht Ihre eigentliche Website. Der Desktop ist die Zweitversion. Nicht umgekehrt.
Was Sie jetzt konkret tun können
Nehmen Sie Ihr Handy und gehen Sie den Test oben durch. Wenn Ihnen dabei mulmig wird, weil Buttons zu klein sind oder der Header alles zupflastert, ist das kein Grund für Panik. Die meisten dieser Sachen lassen sich reparieren, ohne die ganze Seite neu zu bauen.
Wir bei bytebrise in Fürstenfeldbruck schauen uns Ihre Seite gern einmal ehrlich an. Kostenloser Website-Check, rund 30 Minuten, ohne Verkaufsgerede. Wir sagen Ihnen, was am Handy hakt und was sich mit wenig Aufwand lohnt. Melden Sie sich über unser Kontaktformular, dann testen wir Ihre Seite gemeinsam mit einem echten Daumen. So, wie es vor jedem Launch passieren sollte.