Prüfen Sie Ihre Website zuerst auf einem echten Handy im Mobilfunknetz, nicht im verkleinerten Browserfenster. Die häufigsten Probleme sind zu kleine Schrift, zu dicht stehende Knöpfe, zu große Bilder und Inhalte, die über den Rand hinausragen. Der größte Hebel ist fast immer die Ladezeit, und die hängt an den Bildern.
Erst richtig testen
Das Browserfenster schmal zu ziehen ist kein Handytest. Ihr Rechner ist schneller, Ihre Verbindung besser, und der Browser hat die Dateien längst zwischengespeichert.
- Auf dem eigenen Handy öffnen, im Mobilfunknetz statt im WLAN
- Privates Fenster benutzen, damit nichts aus dem Zwischenspeicher kommt
- PageSpeed Insights von Google aufrufen und den Handy-Wert ansehen, nicht den Desktop-Wert
- Jemanden bitten, eine Anfrage zu stellen, und zusehen, wo er hängen bleibt
- Mit einer Hand bedienen, im Stehen. So nutzen Menschen ihr Telefon wirklich.
Die acht häufigsten Probleme
| Problem | Folge | Aufwand |
|---|---|---|
| Zu große Bilder | lange Ladezeit, Abbrüche | gering |
| Schrift unter 16 Pixel | Zoomen nötig, Absprünge | gering |
| Knöpfe zu klein oder zu dicht | Fehlklicks | gering |
| Inhalt ragt seitlich heraus | Seite lässt sich schieben | mittel |
| Telefonnummer nicht anklickbar | kein Anruf | sehr gering |
| Formular mit vielen Feldern | Abbruch beim Tippen | gering |
| Tabellen ohne eigenen Scrollbereich | Layout verrutscht | mittel |
| Eingebettete Karte im Startbereich | lange Ladezeit | gering |
Bilder: der größte Hebel
Wenn Sie nur eine Sache tun, dann diese. Ein Foto aus der Kamera hat oft 4 bis 8 Megabyte. Angezeigt wird es auf einem Handy in 400 Pixel Breite, geladen wird trotzdem alles.
- Auf Anzeigegröße verkleinern. Über 2.000 Pixel Breite braucht kaum ein Bild.
- In WebP speichern: bei gleicher Qualität rund dreißig Prozent kleiner als JPEG.
- Bilder unterhalb des sichtbaren Bereichs verzögert laden.
- Breite und Höhe angeben, sonst verspringt das Layout beim Laden.
- Faustregel: kein Bild über 300 Kilobyte.
Allein das halbiert bei vielen Websites die Ladezeit, ohne dass jemand einen Unterschied sieht. Die übrigen Ursachen stehen in Warum ist meine Website so langsam?
Bedienbarkeit mit dem Daumen
- Klickflächen mindestens 44 × 44 Pixel, kleiner trifft niemand zuverlässig
- Abstand zwischen Knöpfen, sonst erwischt man den falschen
- Wichtiges in Daumenreichweite, also eher unten als ganz oben
- Telefonnummer als tel:-Link hinterlegen, damit ein Tippen den Anruf startet
- Keine Bedienung, die Zeigen voraussetzt, denn auf dem Handy gibt es kein Schweben mit der Maus
- Formularfelder mit passender Tastatur: Zifferntastatur bei Telefonnummern, E-Mail-Tastatur bei Adressen
Lesbarkeit
Der häufigste Fehler ist zu kleine, zu blasse Schrift. Was am 27-Zoll-Bildschirm elegant wirkt, ist auf einem Telefon im Sonnenlicht unlesbar.
- Mindestens 16 Pixel Fließtext, besser 17 bis 18
- Ausreichender Kontrast: Hellgrau auf Weiß fällt durch
- Kurze Absätze, zwei bis drei Sätze
- Zwischenüberschriften, damit man quer lesen kann
- Keine wichtigen Informationen nur im Bild, denn Text im Bild lässt sich nicht vergrößern und nicht vorlesen
Die Reihenfolge, wenn die Zeit knapp ist
- 1. Bilder verkleinern und umwandeln
- 2. Telefonnummer anklickbar machen
- 3. Schriftgröße und Kontrast prüfen
- 4. Formular auf die nötigen Felder kürzen
- 5. Seitlichen Überlauf suchen und beheben
- 6. Eingebettete Fremddienste erst auf Klick laden
Die ersten vier Punkte schafft man an einem Nachmittag, und sie machen den größten Unterschied.
Wann Nachbessern nicht mehr reicht
Es gibt einen Punkt, an dem Optimieren teurer wird als neu bauen: wenn die Website ursprünglich für den großen Bildschirm gebaut und das Handy nachträglich angeflickt wurde.
Erkennbar daran, dass auf dem Telefon Inhalte fehlen, Menüs sich nicht schließen lassen oder das Layout an mehreren Stellen bricht. Dann liegt es an der Grundlage.
Heute wird umgekehrt gearbeitet: zuerst für das Handy gestalten, dann für größere Bildschirme erweitern. Das ist keine Technikfrage, sondern eine Entscheidung zu Beginn. Nachrüsten lässt sie sich kaum.
Häufige Fragen
- Wie teste ich meine Website auf dem Handy?
- Öffnen Sie sie auf einem echten Telefon im Mobilfunknetz und in einem privaten Fenster, damit nichts zwischengespeichert ist. Ergänzend PageSpeed Insights von Google aufrufen und den Handy-Wert ansehen. Das verkleinerte Browserfenster am Rechner ist kein aussagekräftiger Test.
- Ist meine Website automatisch mobilfreundlich, wenn sie responsive ist?
- Nicht zwangsläufig. Responsive heißt nur, dass sich das Layout anpasst. Zu kleine Schrift, zu dichte Knöpfe, lange Ladezeiten und überlange Formulare bleiben davon unberührt, und genau daran scheitern die meisten Seiten auf dem Telefon.
- Wie schnell muss eine Website auf dem Handy laden?
- Der größte sichtbare Inhalt sollte nach spätestens 2,5 Sekunden erscheinen. Ab 4 Sekunden gilt die Seite als langsam, und die Abbruchrate steigt deutlich. Gemessen wird im Mobilfunknetz, nicht im WLAN.
- Wie groß müssen Knöpfe auf dem Handy sein?
- Mindestens etwa 44 × 44 Pixel, mit spürbarem Abstand zum nächsten Element. Kleiner lässt sich mit dem Daumen nicht zuverlässig treffen, besonders unterwegs, im Stehen und mit einer Hand.
- Bewertet Google mobile Websites besser?
- Google bewertet in erster Linie die mobile Fassung Ihrer Seite, auch für Suchergebnisse am Rechner. Eine auf dem Handy schlecht bedienbare Website wirkt sich also auf alle Ergebnisse aus, nicht nur auf mobile.