Testwerkzeuge responsives Webdesign
Jedem Designentwickler sind die gängigen Werkzeuge zur Untersuchung von Webseiten bekannt. Ich möchte hier baer auf einige Hilfsmittel eingehen, die die Untersuchung von Webseiten bei der Erstellung responsiver Webdesigns vereinfachen. Dabei geht es vor allem darum, Webseiten in beliebiger Auflösung darzustellen und dabei im besten Fall das Verhalten eines Smartphones zu emulieren.
Web Devoloper Symbolleiste für Firefox
- Schnellansicht für 6 unterschiedliche Bildschirmgrößen (320x480; 480x320; 600x800; 800x600; 768x1024; 1024x768)
- eigene Bildschirmgrößen können hinzugefügt werden
- Untersuchung mit Firebug bzw. originären Web Entwickler Werkzeugen ist möglich
- kein spezielles Screenshottool
- keine spezifische Gerätekennung in Apache Log Dateien
Bildschirmgrößen Testtool in den Entwicklertools des Firefox
- eigene Bildschirmgrößen können hinzugefügt werden
- Untersuchung mit Firebug bzw. originären Web Entwickler Werkzeugen ist möglich
- schnelle und einfache Erstllung von Screenshots
- Simulation für Berührungsereignisse / Touch Screen
- keine spezifische Gerätekennung in Apache Log Dateien
Entwicklerwerkzeuge Google Chrome
- vordefinierte Geräte mit zugehörigen Bildschirmgrößen, eigene Bildschirmgrößen möglich, es muss aber in Frage gestellt werden, ob diese Bildschirmauflösungen auch den tatsächlichen verhältnissen entsprechen.
- kein spezielles Screenshottool
- spezifische Gerätekennung in Apache Log Dateien
- Simulation für Berührungsereignisse / Touch Screen
Virtuelle Maschinen mit GenyMotion
Emulationen für verschiedene Geräte verfügbar
- eigene Bildschirmgrößen können nicht hinzugefügt werden, der Bildschirm kann aber skaliert werden (Änderung der dpi) und es sind verschiedene Geräte mit unterschiedlichen Bildschirmgrößen verfügbar, ich nutze:
- Samsung Galaxy S2 - 4.1.1 - API 16 -480x800
- Samsung Galaxy S3 - 4.3 - API 18 -720x1280
- Es werden unterschiedliche Gerätekennung an den Server übermittelt, die in der Apache Log Datei ausgelesen werden können:
- Samsung Galaxy S2 - 4.1.1 - API 16 -480x800 - Standardbrowser sendet
Mozilla/5.0 (Linux; U; Android 4.1.1; en-us; Samsung Galaxy S2 - 4.1.1 - API 16 - 480x800 Build/JRO03S) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 - Samsung Galaxy S3 - 4.3 - API 18 -720x1280 - Standardbrowser sendet
Mozilla/5.0 (Linux; U; Android 4.3; de-de; Samsung Galaxy S3 - 4.3 - API 18 - 720x1280 Build/JLS36G) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
- Wenn man einen anderen Browser installiert, do wird dieser auch mit einer eigenen kennung versehen, so wie Samsung Galaxy S2 - 4.1.1 - API 16 -480x800 - Firefox, der
Mozilla/5.0 (Android; Mobile; rv:37.0) Gecko/37.0 Firefox/37.0 sendet