Mobile-First Webdesign: typische Fehler am Handy finden

Mobile-First Webdesign heißt, dass das Handy der Ausgangspunkt der Gestaltung ist und nicht die Kontrolle am Schluss. Die typischen Fehler entstehen, wenn eine Seite am großen Monitor entworfen und danach auf Handybreite zusammengeschoben wird.

Dann sind Buttons zu klein, Menüs reagieren nur auf die Maus, der Header füllt den halben Bildschirm, und ein Slider versteckt die wichtigste Botschaft. Alle diese Fehler finden Sie mit einem einfachen Test am eigenen Handy.

Mobile-First wird überall empfohlen und trotzdem oft falsch verstanden. Es bedeutet nicht, dass man am Ende auch mal auf dem Smartphone reinschaut. Es bedeutet, dass die schmale Ansicht zuerst steht und alles andere danach kommt.

Warum entwerfen so viele weiter am großen Bildschirm?

Weil es bequemer ist. Ein großer Monitor gibt Platz für breite Menüleisten, große Bilder und Effekte, die beim Überfahren mit der Maus erscheinen. Beim Entwerfen fühlt sich das großzügig an.

Danach wird das Ganze für das Handy "heruntergebrochen", und genau da liegt der Denkfehler. Ein Desktop-Layout, das man auf 375 Pixel Breite quetscht, ist kein Mobile-Layout, sondern ein zusammengedrücktes Desktop-Layout. Der Unterschied klingt akademisch, erklärt aber, warum sich so viele Handy-Seiten falsch anfühlen.

Wer dagegen mit der schmalen Ansicht anfängt, muss von Anfang an entscheiden: Was ist wirklich wichtig, was kommt zuerst? Ein kleiner Bildschirm verzeiht keine Deko. Ich finde, diese Enge hilft, weil sie die Seite zwingt, sich festzulegen.

Welche Fehler sollten Sie beim Mobile-First Webdesign kennen?

Die folgenden vier Fehler lassen sich ohne Fachwissen erkennen. Wie oft sie bei Ihnen vorkommen, zeigt nur der Test weiter unten.

1. Buttons zum Zielen statt zum Tippen

Ein Finger ist kein Mauszeiger. Google empfiehlt auf web.dev für Touch-Ziele eine Mindestgröße von etwa 48 geräteunabhängigen Pixeln und rund 8 Pixel Abstand zum nächsten Ziel (web.dev). Die Barrierefreiheitsrichtlinie WCAG 2.2 setzt auf Stufe AA eine Untergrenze von 24 mal 24 CSS-Pixeln, mit Ausnahmen etwa für Links im Fließtext (W3C). Ist der "Jetzt anrufen"-Button deutlich kleiner und klebt direkt neben einem zweiten Link, trifft der Daumen leicht daneben. Gerade die Telefonnummer sollte groß genug und frei stehen.

2. Hover-Menüs ohne Touch-Alternative

Am Desktop klappt ein Untermenü auf, wenn die Maus darüberfährt. Auf dem Handy gibt es kein Darüberfahren, nur Tippen. Funktioniert das Hauptmenü nur per Hover, erreicht ein Handy-Nutzer die Unterseiten nicht. Solche Fehler bleiben lange unentdeckt, wenn intern alle am Desktop arbeiten und niemand die eigene Seite am Telefon bedient.

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 kann so ein Kopfbereich einen großen Teil der sichtbaren Fläche belegen, bevor der Besucher überhaupt Inhalt sieht, und beim Scrollen bleibt er kleben. Prüfen Sie, wie viel Platz nach dem Laden für den eigentlichen Inhalt übrig bleibt, und verkleinern Sie den Kopf beim Scrollen oder lassen Sie ihn mitlaufen.

4. Wichtiges landet außerhalb der Daumenzone

Wer das Handy in einer Hand hält und mit dem Daumen bedient, erreicht den unteren Bereich des Bildschirms leichter als den oberen Rand. Sitzt der einzige Handlungsaufruf ganz oben rechts, muss man umgreifen. Ein fester Anruf- oder Anfrage-Button im unteren Bereich ist auf dem Handy oft die bequemere Lösung.

Gehört ein Slider auf die mobile Startseite?

Meist nicht. Ein automatisch wechselnder Bilder-Slider ganz oben schiebt die Botschaften auf Folie zwei und drei, und die sieht nur, wer wartet. Auf dem Handy ist der Platz oben ohnehin knapp.

Eine oft zitierte Auswertung stammt von einem Webentwickler der University of Notre Dame aus dem Jahr 2013: Auf der Startseite der Universität klickte etwa ein Prozent der Besucher auf ein Element des Sliders, und 84 Prozent dieser Klicks gingen auf die erste Position (Erik Runyon). Das sind alte Zahlen einer Uni-Website, keine Regel für Ihren Betrieb. Die Nielsen Norman Group beschreibt im selben Jahr aus einem Nutzertest, dass automatisch weiterschaltende Karussells Nutzer stören und die Sichtbarkeit von Inhalten verringern (Nielsen Norman Group).

Dazu kommt die Technik. Ein Slider lädt oft mehrere große Bilder und ein zusätzliches Skript, genau in dem Bereich, der zuerst sichtbar sein soll. Was stattdessen oben hingehört:

• ein festes, aussagekräftiges Bild statt wechselnder Folien,
• eine Überschrift, die den Nutzen nennt und nicht nur den Firmennamen,
• ein deutlich sichtbarer Button mit klarem Ziel: anrufen, anfragen oder Termin vereinbaren.

Haben Sie mehrere Botschaften, staffeln Sie sie untereinander statt übereinander in Folien. Bewegung ist nicht verboten. Sie ergibt Sinn, wenn der Besucher sie selbst steuert, etwa durch Wischen durch eine Bildergalerie weiter unten, oder wenn sie eine feste Aussage untermalt, statt sie zu ersetzen. Ob Ihr Slider genutzt wird, zeigt Ihr Analysewerkzeug: Landen Klicks fast nur auf der ersten Folie, trägt der Rest wenig bei.

Wie viele Schriften und Farben verträgt ein kleiner Bildschirm?

Weniger, als man am Desktop denkt. Auf dem Handy liegen Überschrift, Fließtext und Buttons dicht übereinander, und jede zusätzliche Schrift oder Farbe macht das Bild unruhiger. Unsere Faustregel, keine Studie: zwei Schriften und drei Farben reichen für die meisten Firmenseiten.

Eine Schrift für Überschriften, eine für den Fließtext, oder eine einzige Schrift in zwei Schnitten. Dazu eine Hauptfarbe für die Marke, eine ruhige Textfarbe und eine Akzentfarbe für Buttons und Links. Die Akzentfarbe lenkt den Blick dorthin, wo er hin soll. Hat jeder Button eine andere Farbe, sticht keiner mehr heraus. Achten Sie außerdem auf genug Kontrast zwischen Schrift und Hintergrund, draußen im Sonnenlicht fällt jeder Mangel sofort auf.

Durcheinander entsteht selten mit Absicht. Es wächst, wenn über Jahre verschiedene Leute Unterseiten und Aktionen ergänzen, jedes Mal mit dem, was gerade zur Hand war. Hilfreich ist ein festgehaltenes Mini-Regelwerk: zwei Schriften, drei Farbcodes und eine Notiz, wann welcher Button benutzt wird.

Ein Mobile-First-Test, den auch Nicht-Techniker schaffen

Sie müssen kein Entwickler sein, um die gröbsten Fehler selbst zu finden. Nehmen Sie Ihr eigenes Handy und gehen Sie so vor:

• Einhändig testen: Halten Sie das Handy in einer Hand, wie im Alltag. Kommen Sie mit dem Daumen an die Telefonnummer, das Kontaktformular und das Menü?
• Nicht zoomen: Verbieten Sie sich das Aufziehen mit zwei Fingern. Müssen Sie irgendwo zoomen, um etwas zu lesen, ist die Schrift zu klein oder das Layout zu breit.
• Fünf Sekunden: Öffnen Sie die Startseite und zählen Sie bis fünf. Wissen Sie danach, was die Firma macht und wie man Kontakt aufnimmt?
• Schlechter Empfang: Schalten Sie das WLAN aus und laden Sie die Seite über Mobilfunk, am besten unterwegs in der S-Bahn Richtung München. Dauert es lange, ist die Seite zu schwer.
• Durchklicken: Öffnen Sie Startseite, eine Leistungsseite und die Kontaktseite nacheinander. Sehen die drei aus wie dieselbe Website, mit denselben Schriften und Buttons?

Machen Sie den Durchlauf auf einem iPhone und auf einem Android-Gerät, falls verfügbar, denn beide stellen manches unterschiedlich dar. Und lassen Sie jemanden ran, der die Seite noch nie gesehen hat. Sie selbst wissen ja, wo alles ist.

Ein angenommenes Beispiel zeigt, wie schnell so ein Test etwas findet: Ein Restaurant stellt seine Speisekarte zweispaltig online. Am Monitor wirkt sie aufgeräumt, auf dem Handy werden die Spalten auf 375 Pixel gepresst, und für den Preis der Schweinshaxe muss man mehrmals zoomen. Die Lösung wäre eine einspaltige Karte mit größerer Schrift und Kategorien zum Aufklappen.

Warum zählt die Handy-Ansicht auch für Google?

Weil Google für die Indexierung und das Ranking die mobile Version einer Website verwendet, die mit dem Smartphone-Crawler abgerufen wurde. Google nennt das Mobile-First-Indexierung (Google Search Central). Inhalte, die auf dem Handy fehlen, sieht die Suche also womöglich gar nicht.

Wie viele Ihrer Besucher mit dem Handy kommen, sehen Sie in Ihrer eigenen Statistik, getrennt nach Gerätetyp. Ist es die Mehrheit, ist die Handy-Ansicht Ihre eigentliche Website und der Desktop die Zweitversion.

Wie können Sie die Website automatisch testen lassen?

Sie lassen die Website automatisch testen, indem nach jeder Änderung ein Skript die wichtigsten Seiten in Handybreite öffnet, misst und Ihnen meldet, wenn etwas schlechter geworden ist. Der Handtest oben bleibt sinnvoll, die Automatik sorgt nur dafür, dass kein neues Foto, kein neues Plugin und kein neuer Textblock die Handy-Ansicht unbemerkt verschlechtert.

So gehen Sie vor:

1. Legen Sie fest, welche Seiten geprüft werden: Startseite, die wichtigste Leistungsseite, Kontakt.
2. Lassen Sie diese Seiten nach jeder Änderung oder einmal pro Woche mit Lighthouse in der Handy-Ansicht messen. Für den Dauerbetrieb gibt es Lighthouse CI, eine Werkzeugsammlung von Google, die Messungen regelmäßig ausführt, speichert und gegen festgelegte Grenzwerte prüft (GitHub). Was Lighthouse misst, erklärt unser Glossar zu Lighthouse.
3. Ergänzen Sie Bildschirmfotos in Handybreite. Ein Skript kann jede Seite in einem Browser ohne Fenster öffnen, ein Bild speichern und es mit der letzten Version vergleichen. Verschiebt sich etwas deutlich, bekommen Sie beide Bilder nebeneinander.
4. Entscheiden Sie selbst. Die Automatik meldet, der Mensch beurteilt. Nicht jede Abweichung ist ein Fehler.

Angenommen, bei der Schreinerei Muster kommt ein neues Referenzfoto auf die Startseite. Der wöchentliche Test zeigt danach, dass der Button zum Anfrageformular auf dem Handy unter das Bild gerutscht ist, und schickt das Bildschirmfoto mit. Behoben ist das in wenigen Minuten, aber nur, wenn es jemand bemerkt.

Häufige Fragen

Muss ich meine Website für Mobile-First komplett neu bauen?

Nicht unbedingt. Zu kleine Buttons, ein zu hoher Header oder ein Slider lassen sich meist einzeln beheben. Ein Neubau lohnt sich eher, wenn das Grundgerüst der Seite am Handy nicht funktioniert.

Reicht es, wenn die Seite responsiv ist?

Responsiv heißt nur, dass sich das Layout an die Bildschirmbreite anpasst. Ob die Seite auf dem Handy gut bedienbar ist, zeigt erst der Test mit dem Daumen.

Wir bei bytebrise bauen und vermieten Websites für kleine Betriebe und richten Abläufe ein, die wiederkehrende Büroarbeit abnehmen. Die Automatisierung ist neu bei uns und läuft noch bei keinem Betrieb dauerhaft. Jeder Ablauf beginnt als Prototyp zum Festpreis ab 1.500 € mit vier Wochen Test in Ihrem Betrieb, danach folgt eine Monatspauschale, monatlich kündbar. Die Übersicht steht auf der Startseite unter Abläufe. Die gemietete Website kostet 490 € einmalig zum Start und danach 149 € im Monat, Pflege und Updates inklusive, kündbar zum Ende jedes Kalendermonats ohne Vorlauffrist (Preise).

Alle verlinkten Quellen haben wir am 25.09.2026 abgerufen.