Mobile First: Warum deine Seite auf dem Handy gewinnen muss

01Warum das Handy heute die Standardgröße ist, nicht die Ausnahme

Die Frage ist längst nicht mehr, ob deine Seite mobil funktioniert, sondern ob sie mobil zuerst funktioniert.

Wenn du Zugriff auf deine Statistik hast (Analytics, Matomo, Plausible oder was auch immer eingebaut ist), schau dir eine einzige Zahl an: den Anteil mobiler Sitzungen. Als Erfahrungswert aus Projekten mit kleineren Websites, nicht als Studienzahl: Bei lokalen Dienstleistern, Gastronomie, Handwerk und allem, was Menschen unterwegs suchen, liegen die mobilen Zugriffe meist zwischen 60 und 85 Prozent. Bei klassischem B2B, Industriezulieferern oder Software, die im Büro recherchiert wird, ist es oft umgekehrt und liegt eher zwischen 30 und 50 Prozent. Beides sind Spannen, keine Naturgesetze. Aber selbst der ungünstigste Fall bedeutet, dass jeder dritte Besucher deine Seite auf einem Display sieht, das kleiner ist als ein Blatt Papier.

Diese Zahl allein erklärt aber noch nicht, warum mobil so viel entscheidender ist als der reine Anteil vermuten lässt. Der Punkt ist der Zeitpunkt. Der erste Kontakt mit deiner Firma passiert fast immer mobil: jemand googelt an der Ampel, klickt auf einen Link aus WhatsApp, scannt einen QR-Code auf deinem Fahrzeug oder tippt sich abends auf dem Sofa durch drei Anbieter. Die ausführliche Prüfung am Desktop kommt später, manchmal von einer ganz anderen Person aus dem Betrieb. Wenn du im ersten Kontakt rausfliegst, gibt es keinen zweiten.

Dazu kommt die technische Seite. Google bewertet seit Jahren die mobile Version einer Seite als die maßgebliche für den Index. Was auf deinem Handy nicht sichtbar ist, weil es "auf kleinen Bildschirmen ausgeblendet" wurde, existiert für die Bewertung faktisch nicht. Das trifft besonders Seiten, bei denen jemand die Desktop-Version voll gepackt hat und mobil dann ganze Textblöcke per CSS versteckt, damit es aufgeräumter wirkt. Aufgeräumt sieht es aus, aber der Inhalt ist weg.

Der letzte Grund ist banal: Am Handy ist der Konkurrent einen Daumenwisch entfernt. Der Besucher geht zurück zu den Suchergebnissen und ist bei der nächsten Firma, bevor deine Startseite fertig geladen hat.

• Du musst zoomen, um eine Telefonnummer lesen zu können.
• Beim Tippen auf einen Button triffst du gelegentlich den Nachbarlink.
• Es gibt eine horizontale Scrollleiste, obwohl du nur nach unten wischen willst.
• Ein Bild oder eine Tabelle ragt seitlich aus dem Bildschirm heraus.
• Die Seite springt nach dem Laden noch einmal, weil Bilder nachrücken.

Wenn dir beim Lesen dieser Liste mindestens zwei Punkte bekannt vorkommen, wurde deine Seite nicht mobil gedacht, sondern mobil nachgerüstet. Das ist reparabel, aber es ist wichtig zu wissen, worüber wir reden.

02Mobile First ist eine Reihenfolge, kein Design-Stil

Der Unterschied zu "responsive" klingt akademisch und entscheidet trotzdem über das Ergebnis.

Responsive bedeutet: Das Layout passt sich der Bildschirmbreite an. Spalten rutschen untereinander, Schriftgrößen ändern sich, die Navigation wird zum Burger-Menü. Das ist heute technischer Standard und keine Leistung, mit der jemand werben sollte. Mobile First bedeutet etwas anderes: Der kleinste Bildschirm wird zuerst entworfen und gebaut, der große danach. Das Ergebnis unterscheidet sich, obwohl beide Ansätze am Ende "responsive" heißen.

Der Grund liegt im Zwang zur Priorisierung. Auf 375 Pixel Breite passt genau eine Sache gleichzeitig. Wer dort anfängt, muss sich entscheiden: Was ist die eine Botschaft, was ist die eine Handlung, was kommt zuerst. Diese Entscheidung überträgt sich später auf den Desktop und macht auch die große Version klarer. Wer umgekehrt am 27-Zoll-Monitor anfängt, hat Platz für Slider, drei Spalten, ein Video im Hintergrund und vier Buttons nebeneinander. Beim Verkleinern muss all das irgendwo hin. Es landet untereinander, und aus einem ruhigen Desktop-Layout wird eine mobile Bleiwüste mit acht Bildschirmlängen bis zum ersten wichtigen Satz.

Was Mobile First ausdrücklich nicht bedeutet: eine separate Handy-Seite unter einer eigenen Adresse. Das war vor über zehn Jahren üblich und ist heute ein Nachteil, weil du zwei Versionen pflegen musst und Suchmaschinen zwei Adressen zusammenführen sollen. Es bedeutet auch nicht, dass mobile Besucher weniger Inhalt bekommen. Gleicher Inhalt, andere Reihenfolge, andere Darstellung. Wer mobil kürzt, kürzt bei der Mehrheit seiner Besucher.

Praktisch erkennst du eine mobil zuerst gedachte Seite daran, dass der wichtigste Satz und die wichtigste Handlung ohne Scrollen sichtbar sind und dass kein Element nur auf einer der beiden Größen existiert.

03Die typischen Mobil-Fehler und was sie tatsächlich kosten

Fast alle Probleme, die ich bei Bestandsseiten finde, stammen aus dieser Liste.

Die folgenden Fehler tauchen so regelmäßig auf, dass man sie fast als Standardausstattung älterer Websites bezeichnen kann. Interessant ist weniger die Existenz des Fehlers als seine Wirkung: Manche kosten Geduld, manche kosten die Anfrage, und ein paar kosten Sichtbarkeit bei Google obendrauf. Die Aufwandsangaben in der letzten Spalte sind Erfahrungswerte für eine durchschnittliche kleine Unternehmensseite, keine Pauschalpreise.

Die Reihenfolge in dieser Tabelle ist bewusst nicht nach Schwere sortiert, sondern nach Häufigkeit. Der kleinste Aufwand steht oft neben der größten Wirkung: Eine klickbare Telefonnummer kostet einen Handgriff und ist bei einem Betrieb mit Notdienst der Unterschied zwischen Anruf und kein Anruf.

04Bedienbarkeit am Daumen: Buttons, Formulare, Navigation

Ein Finger ist kein Mauszeiger. Das klingt trivial und ist der Grund für die meisten Fehlklicks.

Ein Mauszeiger ist ein Pixel groß, eine Fingerkuppe ist es nicht. Deshalb gibt es für Klickflächen Mindestgrößen. In den Barrierefreiheits-Richtlinien WCAG 2.2 gilt eine Zielfläche von 24 mal 24 CSS-Pixeln als Minimum, die Gestaltungsrichtlinien der Plattformhersteller empfehlen deutlich mehr (Apple etwa 44 Punkte, Google rund 48). In der Praxis fährst du gut, wenn jeder Button und jeder wichtige Link mindestens 44 Pixel hoch ist und ringsum genug Abstand hat, dass der Nachbar nicht mitgetroffen wird. Das gilt besonders für Navigationslisten, Fußzeilen mit vielen Links und Icon-Reihen zu sozialen Netzwerken.

Bei Formularen entscheidet nicht das Design, sondern die Tastatur. Ein Telefonfeld sollte den Ziffernblock öffnen, ein E-Mail-Feld die Tastatur mit dem At-Zeichen, ein Namensfeld die normale Tastatur mit Großschreibung am Wortanfang. Technisch sind das die Attribute type, inputmode und autocomplete. Sie kosten nichts und ersparen dem Besucher pro Feld ein paar Sekunden Fummelei. Dazu kommt die Feldanzahl: Jedes Pflichtfeld mehr senkt die Zahl der abgeschickten Formulare. Vier Felder (Name, Kontaktweg, Anliegen, Einwilligung) reichen für den Erstkontakt fast immer. Was du sonst noch wissen willst, fragst du in der Antwortmail.

Die Navigation ist der dritte Punkt. Das Burger-Menü ist akzeptiert, aber es versteckt alles hinter einer zusätzlichen Handlung. Deshalb gehört das Wichtigste nicht ins Menü, sondern sichtbar auf die Seite: Telefonnummer, Kontaktbutton, bei Gastronomie die Speisekarte, bei Praxen die Terminbuchung. Eine schmale, fest sichtbare Leiste am unteren Bildschirmrand mit einem oder zwei Elementen ist am Handy oft wirksamer als jede Menüstruktur, weil sie genau dort sitzt, wo der Daumen ohnehin liegt.

• Telefonnummern immer als tel-Link, damit ein Tipp den Anruf startet.
• Adressen als Link zur Kartenanwendung, nicht als Bild einer Karte.
• Buttons mit Text beschriften ("Termin anfragen"), nicht nur mit Pfeil oder Icon.
• Wichtige Handlung mindestens zweimal auf der Seite anbieten, oben und am Ende.
• Fließtext ab 16 Pixel Schriftgröße, sonst zoomen iPhones beim Tippen ins Formular.
• Genug Abstand zwischen aufeinanderfolgenden Links in Listen und Fußzeilen.

Ein Detail, das oft vergessen wird: Viele Menschen bedienen ihr Handy einhändig. Alles, was ganz oben in der Ecke sitzt, ist mit dem Daumen schwer erreichbar. Das ist kein Grund, die Navigation umzubauen, aber ein guter Grund, die entscheidende Handlung nicht ausschließlich am oberen Bildschirmrand zu platzieren.

05PDF, Popup, Cookie-Banner: die drei klassischen Sackgassen

Diese drei Dinge sind einzeln erklärbar und zusammen der Grund, warum viele Seiten mobil nicht funktionieren.

Das PDF ist der stille Killer. Eine Speisekarte, eine Preisliste, ein Leistungsverzeichnis oder ein Anmeldeformular als PDF zu hinterlegen ist bequem, weil die Datei ohnehin für den Druck existiert. Am Handy passiert Folgendes: Die Datei lädt (oft mehrere Megabyte), öffnet in einem Viewer, ist im A4-Format gesetzt und muss gezoomt und geschoben werden, um lesbar zu sein. Wer wissen will, ob es ein vegetarisches Hauptgericht gibt, gibt vorher auf. Dazu kommt: Der Inhalt eines PDFs ist für Suchmaschinen nur eingeschränkt verwertbar, und wer nach "Mittagstisch" plus Ort sucht, findet dich damit nicht. Inhalte, die Kunden brauchen, gehören als echte Seite auf die Website. Das PDF darf zusätzlich zum Download danebenstehen.

Popups sind der zweite Fall. Ein Overlay, das nach zwei Sekunden über den Inhalt springt, bevor der Besucher überhaupt weiß, wo er ist, kostet am Desktop Sympathie und am Handy die Sitzung. Der Grund ist mechanisch: Am kleinen Display bedeckt das Popup den kompletten Bildschirm, das Schließkreuz ist oft winzig und sitzt manchmal außerhalb des sichtbaren Bereichs. Google bewertet aufdringliche Einblendungen, die den Hauptinhalt direkt nach dem Aufruf verdecken, ausdrücklich negativ. Wenn du ein Angebot einblenden willst, dann später (nach echter Verweildauer oder beim Verlassen), auf ausreichend Fläche und mit einem Schließkreuz, das man mit dem Daumen trifft.

Der Cookie-Banner ist rechtlich notwendig, sobald du nicht zwingend erforderliche Dienste einsetzt, und wird trotzdem regelmäßig falsch gebaut. Zwei Fehler dominieren: Der Banner nimmt am Handy zwei Drittel des Bildschirms ein, und Ablehnen ist deutlich umständlicher gemacht als Annehmen. Das Zweite ist nicht nur unhöflich, sondern rechtlich angreifbar, weil eine Einwilligung freiwillig sein muss. Der elegante Ausweg ist technischer Natur: Wenn du keine Dienste einbindest, die eine Einwilligung brauchen (also lokale Schriften statt Google Fonts, Karten erst nach Klick, Statistik datensparsam oder gar nicht), brauchst du auch keinen Zustimmungsdialog. Weniger Fremddienste bedeutet weniger Banner, weniger Ladezeit und weniger DSGVO-Fläche in einem Aufwasch.

06Tempo: mobil gelten härtere Regeln als am Schreibtisch

Am Glasfaseranschluss im Büro lädt fast alles schnell. Im Zug lädt fast nichts schnell.

Mobile Ladezeit ist keine Frage des Geschmacks, sondern eine Frage der Umstände. Der Besucher hat schwankenden Empfang, ein Gerät, das mehrere Jahre alt sein kann, und weniger Rechenleistung als dein Laptop. Genau deshalb sind die Werte, die Google unter dem Namen Core Web Vitals misst, mobil fast immer schlechter als am Desktop. Die drei relevanten Kennzahlen sind LCP (wann der größte sichtbare Inhalt geladen ist, gut ist unter 2,5 Sekunden), CLS (wie stark das Layout nach dem Laden noch springt, gut ist unter 0,1) und INP (wie schnell die Seite auf Eingaben reagiert, gut ist unter 200 Millisekunden). Diese Schwellen sind dokumentierte Zielwerte, keine Schätzung.

Die Ursachen für schlechte Werte sind erstaunlich gleichförmig. In der Reihenfolge, in der sie mir bei Bestandsseiten begegnen: zu große Bilder, zu viele externe Skripte, Schriften von fremden Servern, ein Slider auf der Startseite und ein Theme, das dreißig Funktionen mitbringt, von denen du zwei nutzt. Das Gute daran ist, dass die Behebung meist nicht am Design hängt, sondern an der Technik dahinter.

Zum Messen reicht Lighthouse, das in jedem Chrome-Browser eingebaut ist (Entwicklertools öffnen, Reiter Lighthouse, Modus Mobil wählen). Wichtig ist der Modus: Ein Ergebnis von 98 im Desktop-Test sagt fast nichts, weil dort ein schnelles Gerät und eine schnelle Leitung simuliert werden. Der Mobil-Test drosselt beides absichtlich und ist damit näher an der Realität. Ein Wert über 90 im Mobil-Test ist für eine normale Unternehmensseite ein realistisches Ziel, kein Wunschdenken. Wer Angebote einholt, sollte sich diesen Wert schriftlich zusagen lassen, inklusive der Angabe, ob mobil oder Desktop gemeint ist. Wie du Angebote insgesamt sauber vergleichst, steht im Ratgeber zum Angebotsvergleich.

07Der Selbsttest: 30 Minuten, ein Handy, eine ehrliche Runde

Du brauchst dafür keine Werkzeuge, die du kaufen musst, und keine Technikkenntnisse.

Der wichtigste Test ist der, den du selbst machst, und zwar unter realistischen Bedingungen. Also nicht am Schreibtisch mit WLAN und dem Wissen, wo alles steht, sondern mit deinem eigenen Handy, im Mobilfunknetz, im Privatmodus des Browsers (damit keine gespeicherten Daten das Ergebnis schönen) und mit einer klaren Aufgabe: Tu so, als wärst du ein Interessent, der dich nicht kennt, und versuche, in Kontakt zu treten. Wenn du dabei einmal seufzt, hast du einen Befund.

Zwei Ergänzungen, die den Test deutlich aussagekräftiger machen. Erstens: Lass jemanden testen, der die Seite nicht kennt, am besten aus deiner Zielgruppe. Du weißt, wo der Kontaktbutton ist, und findest ihn deshalb immer. Zweitens: Teste nicht nur auf deinem eigenen Gerät. Wenn du ein aktuelles iPhone hast, prüfe die Seite zusätzlich auf einem älteren Android-Gerät. Der Unterschied bei Schriftgrößen, Rechenleistung und Browserverhalten ist größer, als man erwartet.

08Nachrüsten oder neu bauen, und wann Mobile First bei dir egal ist

Nicht jede mobile Schwäche rechtfertigt ein neues Projekt.

Die ehrliche Antwort hängt am Zustand des Unterbaus. Wenn deine Seite grundsätzlich responsiv ist und nur an einzelnen Stellen hakt (zu kleine Buttons, PDF statt Seite, ein zu aggressives Popup, unoptimierte Bilder), ist das Nachrüsten der richtige Weg. In der Praxis liegen solche Korrekturen meist im Bereich weniger Arbeitstage, je nach Umfang und Zustand des vorhandenen Codes. Wenn deine Seite dagegen aus einer Zeit stammt, in der Mobil noch ein Zusatz war, das Layout feste Breiten in Pixeln nutzt und jedes Update etwas anderes kaputt macht, ist Reparieren teurer als neu bauen. Die Faustregel: Wenn du dreimal hintereinander für eine Kleinigkeit einen Entwickler brauchst, der erst eine Stunde sucht, wo etwas steht, ist die Substanz das Problem. Wann sich ein kompletter Neubau rechnet, ist im Ratgeber zum Relaunch ausführlich durchgerechnet.

Für einen Neubau gilt: Mobile First ist keine Zusatzleistung, für die jemand einen Aufpreis verlangen darf. Es ist die Grundeinstellung, mit der heute gebaut wird. Wenn in einem Angebot "responsive Umsetzung" als eigener Posten mit eigenem Preis auftaucht, ist das ein Signal, genauer hinzuschauen. Bei Pixylmedia ist der mobile Entwurf der erste Entwurf, und der Lighthouse-Wert von 95 und mehr wird im Mobil-Modus gemessen, nicht im Desktop-Modus, weil alles andere eine geschönte Zahl wäre.

Und jetzt der Teil, den Anbieter selten schreiben: Es gibt Fälle, in denen dieses ganze Thema für dich nachrangig ist. Wenn deine Website ein reines Hobbyprojekt ist, das dir Freude macht und kein Geld einbringen soll, reicht ein guter Baukasten. Die liefern mobil solide Standardlayouts, und dein Aufwand ist besser in Inhalte investiert als in Technik. Wenn du eine interne Anwendung baust, die ausschließlich am Arbeitsplatzrechner benutzt wird, ist mobile Optimierung verschwendete Zeit. Und wenn du ein spezialisierter Zulieferer bist, dessen Anfragen zu 90 Prozent aus persönlichen Kontakten und Messen kommen, dann ist deine Website kein Vertriebskanal, sondern eine Visitenkarte. Sie soll trotzdem mobil lesbar sein, aber sie muss nicht auf Konversion getrimmt werden.

Ein rechtlicher Hinweis gehört noch dazu, weil er oft mit Mobile First zusammenfällt: Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz. Es betrifft nicht jede Website, sondern bestimmte Dienstleistungen für Verbraucher im elektronischen Geschäftsverkehr, und für Dienstleistungen gibt es eine Ausnahme für Kleinstunternehmen (weniger als 10 Beschäftigte und höchstens 2 Millionen Euro Jahresumsatz). Ob du betroffen bist, klärst du im Zweifel juristisch. Die praktische Nachricht ist aber angenehm: Fast alles, was eine Seite mobil gut bedienbar macht (große Zielflächen, ausreichende Kontraste, lesbare Schriftgrößen, sauber beschriftete Formularfelder, Bedienbarkeit ohne Maus), zahlt direkt auf Barrierefreiheit ein. Du machst die Arbeit also ohnehin nur einmal.

09Fazit: erst messen, dann reparieren, dann erst über Neubau reden

Die meisten mobilen Probleme sind kleiner, als sie sich anfühlen. Man muss sie nur sehen.

Mobile First ist kein Trendbegriff und kein Verkaufsargument, sondern die logische Folge daraus, wo Menschen deine Seite tatsächlich ansehen. Der Anteil mobiler Besucher liegt je nach Branche zwischen einem Drittel und über achtzig Prozent (Erfahrungswert, keine Studienzahl), und der erste Kontakt ist fast immer mobil. Wer das ignoriert, verliert Anfragen, die nie sichtbar werden, weil sie nicht als Absprung, sondern als Nichtereignis auftauchen.

Die Reihenfolge für dich ist einfach. Erstens: den Selbsttest aus diesem Artikel machen, mit deinem Handy, im Mobilfunknetz, dreißig Minuten, und die Befunde aufschreiben statt sie zu merken. Zweitens: die Sofortmaßnahmen umsetzen, die fast nichts kosten (klickbare Telefonnummer, Buttons vergrößern, Popup abschalten oder verzögern, Bilder komprimieren, PDF-Inhalte als echte Seite anlegen). Drittens: Lighthouse im Mobil-Modus laufen lassen und die Zahl notieren, damit du nach den Änderungen einen Vergleich hast. Erst wenn nach diesen drei Schritten immer noch grundlegende Dinge kaputt sind, lohnt das Gespräch über einen Neubau.

Und wenn du Angebote einholst, stell genau drei Fragen: Wird mobil zuerst entworfen oder zuletzt angepasst. Welcher Lighthouse-Wert wird zugesagt und in welchem Modus gemessen. Wird die fertige Seite vor Übergabe auf echten Geräten getestet, und auf welchen. Wer darauf klar und ohne Ausweichen antwortet, hat das Thema verstanden. Wer "selbstverständlich alles responsive" sagt und nicht weiter ausführt, hat es vermutlich nicht.

Das Ziel ist unspektakulär: Ein Mensch mit einem Handy soll in wenigen Sekunden verstehen, was du machst, und mit einem Daumentipp Kontakt aufnehmen können. Alles andere ist Verzierung.