Your own device lab today

March 12, 2014 - Jake Bresnehan

During the last few years there has been no shortage of devices being released to the market. For us this was a new challenge and we all stepped up to the plate by adding device specific media queries to our stylesheets.

This was possible in “the good old days”…

A few years has past and we have come to the realisation that adding device specific media queries is completely bogus and unmaintainable (well I hope so). Rather, focusing on how the design looks across any size has become the norm.

But with this approach, how do we really know that our site looks “correct” on X device?

a) We go and buy / borrow every device that is required and test.

b) Visit your local device lab and test.

c) Open up Chrome and do the following:

Pop the Chrome Developer Tools up with command + option + i.

Press the Esc key or click the draw icon (top right) and navigate to the Emulation tab.

Chrome Dev  Tools Emulation

Then select the device of your choice (currently 43!) and Emulate. The awesome thing with emulating your site in Chrome is that you have all the power of the Developer Tools right at your finger tips. This makes debugging pretty painless.

A word of warning. Emulating your site in Chrome is by no means an accurate representation of how things will look and behave. Testing on the real thing will always be the best. That being said, the emulation feature sure is an amazing developer resource which should be utilised to speed up mobile development.

Join over 30,000 developers & designers who get the best news and articles delivered right to their inbox each week.