Mit dem Browser Google Chrome lässt sich jede beliebige Website sehr einfach als mobile Version betrachten. Nutzt man das Developer Tool von Google Chrome, kann dadurch ein beliebiges Gerät simuliert werden.

Um eine Seite für Mobilgeräte zu testen, muss man lediglich die gewünschte Website aufrufen und mit der Taste F12 das Google Chrome Developer Tool öffnen.

Google Chrome Entwickler Tool Übersicht.
Besucht man unseren Blog und drückt dann die Taste F12, öffnet sich das Google Chrome Developer Tool.

Rechts werden nun verschiedene Tabs angezeigt, die dabei helfen können, die Seite zu analysieren. Unter dem Tab Elements befindet sich der Quellcode der Seite und unter Network wird angezeigt, welche Dateien geladen werden mussten, wie groß diese waren und wie lange das gedauert hat.

Wählt man links neben Elements das kleine Symbol aus, was ein Tablet und ein Smartphone darstellen soll, wechselt man in die mobile Ansicht der Seite.

Webseite dargestellt auf dem iPhone mit Google Chrome Entwickler Tool.
So sieht unsere englische Startseite auf dem iPhone X aus. Ohne dieses Smartphone zur Verfügung zu haben kann ich für dieses Gerät die Seite testen.

Anstelle des iPhone X lassen sich auch noch viele andere Geräte testen. Unter Edit wird die Liste der mobilen Geräte sogar noch länger.

Auswahl verschiedener Mobilgeräte beim Google Chrome Entwickler Tool.
Um die Seite für ein Tablet zu testen, wähle ich eines aus der Liste aus.

Rechts oben befindet sich auch noch das Symbol, um das ganze im Querformat zu betrachten. So ist es möglich, die komplette Benutzererfahrung nachzuempfinden.

Darstellung des Blogs auf dem iPad.
So sieht number13 auf dem iPad Pro aus.

Wie man sieht unterscheidet sich die Darstellungsweise je nach Gerät, sofern die Website für mobile Geräte optimiert ist. Während am Computer bis zu drei Posts nebeneinander angezeigt werden, ist es am iPhone X nur einer, am iPad Pro immerhin zwei Posts.

Guides