I have been working on responsive web design projects for quite a while now. During the course of my designs, I tend to use a combination of the responsiView chrome extension, Typecast’s great Responsive.is tool, a couple of simulators including the IOS Simulator (if you don’t know where to find it, go there), and some real devices obviously (!!), but I had yet to find an adequate [and favourite] media queries testing tool.
Dimensions
Then I found Dimensions, a neat little web app allowing designers to quickly test responsive websites. It gets added to the Chrome apps just like Icomoon does…
… and all you have to do is enter an url and press test. Drag the handle to find pixel-perfect break points, or simply use the pre-set device dimensions. There is also a Preview mode for neat design layout vs device presentations.
It works offline so you can test the designs you are working on locally. When I tested it, I was distressed when I realised it didn’t get auto-refreshed by Codekit,… until I found this post from the app creators themselves (Surge), explaining a box had to be unticked to make it work as expected.
In one word: Hooray. Folks, I may have found MY media queries testing tool.
App website: http://www.dimensionstoolkit.com/
Chrome extension
Authors: Surge Creative
My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.
Follow @shoogledesigns
