Mobile Websites mit neuem DevTools Device Mode emulieren
Kommentare

Es ist kein Geheimnis, dass Entwickler dem Mobile-First-Ansatz bei der Entwicklung und dem Design von Websites den Vorrang vor Desktop-First-Designs geben sollten, da immer mehr User das Web von einem

Es ist kein Geheimnis, dass Entwickler dem Mobile-First-Ansatz bei der Entwicklung und dem Design von Websites den Vorrang vor Desktop-First-Designs geben sollten, da immer mehr User das Web von einem mobilen Gerät aus nutzen. Doch um eine großartige Erfahrung für das Web zu designen, muss man es genau auf einem mobilen Gerät erleben. Das sagt zumindest Paul Bakaus, der auf dem Chrome-Entwickler-Blog ein neues Device-Mode-Feature von Chrome 38 Beta vorstellt, mit dem insbesondere die Darstellung auf mobilen Geräten nachgestellt wird. 

Device Mode emuliert mobilen Viewport

Schon seit längerem gab es Chrome-DevTools-Features, mit denen eine mobile Darstellung emuliert werden konnte, allerdings bedurften sie zu viel Ausprobierens durch Trial-and-Error, weil reale Geräte-Bedingungen nicht nachgestellt werden können. Daher hat das Chrome-Entwickler-Team einen neuen Device Mode entwickelt, mit dem mobile Geräte-Bedingungen deutlich zuverlässiger und näher an den realen Konditionen angezeigt werden können.

Der Device Mode lässt sich neben dem „Element untersuchen“-Icon aktivieren und emuliert dann automatisch einen mobilen Viewport sowie Touch-Events. Damit lassen sich auch unterschiedliche Viewport-Größen testen, anstatt die Größe des kompletten Browser-Fensters anpassen zu müssen.

Besonders praktisch ist dabei, dass beliebte Geräte-Presets ausgewählt werden können, sodass für sie automatisch der Viewport, Touch, User-Agent und die Display-Auflösung eingestellt werden.

Visuelle Anzeige aller Media Queries

Ein weiteres nützliches Feature des neuen Device Modes in Chrome ist die visuelle Anzeige aller Media Queries, wenn der Device Mode aktiv ist. Damit lassen sich die Breakpoints mit dem Viewport in Beziehung setzen. Wird dann auf einen Breakpoint geklickt, wird automatisch die Größe des Viewports angepasst. Zudem können Media Queries direkt bearbeitet werden.

Um die Darstellung auf einem mobilen Gerät nutzbringend zu emulieren, muss die Netzwerkfähigkeit der Nutzer von mobilen Geräten dargestellt werden. Mithilfe der neuen DevTools können nun verschiedene Netzwerk-Bedingungen emuliert werden – zur Auswahl stehen in einem Drop-Down-Menü etwa GPRS, EDGE, 3G, DSL und WiFi.

Gleichzeitig gibt es die Möglichkeit, das entsprechende Tab offline zu setzen, um AppCache und Service-Worker-Szenarien auszuprobieren, während in einem anderen Tab die Dokumentation betrachtet werden kann.

Chromes neuer Device Mode in Chrome 38 Beta bietet Entwicklern viele nützliche Funktionen, die beim Design von responsiven Websites helfen können. Damit, und mit Googles Design-Docs, geht Chrome einen weiteren Schritt, die Darstellung mobiler Websites zu verbessern, da sich die Bedingungen auf mobilen Geräten mit den neuen Features zuverlässiger testen lassen.

Aufmacherbild: Hand touching tablet pc, social media concept von Shutterstock / Urheberrecht: ra2studio

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -