Cross Device Testing Tools for Responsive Web Design

If you're creating a mobile or responsive web design you'll need some new testing tools to see how your website will look on mobile devices. Fortunately there are some very good FREE mobile device emulators that will let you test your design in various devices and screen sizes. In fact there is about 40% chance you already have one mobile device simulator but, you just haven't discovered it yet.

Chrome Developer Tools

This one is my favourite and odds are every web developer already has it. Although I have to admit it took me some time to discover this gem. It will let you test on iPhone, iPad, Android, Blackberry and even Nokia N9. Great! But it gets better. The standard chrome developer tools "elements" tab remains active so you can debug .css easily too. There is a downside too: this is a mobile device simulator and not an emulator so all it really does is that it lets you test your website in various device screen sizes however, this type of testing is not 100% accurate because it does not emulate device behaviours. Still an excellent tool and one I personally use it 90% of the time: since I found it that is. Where is it? Check out the screen shot and you'll see: like all well hidden things its right there in front of you.

Chrome Developer Tools
Chrome cross Device Simulator
P.S. All web developers already have Chrome but, if you're a DIY web enthusiast do yourself a favour and download Google Chrome. Internet Explorer sucks anyway!

iOS Simulator

iOS Simulator, image source Apple

Another great tool I use is iOS simulator. Unfortunately this one is only available for Mac users which is a shame because it is a proper iPhone and iPad emulator and allows for much more accurate testing since it emulates the device behaviour too. Downside is that its not available as standalone download and comes as part of Xcode app which totals 1.65GB in size. Nonetheless, if you want to see how your responsive design will look and behave in iPhone or iPad this is as close as you'll get without owning the actual devices.

Responsinator

ThisĀ is an online tool and it won't really do much more than Chrome Developer Tools but, it will let you test your responsive design on most popular devices at once. Apart from speed why else would you use it? If you're presenting your work to the client its really handy to show how their site will look on all popular devices at once. I also use it when explaining responsive web design advantages to a potential client. This has proved especially helpful with clients who already have a website because it helps them visualise how crappy their site looks on mobile devices and, appreciate the value of Your proposal, even thou previous proposals probably included responsive design too. Check it out here...

If you know of any other FREE tools that I missed and you feel they deserve to be on the list feel free to leave a suggestion in comments.

Category: 
Authored by: -- Sat, 16/03/2013 - 12:32