I am no web designer, but I do build websites as a small hobby, this very site has had its WordPress theme pretty much redesigned completely. What has always been a hit and miss is how a website would look on a certain device. Sure, I could go out and by 30 phones, 20 tablets and 8 monitors just to see how it looks and works on each device. However, when recently working on an upcoming menu overhaul I found a neat trick, and that is to build responsive sites while emulating mobile devices. That’s right.


This is done using Google Canary, it’s a Chrome beta, and contains feauters for testing, that will one day make their way to regular Chrome. Both Chrome and Canary have an inspector tool that helps view code for a site, you can get to this by pressing F12. Canary has a responsive device toggle in the top left of the inspector panel, and pressing that will allow you to choose which device you would like to emulate. You can choose from Android phones, iPhone’s and iPads, blackberrys and more. You can even adjust the rotation too, making your designs even more accurate per device.


This trick really should help if you are a web designer, and if it does be sure to sign up for the Mailing List below, I am sharing tips like this all the time!