Responsive Testing Tools

#responsive #testing #tools

Bei der Entwicklung im Kontext von Responsive Design haben sich einige Tools und Services herauskristallisiert, die uns ein einfaches und schnelles Testing ermöglichen.
Selbstverständlich zeigen diese Tools immer nur eine Simulation (Viewport Testing) und ersetzen keinesfalls das Testing auf echten Geräten (Device Testing) wie wir im Beitrag über Open Device Labs beschrieben haben.
 

Unsere Top 3 Responsive Testing Tools:

Viewport Resizer

Bei dem Viewport Resizer von Malte Wassermann handelt es sich um ein Bookmarklet welches neben einigen vordefinierten Basisgrößen auch individuelle Größenangaben zulässt und eine Funktion zum automatischen Skalieren der Seite mit sich bringt.
Tipp: Per Klick kann die Animation jederzeit gestoppt werden.

Website: http://lab.maltewassermann.com/viewport-resizer/

 

Firefox Developer Tools

Firefox bietet eine eingebaute Funktion zum Testen von unterschiedlichen Bildschirmgrößen. Das Tool kann in Firefox unter Extras › Web Entwickler › Bildschirmgrößen testen (Mac OS X Shortcut: ⌥ + ⌘ + M) aktiviert werden und passt sich dem simulierten Medium an (indem z.B. Scrollleisten ausgeblendet werden).

 

Juice’r

Bei Juice’r handelt es sich um einen Web Service, der im Vergleich zu den anderen zwar nur gerätespezifische Ansichten liefert, den wir aber sehr gerne nutzen, da die Website gleich mit Gerät gezeigt wird. Dieser Service eignet sich insbesondere für Visualisierungen für den Kunden und weniger zum eigentlichen Testen.

Juice’r: Responsive Design Web Service

Juice’r: Responsive Design Web Service

Website: http://juicecreative.co.uk/juicer/

 

Ein bisschen Spaß muss sein:

Zusatz: Responsive Roulette

Responsive Roulette verdeutlicht mit einem eher spielerischen Ansatz und zufälligen Größen den Grundgedanken von Responsive Design: Seiten sollten nicht für bestimmte Größen oder bestimmte Geräte optimiert werden, sondern für alle Typen und Variationen funktionieren.

Website: http://www.jordanm.co.uk/lab/responsiveroulette

 

1 Kommentar

  1. Bei Google Design gibt es nun auch ein gutes Testing-Tool (siehe Blogpost: Introducing Resizer) um die unterschiedl. Breakpoints zu testen:
    » http://design.google.com/resizer/

Ihr Kommentar