Chrome DevTools Device Mode vereinfacht Testen von Responsive Designs
Kommentare

Die User Experience auf Desktop- und Mobile Devices unterscheidet sich in vielerlei Punkten. Arbeitet man bereits mit Responsive Webdesign, ist das Testen darum unerlässlich, um bei beiden Nutzergruppen für eine gute User Experience zu sorgen. Das Problem dabei wird allerdings schnell offensichtlich, wenn man sich anschaut, wie viele verschiedene Mobile Devices es auf dem Markt gibt: es ist für die meisten schlicht unmöglich, auf jedem Device testen zu können.

Eine andere Lösung muss her – und zwar am besten eine, die über das Verkleinern des Browser-Fensters hinausgeht. Jacob Gube zeigt, wie man mit möglichst einfachen Mitteln Responsive Designs testen kann.

Device Mode emuliert Mobile Experience

Viele Webdesigner, die nicht die Möglichkeit haben, direkt auf unterschiedlichen Devices zu testen, nutzen einen einfachen Trick und versuchen durch das Verkleinern des Browsers-Fensters verschiedene Viewport-Größen nachzuahmen. Größere Probleme mit dem Design dürften so zwar durchaus ins Auge fallen – immerhin kann ein solcher Trick als einfacher visueller Test dienen – die tatsächliche Mobile Experience lässt sich so jedoch kaum widerspiegeln.

Ein Grund dafür ist vor allem die unterschiedliche Art der Eingabe. Wo Desktops mit Interaktionen wie Hover und Rechtsklicks arbeiten, verfügen Mobile Devices über Touch-Interaktionen wie Swipen und Pinch-to-Zoom; beides muss jedoch möglichst gut von einer Responsive Website verarbeitet werden.

Hier kommt das richtige Testen ins Spiel. Dafür muss man nicht mal zwingend in ein neues Tool investieren – wenngleich es natürlich zahlreiche Tools gibt, die das Erstellen von Responsive Websites vereinfachen – sondern kann sich beispielsweise das Device-Mode-Feature der Chrome DevTools zu Nutze machen. Der Vorteile des DevTools Device Mode ist im Vergleich zu anderen Tools vor allem, dass nicht einfach nur der Viewport in der Größe angepasst wird, sondern eine tatsächliche Mobile Experience inklusive der Touchscreen-Interaktionen emuliert wird.

Features und Nutzung von Device Mode

Der Device Mode der Chrome DevTools bringt zahlreiche nützliche Features mit sich, die das Testen von Responsive Designs vereinfachen sollen. Dazu gehört natürlich vor allem die Mobile-Device-Emulation, mit der simuliert werden kann, wie das Design auf den verschiedenen beliebtesten Smartphones und Tablets aussieht und funktioniert. Ebenso lässt sich mit der Touch-Events-Emulation die Experience bei der Interaktion mit dem Design auf einem Mobile Device testen.

Auch bringt der Device Mode einen Media-Queries-Inspektor mit, der alle Media-Query-Breakpoints anzeigt. Nützlich ist zudem die Mobile-Netzwerk-Simulation, mit der überprüft werden kann, wie sich das Design bei unterschiedlichen Netzwerkgeschwindigkeiten verhält.

Die Nutzung von Device Mode ist denkbar einfach. Er wird über die DevTools aktiviert und ermöglicht von dort, die Experience eines bestimmten mobilen Devices zu emulieren und das eigene Design und Touch-ähnliche Interaktionen visuell zu testen. Die einzelnen Schritte erklärt Jacob Gube anschaulich in seinem Tutorial.

Die DevTools von Chrome erweisen sich also auch für das Testen von Responsive Designs als überaus nützlich. Dazu erklärt Gube:

DevTools is an incredibly powerful tool, and device mode makes it an even more indispensable part of the modern web designer’s toolkit.

Aufmacherbild: Computer and Mobile Phone von Shutterstock / Urheberrecht: Peeravit

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -