by Flo Preynat

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.

Most Recent Posts

Special Recent Posts

Sip: a color picker refreshingly simple indeed

Sip: a color picker refreshingly simple indeed

July 10th, 2014

I've just discovered Sip, a color picker app for Mac users. "Just discovered" since it's been around[...]

Perch – the CMS that does not pollute your web design workflow

Perch - the CMS that does not pollute your web design workflow

July 7th, 2014

I have recently finished a project based on Perch, the clever 'little' CMS created by edgeofmyseat.c[...]

Responsive video code snippet

Responsive video code snippet

June 29th, 2014

More of a reminder than a pure detailed blogpost, this code snippet will be my go-to resource when I[...]

Project Naphta: a nifty extension to play with text embedded in images

Project Naphta: a nifty extension to play with text embedded in images

June 9th, 2014

We've all been there. You want to select a good chunk of text on a website, only to realise you can'[...]

Free photos for your web design projects

Free photos for your web design projects

June 4th, 2014

Nothing beats using a real professional photographer when working on a cool project. You can be the[...]

Comments

  1. Jade Waddy says:

    Thanks for the mention! We’re actually rolling out a huge update in the new year with lots of requested features so stay tuned :)