Website-Grundlagen

Worauf kommt es bei einer Website auf dem Smartphone an?

  • Aktualisiert am
  • 7 Minuten Lesezeit
Kurzantwort

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 sichtbar

1 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

  1. Auf deinem eigenen Handy öffnen, im Mobilfunknetz, nicht im WLAN. Wie lange dauert es, bis du verstehst, was angeboten wird?
  2. 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.
  3. Mit dem Daumen bedienen: Menü öffnen, eine Unterseite aufrufen, zurück. Triffst du jeden Link beim ersten Versuch?
  4. Kontakt testen: Telefonnummer antippen, WhatsApp öffnen, Formular absenden. Kommt die Anfrage an?
  5. Querformat probieren: Dreh das Handy. Bricht etwas oder wird abgeschnitten?
  6. Zweites Gerät nehmen: ein iPhone und ein Android-Gerät, gern auch ein älteres Modell aus der Familie.
  7. 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.
  8. PageSpeed Insights mobil: Ladezeit und Verrutschen beim Laden prüfen.

4 Kosten und Zeitaufwand

MaßnahmeAufwandWovon es abhängt
Prüfung nach der Liste oben30 bis 60 MinutenZahl der Seiten
Telefon und WhatsApp antippbar machen15 bis 30 MinutenSystem
Formular verschlanken1 bis 2 StundenFormularwerkzeug
Schriftgrößen und Abstände anpassen2 Stunden bis 2 TageTheme oder Code
fester Anfrage-Button unten1 bis 3 StundenSystem, Gestaltung
Seite, die mobil grundsätzlich nicht funktioniertNeubauAlter 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.

Hilft auf Stufe 1 von 4

Dein Auftritt schafft Vertrauen und bringt erste Anfragen

Deine Website, in 48 Stunden live. Mit SEO und Tracking ab Tag 1, danach gehört dir alles.

Heute

Keine oder eine veraltete Website. Neue Kunden kommen nur über Empfehlungen

Danach

Ein Auftritt, der Vertrauen schafft und aus Besuchern Anfragen macht

Erstgespräch vereinbaren

30 Minutenkostenlosunverbindlich

Nächster Schritt

Lass es uns für dich einrichten

Im kostenlosen Erstgespräch klären wir in 30 Minuten, was deine Website braucht. Danach bekommst du Bauplan und Festpreis.

Nach 30 Minuten hast du
  1. Deine StufeWo du gerade stehst und was dich bremst
  2. Dein größter HebelDer eine Schritt, der jetzt am meisten bringt
  3. Dein BauplanUmfang, Preis und Termin danach schriftlich
  • 30 Minuten, per Video
  • Kostenfrei und unverbindlich
  • Direkt mit dem Gründer