Der Browser Chrome hat eine eingebaute Handy-Ansicht. Damit sehen Sie Ihre Website am Rechner so, wie sie auf einem Smartphone erscheint. Die Ansicht steckt in den Entwicklertools und kostet nichts. Google nennt sie Gerätemodus.
Praktisch ist das im Alltag: Sie haben einen neuen Text eingepflegt und wollen sehen, ob die Überschrift auf dem Handy sauber umbricht. Oder jemand meldet, dass der Knopf zum Anrufen mobil nicht zu sehen ist, und vor Ihnen steht gerade nur der Laptop.
So öffnen Sie die Handy-Ansicht
- Öffnen Sie Ihre Website in Chrome.
- Klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie „Untersuchen“. Alternativ drücken Sie F12 oder Strg+Umschalt+I, am Mac Cmd+Option+I.
- Klicken Sie in den Entwicklertools oben links auf das Symbol mit Handy und Tablet. Schneller geht es mit Strg+Umschalt+M, am Mac mit Cmd+Umschalt+M.
- Wählen Sie in der Leiste über der Seite ein Gerät aus der Liste, etwa ein iPhone oder ein Android-Handy. Je nach Spracheinstellung heißt die Liste „Abmessungen“ oder „Dimensions“.
- Laden Sie die Seite mit F5 neu und scrollen Sie sie einmal komplett durch. Der Mauszeiger verhält sich dabei wie ein Finger.
Worauf Sie achten sollten
- Passt die Seite in die Breite? Lässt sie sich seitlich verschieben, ist ein Element zu breit für den Bildschirm.
- Ist die Schrift ohne Vergrößern lesbar?
- Lassen sich Knöpfe und Links treffen, ohne den Nachbarn zu erwischen?
- Öffnet sich das Menü, und schließt es sich wieder?
- Steht die Telefonnummer gut sichtbar oben, und ist sie als Link zum Anrufen angelegt?
In derselben Leiste sitzt ein Auswahlfeld, das anfangs „Keine Drosselung“ zeigt. Dort simulieren Sie ein Mittelklasse-Handy oder ein schwaches Gerät mit langsamer Verbindung. So sehen Sie ungefähr, was unterwegs zuerst erscheint und wie lange der Rest dauert. Über das Menü mit den drei Punkten in der Leiste speichern Sie ein Bildschirmfoto der ganzen Seite.
Was die Simulation nicht kann
Google selbst nennt den Gerätemodus in seiner Anleitung für Entwickler eine Näherung erster Ordnung. Für einen schnellen Blick reicht das, für die Abnahme einer neuen Website nicht.
- Ihr Rechner bleibt ein Rechner. Prozessor und Speicher eines Handys arbeiten anders, die Drosselung ist nur eine Schätzung.
- Ein iPhone aus der Liste bleibt Chrome. Auf dem echten iPhone stellt Safari die Seite mit eigener Technik dar.
- Bildschirmtastatur, mitwandernde Adressleiste und das Gefühl unter dem Daumen fehlen.
Bevor eine neue Seite online geht, testen Sie sie deshalb zusätzlich auf echten Geräten, wenn möglich auf einem iPhone und einem Android-Handy.
Ihr nächster Schritt
Nehmen Sie sich zehn Minuten und gehen Sie Startseite, Leistungsseite und Kontaktseite in der Handy-Ansicht durch. Notieren Sie, was hakt, und machen Sie ein Bildschirmfoto davon. Wie wir Websites von Anfang an für kleine Bildschirme planen, zeigt unsere Seite zum Webdesign. Macht Ihre Seite auf dem Handy nicht mit, sprechen Sie uns an, per Video oder bei Ihnen vor Ort in Essen und im Ruhrgebiet.
