Darstellung auf dem Smartphone

Was wir prüfen

Wir öffnen die Startseite in einem Browser, der ein Smartphone mit 375 Pixel Breite und Touchscreen nachbildet. Dann messen wir:

• Seitliches Scrollen: Ist die Seite mehr als 10 Pixel breiter als der Bildschirm, ist das ein schwerer Mangel.
• Kleine Schrift: Ist mehr als ein Viertel des sichtbaren Textes kleiner als 12 Pixel, gibt es eine Warnung.
• Kleine Schaltflächen: Sind mehr als fünf Links und Buttons kleiner als 24 × 24 Pixel, gibt es eine Warnung. Nicht mit dabei sind Links im Fliesstext, Textfelder, deaktivierte Buttons und Sprunglinks, die erst beim Fokus mit der Tastatur erscheinen.

Zusätzlich zeigen wir im Bericht die Bewertung von Google Lighthouse für Schriftgrössen und Schaltflächen sowie Screenshots in Smartphone-, Tablet- und Desktop-Ansicht.

Warum das wichtig ist

Bei den meisten Websites kommt mehr als die Hälfte der Besucher vom Smartphone, bei Angeboten, die man unterwegs nutzt, oft deutlich mehr. Wer unterwegs eine Telefonnummer, Öffnungszeiten, einen Fahrplan oder ein Produkt sucht, gibt schnell auf, wenn die Seite nicht mitspielt.

• Seitliches Scrollen wirkt kaputt. Meist schiebt ein einzelnes zu breites Element, etwa ein Bild, eine Tabelle oder ein eingebettetes Video, die ganze Seite über den Rand. Die Navigation verrutscht, und Besucher finden die Inhalte nicht mehr.
• Kleine Schrift zwingt zum Zoomen. Viele lesen dann gar nicht erst weiter.
• Kleine Schaltflächen trifft man mit dem Finger schlecht. Man tippt daneben, landet auf der falschen Seite und ärgert sich.

Google bewertet Websites nach ihrer Smartphone-Ansicht. Probleme dort wirken sich auf die Platzierung in den Suchergebnissen aus.

So behebst Du es

Seitliches Scrollen

Finde das Element, das über den Rand ragt (siehe «So prüfst Du es selbst»). Häufige Ursachen und Lösungen:

• Bilder mit fester Breite: max-width: 100%; height: auto; im CSS.
• Tabellen: in einen Container mit overflow-x: auto setzen, damit nur die Tabelle wischbar ist.
• Eingebettete Videos und Karten mit fester Breite in Pixeln: Breite auf 100 % setzen.
• Lange Wörter oder Adressen wie E-Mail-Adressen: overflow-wrap: anywhere.

Kleine Schrift

Setze die Grundschrift auf mindestens 16 Pixel. In WordPress-Themes und Page-Buildern gibt es dafür meist eine globale Einstellung für die Typografie, oft getrennt nach Desktop und Smartphone.

Kleine Schaltflächen

Links und Buttons sollten mindestens 24 × 24 Pixel gross sein, besser 44 × 44. Das betrifft oft Icons in der Fusszeile, Social-Media-Symbole und Textlinks, die dicht beieinander stehen. Vergrössere den Innenabstand (padding), dann wächst die Fläche, ohne dass sich die Optik stark ändert.

Website-Baukästen

Wix und Squarespace haben einen eigenen Smartphone-Editor. Prüfe dort jede Seite, denn Elemente, die in der Desktop-Ansicht verschoben wurden, landen auf dem Smartphone manchmal an einer ungünstigen Stelle.

So prüfst Du es selbst

Öffne die Entwicklertools (F12) und klick auf das Smartphone-Symbol («Gerätesymbolleiste»). Wähle ein schmales Gerät wie das iPhone SE. Lässt sich die Seite seitlich wischen, ist etwas zu breit. In der Konsole hilft dieser Befehl, das Element zu finden:

[...document.querySelectorAll('*')].filter(e => e.getBoundingClientRect().right > innerWidth)

Häufige Fragen

Auf meinem Smartphone sieht alles gut aus. Warum meldet der Check etwas?

Wir messen auf einem schmalen Smartphone mit 375 Pixel Breite, etwa einem iPhone SE oder mini. Grössere Smartphones zeigen mehr Platz. Viele Besucherinnen und Besucher haben aber kleinere Geräte oder eine grössere Schrift eingestellt.

Wie gross sollte die Schrift auf dem Smartphone sein?

Für Fliesstext mindestens 16 Pixel. Kleinere Schrift ist für Fussnoten in Ordnung, nicht für den Text, den man lesen soll.