Worauf kommt es bei einer Website auf dem Smartphone an?
Auf dem Smartphone zählen lesbare Schrift ab 16 Pixeln, große Tippflächen, ein einfaches Menü und ein Kontaktweg, der immer mit einem Daumen erreichbar ist. Bilder müssen klein sein, damit die Seite im Mobilfunknetz schnell lädt. Formulare brauchen wenige Felder und passende Tastaturen. Teste alles auf echten Geräten, nicht nur am Laptop.
Hilft auf Stufe 1: Noch nicht sichtbar1 Warum das Smartphone zuerst kommt
Bei vielen Websites von Selbstständigen und kleinen Betrieben kommt der größere Teil der Besucher vom Handy. Wer abends auf dem Sofa nach einer Paartherapie sucht oder in der Mittagspause nach einem Elektriker, nimmt das Telefon, nicht den Laptop. Wie hoch der Anteil bei dir ist, zeigt dein Analytics unter dem Gerätetyp.
Auch Google schaut zuerst auf die Mobilfassung. Die Umstellung auf die Mobile-First-Indexierung ist abgeschlossen: Google bewertet und indexiert deine Seite so, wie sie auf dem Smartphone erscheint. Was mobil fehlt oder versteckt ist, zählt kaum.
Mobil optimiert heißt nicht, dass die Seite auf dem Handy irgendwie funktioniert. Es heißt, dass man dort mit einer Hand lesen, verstehen und anfragen kann. Das betrifft jede Website, besonders aber Angebote, bei denen Kunden spontan anrufen oder schreiben.
2 Die sieben Punkte, auf die es ankommt
Lesbare Schrift
Fließtext braucht auf dem Handy mindestens 16 Pixel Schriftgröße und eine Zeilenhöhe von etwa dem 1,5-Fachen. Kontrast ist Pflicht: dunkle Schrift auf hellem Grund, kein Hellgrau auf Weiß. Lange Absätze werden auf dem kleinen Bildschirm zur Wand. Halte sie bei zwei bis vier Sätzen.
Große Tippflächen
Finger sind ungenauer als ein Mauszeiger. Buttons und Links brauchen genug Fläche und Abstand zueinander. Die Richtlinien für barrierefreie Websites (WCAG 2.2) nennen 24 mal 24 Pixel als Mindestmaß. Angenehm bedienbar sind eher 44 bis 48 Pixel. Das hilft allen, nicht nur Menschen mit Einschränkungen. Mehr dazu unter Barrierefreiheit und BFSG.
Ein einfaches Menü
Mobil verschwindet das Menü meist hinter einem Symbol mit drei Strichen. Halte es kurz: fünf bis sieben Punkte, keine verschachtelten Untermenüs über drei Ebenen. Der wichtigste Kontaktweg gehört nicht nur ins Menü, sondern sichtbar auf die Seite.
Kontakt mit einem Daumen
Die Telefonnummer muss antippbar sein und direkt den Anruf starten (technisch ein tel:-Link). Gleiches gilt für WhatsApp und E-Mail. Bewährt hat sich ein Anfrage-Button, der beim Scrollen am unteren Rand sichtbar bleibt, dort, wo der Daumen ohnehin liegt. Wie du diese Klicks messen kannst, steht unter Anrufe und WhatsApp messen.
Formulare, die sich mobil ausfüllen lassen
Jedes Feld ist auf dem Handy Arbeit. Frag nur, was du für die erste Antwort wirklich brauchst: Name, Kontaktweg, Anliegen. Die Felder sollten die passende Tastatur öffnen, also Zahlen für die Telefonnummer und das @-Zeichen für die E-Mail. Die Felder brauchen ebenfalls 16 Pixel Schrift, sonst zoomt das iPhone beim Antippen automatisch hinein. Mehr Tipps gibt Kontaktformular gestalten.
Kleine Bilder, schnelle Ladezeit
Im Mobilfunknetz zählt jedes Kilobyte. Liefere dem Handy kleinere Bildversionen als dem großen Bildschirm, in modernen Formaten wie WebP oder AVIF. Die Einzelheiten stehen unter Website schneller machen.
Bilder im passenden Ausschnitt
Ein breites Panoramafoto, das am großen Bildschirm wirkt, schrumpft auf dem Handy zu einem schmalen Streifen. Personen sind dann kaum noch zu erkennen. Wähle für die Mobilfassung einen engeren, eher hochformatigen Ausschnitt, in dem das Wichtige mittig liegt. Text, der im Bild steht, ist auf dem Handy oft unlesbar. Er gehört als echter Text auf die Seite.
Keine störenden Einblendungen
Pop-ups, die den ganzen Bildschirm verdecken, sind mobil besonders lästig. Google wertet aufdringliche Einblendungen, die den Inhalt direkt nach dem Aufruf verdecken, als schlechtes Nutzererlebnis. Ein schlankes Cookie-Banner ist rechtlich nötig und erlaubt, ein Newsletter-Overlay beim ersten Aufruf ist es nicht wert.
Beispiel: Eine Kanzlei in Hamburg hat auf dem Handy oben ein großes Kanzleifoto, darunter vier Absätze Text. Die Telefonnummer steht nur im Footer, als nicht antippbarer Text. Nach der Überarbeitung steht oben eine klare Zeile, was die Kanzlei für wen macht, darunter zwei Buttons: „Anrufen“ und „Termin anfragen“. Wer die Kanzlei erreichen will, braucht jetzt einen Tipp statt fünf Wischbewegungen.
3 Deine Website Schritt für Schritt prüfen
- Auf deinem eigenen Handy öffnen, im Mobilfunknetz, nicht im WLAN. Wie lange dauert es, bis du verstehst, was angeboten wird?
- Den ersten Bildschirm ansehen: Steht dort, was du machst, für wen, und wie man dich erreicht? Der Artikel Above the Fold zeigt, was hineingehört.
- Mit dem Daumen bedienen: Menü öffnen, eine Unterseite aufrufen, zurück. Triffst du jeden Link beim ersten Versuch?
- Kontakt testen: Telefonnummer antippen, WhatsApp öffnen, Formular absenden. Kommt die Anfrage an?
- Querformat probieren: Dreh das Handy. Bricht etwas oder wird abgeschnitten?
- Zweites Gerät nehmen: ein iPhone und ein Android-Gerät, gern auch ein älteres Modell aus der Familie.
- Im Browser gegenprüfen: In Chrome öffnest du mit F12 die Entwicklertools und mit Strg + Umschalt + M die Geräteansicht. Dort siehst du verschiedene Bildschirmgrößen, ersetzt aber nicht den Test am echten Gerät.
- PageSpeed Insights mobil: Ladezeit und Verrutschen beim Laden prüfen.
4 Kosten und Zeitaufwand
| Maßnahme | Aufwand | Wovon es abhängt |
|---|---|---|
| Prüfung nach der Liste oben | 30 bis 60 Minuten | Zahl der Seiten |
| Telefon und WhatsApp antippbar machen | 15 bis 30 Minuten | System |
| Formular verschlanken | 1 bis 2 Stunden | Formularwerkzeug |
| Schriftgrößen und Abstände anpassen | 2 Stunden bis 2 Tage | Theme oder Code |
| fester Anfrage-Button unten | 1 bis 3 Stunden | System, Gestaltung |
| Seite, die mobil grundsätzlich nicht funktioniert | Neubau | Alter und Technik der Seite |
Bei modernen Baukästen und aktuellen Themes sind die Grundlagen meist gelöst, dort geht es um Inhalte und Kontaktwege. Ältere Seiten, die für den Desktop gebaut und später angepasst wurden, brauchen oft mehr Arbeit, als eine neue Struktur kosten würde. Die Marktspannen für einen Neubau erklärt Was kostet eine Website.
5 Häufige Fehler und wie du sie vermeidest
- Nur am großen Bildschirm entworfen: Die Seite wird erst am Ende „mobil gemacht“. Besser umgekehrt: zuerst für das Handy denken, dann erweitern.
- Inhalte mobil ausgeblendet: Was du auf dem Handy versteckst, wertet Google kaum. Kürze lieber, statt zu verstecken.
- Telefonnummer als Bild oder reiner Text: Nicht antippbar, nicht kopierbar. Immer als Link.
- Tabellen und breite Grafiken: Sie sprengen den Bildschirm. Tabellen mobil scrollbar machen oder als Liste darstellen.
- Zu viel im ersten Bildschirm: Slider, Logo, Siegel und drei Buttons gleichzeitig. Eine Botschaft, ein Hauptbutton.
- Kleine Schrift für „Eleganz“: 13 Pixel sehen am Bildschirm im Büro schick aus, auf dem Handy liest das niemand.
6 Woran du erkennst, dass es funktioniert
- Du verstehst auf dem Handy in fünf Sekunden, was angeboten wird und wie du anfragst.
- Jede Telefonnummer, E-Mail-Adresse und WhatsApp-Verknüpfung startet beim Antippen die passende App.
- Kein Text ist kleiner als 16 Pixel, nichts muss gezoomt werden.
- Nichts ragt seitlich über den Bildschirm, es gibt kein waagerechtes Scrollen.
- Das Formular lässt sich mit einer Hand in unter einer Minute absenden.
- PageSpeed Insights zeigt mobil grüne Core Web Vitals.
Den besten Beleg liefern deine Zahlen. Vergleiche in Analytics die Anfragen nach Gerätetyp. Liegt die Anfragequote auf dem Handy deutlich unter der am Desktop, obwohl mehr Menschen mobil kommen, steckt dort Potenzial. Wie du solche Werte liest, steht unter Website-Kennzahlen.
Häufige Folgefragen
Brauche ich eine eigene App statt einer mobilen Website?
Für fast alle Dienstleister nicht. Eine gute mobile Website erfüllt denselben Zweck, ist bei Google auffindbar und muss nicht installiert werden.
Gibt es noch den mobilen Test von Google?
Den früheren Test auf Optimierung für Mobilgeräte und den passenden Bericht in der Search Console hat Google Ende 2023 eingestellt. Heute prüfst du mit PageSpeed Insights, Lighthouse in Chrome und vor allem auf echten Geräten.
Sollte ich auf dem Handy weniger Inhalt zeigen als am Desktop?
Nein, gleich viel Inhalt, aber anders angeordnet. Nutze Aufklappelemente für lange Details wie FAQ, statt Inhalte zu streichen.
Wie finde ich heraus, wie viele meiner Besucher mobil kommen?
In Google Analytics zeigt dir der Technologie-Bericht die Aufteilung nach Gerätekategorie, also Smartphone, Desktop und Tablet. Schau dir dort auch an, wie viele Anfragen je Gerät entstehen. Ohne Analytics hilft die Search Console: Im Leistungsbericht kannst du unter „Geräte“ Klicks nach Mobil und Desktop trennen.
Wie wichtig ist das Querformat?
Wenig, aber die Seite darf nicht brechen. Die meisten Menschen halten das Handy beim Surfen hochkant.
Muss der Anfrage-Button wirklich immer sichtbar sein?
Er muss nicht, er hilft aber. Eine schmale Leiste am unteren Rand mit „Anrufen“ oder „Anfragen“ ist auf dem Handy der kürzeste Weg zur Anfrage, ohne zu stören.
Wie quik dabei hilft
Alle quik-Pakete werden Mobile First gebaut, also zuerst für das Handy und dann für größere Bildschirme. Der Anfrage-Button bleibt mobil in Reichweite, und die Anfrage landet direkt bei dir. Die quik Webseite Pro enthält zusätzlich eine Performance- und Mobile-Optimierung. Mehr steht bei Webseiten.