Zum Inhalt springen
MARCODES
Abstrakte Formen aus Mattglas: eine schmale hochkant stehende Glasscheibe, über deren Stufen eine kleine orange Kugel im Zickzack nach unten rollt

Website auf dem Smartphone prüfen: Eine Anleitung für Inhaber

Ihre Website auf dem Smartphone testen Sie mit zwei echten Geräten, einem iPhone und einem Android-Telefon: lesen, tippen, anrufen, Formular abschicken, Anfahrt öffnen, über Mobilfunk laden. Wie schnell die Seite bei echten Besuchern lädt, zeigt danach PageSpeed Insights.

7 min Lesezeit Branchen und Praxis

Am Schreibtisch, auf einem großen Bildschirm und mit der Maus wirkt eine Website anders als auf dem Telefon, im Stehen, mit einer Hand. Auch Google bewertet die mobile Fassung: Die Suchmaschine nutzt nach eigener Dokumentation die mobile Version einer Website, abgerufen mit dem Smartphone-Crawler, für Indexierung und Ranking. Was auf dem Telefon fehlt oder nicht funktioniert, fehlt also auch in der Suche.

Die folgenden zehn Schritte brauchen kein Technikwissen. Planen Sie eine Stunde ein, wenn Sie Startseite, eine Leistungsseite und die Kontaktseite prüfen. Wie Sie die Website gezielt auf Barrierefreiheit testen, mit Tastatur, Kontrasten und Screenreader, steht unter Website auf Barrierefreiheit testen; was hinter den Messwerten LCP, INP und CLS steckt, erklärt Core Web Vitals verstehen.

Echte Geräte statt Browser-Vorschau

1. Zwei Telefone bereitlegen

Nehmen Sie ein iPhone mit Safari und ein Android-Telefon mit Chrome, gern ein älteres oder kleineres Modell aus der Familie oder dem Team. Die Vorschau im Browser am Rechner reicht dafür nicht: Google nennt den Gerätemodus der Chrome-Entwicklertools selbst eine Annäherung erster Ordnung und rät, die Seite im Zweifel auf einem echten Gerät laufen zu lassen. Der Rechner hat einen anderen Prozessor, eine Maus statt eines Daumens und hängt am WLAN oder am Kabel.

Legen Sie sich eine kleine Tabelle mit drei Spalten an: Seite, was passiert ist, auf welchem Gerät. Ein Bildschirmfoto je Befund hilft später dem, der die Fehler behebt.

Lesbarkeit, Abstände und Tippflächen

2. Ohne Zoom lesen

Öffnen Sie die Startseite und lesen Sie den ersten Absatz, ohne zu vergrößern. Achten Sie darauf, ob Text seitlich abgeschnitten ist, ob Sie waagerecht wischen müssen und ob eine Einblendung den Inhalt verdeckt. Google rät, keine Einblendungen über die ganze Seite zu legen, und empfiehlt stattdessen Banner, die nur einen kleinen Teil des Bildschirms einnehmen. Ein Cookie-Hinweis, der das ganze Telefon füllt, ist ein Befund für Ihre Liste.

3. Mit zwei Fingern vergrößern

Ziehen Sie mit zwei Fingern auseinander, und machen Sie diesen Schritt auf einem Android-Gerät: Safari auf dem iPhone ignoriert die Sperre seit iOS 10 und lässt das Zoomen immer zu, ein iPhone zeigt den Fehler also nicht. Lässt sich die Seite auf Android nicht vergrößern, sollten Ihre Entwickler die Meta-Angabe viewport im Code auf user-scalable=no prüfen. Die Entwicklerdokumentation von Mozilla warnt ausdrücklich davor, weil Menschen mit eingeschränktem Sehvermögen dann Inhalte nicht mehr lesen können.

4. Jede Schaltfläche mit dem Daumen treffen

Halten Sie das Telefon in einer Hand und tippen Sie mit dem Daumen derselben Hand auf Menüpunkte, Knöpfe und Links in Listen. Trifft der Daumen den Nachbarn, ist die Tippfläche zu klein oder der Abstand zu eng. Für die Größe nennen W3C, Apple und Google unterschiedliche Werte:

  • WCAG 2.2, Erfolgskriterium 2.5.8 (Stufe AA): Eine Tippfläche ist mindestens 24 mal 24 CSS-Pixel groß. Kleinere Flächen bestehen nur, wenn ein Kreis mit 24 Pixel Durchmesser um ihre Mitte keine andere Tippfläche berührt; Links mitten im Fließtext sind ausgenommen.

  • Apple nennt in den Human Interface Guidelines für iOS 44 mal 44 Punkt als Standardgröße eines Bedienelements und 28 mal 28 Punkt als Untergrenze.

  • Google empfiehlt in der Android-Hilfe Tippflächen von mindestens 48 mal 48 dp mit 8 dp Abstand zueinander.

Die 24 Pixel der WCAG sind die Untergrenze, unter der eine Fläche als Mangel gilt; die Werte von Apple und Google beschreiben, was sich bequem treffen lässt. Prüfen Sie zuerst die Stellen, an denen mehrere Links eng untereinander stehen: Fußzeile, Sprachwahl, Social-Media-Symbole.

5. Menü öffnen und schließen

Öffnen Sie das mobile Menü, gehen Sie auf eine Unterseite und wieder zurück. Das Menü muss sich ohne Suchen schließen lassen, und die Zurück-Geste des Telefons soll auf die vorige Seite führen, nicht aus der Website heraus.

Ein Navi am Saugnapf auf dem Armaturenbrett: ein Tipp auf die Adresse genügt, und die orange Route zur Anfahrt steht, ohne dass jemand Straße und Hausnummer abtippen muss.

Kontakt und Anfahrt mit einem Daumen

6. Telefonnummer antippen

Tippen Sie auf Ihre Telefonnummer im Kopf, in der Kontaktseite und im Impressum. Es muss sich die Telefon-App mit der richtigen Nummer öffnen. Dafür braucht die Nummer im Code einen Link mit tel:, am besten in internationaler Schreibweise wie tel:+4989123456; Mozilla verweist für die genaue Schreibweise auf den Standard RFC 3966. Steht die Nummer nur als Bild oder als reiner Text, muss der Besucher sie abtippen.

7. Formular auf dem Telefon ausfüllen

Füllen Sie Ihr Kontaktformular einmal komplett auf dem Telefon aus und schicken Sie es ab. Beim Feld für die E-Mail-Adresse sollte eine Tastatur mit @ erscheinen, beim Telefonfeld der Ziffernblock; das steuert der Feldtyp email beziehungsweise tel im Code. Prüfen Sie, ob die Fehlermeldung sichtbar bleibt, wenn die Tastatur offen ist, und ob die Bestätigung nach dem Absenden erscheint. Kommt die Anfrage danach auch im Postfach an, ist der Schritt bestanden.

8. Anfahrt öffnen

Tippen Sie auf die Adresse oder den Link zur Anfahrt. Ein Link nach dem Muster https://www.google.com/maps/dir/?api=1&destination= mit Ihrer Adresse öffnet laut Google auf Android und iOS die Karten-App, falls sie installiert ist, sonst Google Maps im Browser, und startet die Route; einen API-Schlüssel braucht er nicht. Eine eingebettete Karte, die sich auf dem Telefon nur mühsam verschieben lässt, ersetzt diesen Link nicht. Wie Adresse und Öffnungszeiten auf Website und Unternehmensprofil gleich bleiben, steht unter Lokale SEO für München und Umland.

Ladezeit unterwegs

9. Über Mobilfunk laden

Schalten Sie das WLAN aus und öffnen Sie die Seite über das Mobilfunknetz, idealerweise an einem Ort mit mäßigem Empfang. Notieren Sie, nach wie vielen Sekunden Sie den ersten Absatz lesen können und ob Bilder oder Schriften danach noch Inhalte verschieben. Das ist keine Messung, aber es zeigt, was Ihre Kunden unterwegs erleben.

10. PageSpeed Insights für Mobilgeräte

Geben Sie die Adresse unter pagespeed.web.dev ein und bleiben Sie auf dem Reiter für Mobilgeräte. Oben stehen, wenn genug Besuche vorliegen, Felddaten echter Chrome-Nutzer aus den letzten 28 Tagen. Darunter folgt ein Labortest, für den Lighthouse ein Mittelklasse-Smartphone in einem gedrosselten Mobilfunknetz nachbildet; welches Gerät, steht im Bericht unter den Testeinstellungen. Für Ihre Entscheidung zählen die Felddaten; der Labortest hilft beim Suchen der Ursache. Ein eigenes Prüfwerkzeug für Mobilfreundlichkeit bietet Google nicht mehr an: Den Test auf Optimierung für Mobilgeräte und den zugehörigen Bericht in der Search Console hat Google zum 01.12.2023 eingestellt.

Was mit den Befunden passiert

Mit der Liste aus den zehn Schritten hat die Entwicklung eine klare Arbeitsgrundlage: Seite, Gerät, Befund, Bildschirmfoto. Sitzt ein Befund wie eine zu kleine Tippfläche, ein fehlender tel:-Link oder ein falscher Feldtyp in einer Vorlage, ist er mit einer Änderung auf allen Seiten behoben.

Dass eine Website auf allen Geräten funktioniert, ist eine Aufgabe der Umsetzung, auch wenn das Design schon fertig ist. Für das Piercing- und Tattoo-Studio Antares in München haben wir die responsive Website nach Vorlage eines fertigen Designs mit Tailwind CSS umgesetzt, auf Smartphone, Tablet und Desktop gleich gut lesbar; das Projekt lief einen Monat. Wie wir Websites bauen und betreuen, steht auf der Seite zur Webseiten-Entwicklung.

Wiederholen Sie den Test nach jeder größeren Änderung an Vorlagen und vor saisonalen Aktionen, denn ein neues Banner oder ein neues Formular kann die Ergebnisse von Schritt 2 und Schritt 7 kippen.

Vor dem ersten Test

Häufige Fragen

  • Mindestens ein iPhone mit Safari und ein Android-Telefon mit Chrome, weil beide Browser Seiten unterschiedlich darstellen und Formulare unterschiedlich ausfüllen. Ein kleineres oder älteres Gerät deckt Probleme auf, die ein neues Spitzenmodell mit großem Bildschirm verdeckt. Tablets prüfen Sie zusätzlich, wenn Ihre Kunden die Seite dort nutzen, etwa im Verkaufsgespräch.

  • Unter 24 mal 24 CSS-Pixel verfehlt eine Tippfläche das WCAG-Kriterium 2.5.8, sofern der Abstand zu Nachbarn nicht ausgleicht. Bequem treffen lassen sich Flächen in der Größe, die Apple mit 44 Punkt und Google mit 48 dp nennt. Für Ihre Entwickler ist der Wert in den Entwicklertools des Browsers nachmessbar, am Telefon genügt der Daumentest aus Schritt 4.

Ihre Liste aus zehn Schritten ist länger als gedacht?

Schicken Sie uns die Befunde mit Bildschirmfotos über das Kontaktformular. Wir sehen uns die Vorlagen an und sagen Ihnen, welche Punkte mit einer Änderung erledigt sind.

Befunde schicken

Nachweise

Quellen und Stand

Stand: 16.10.2026.

Artikel teilen