7 great tools for testing your responsive web designs

Test your site on different devices, without having to buy them all.

Stunning Free files every week at istock.com

Every modern web designer should know the principles of responsive web design – how to get your sites to render perfectly on whatever device or screen size it appears on. (If you need a refresher, check out our pro’s guide to responsive web design).

But theory is one thing, and practice is another. To ensure your site is fully responsive, you actually need to test it on different devices.

Most of us, though, don’t have the budget to get hold of the hundreds of physical devices you’d need to carry out a real-world test. But fear not! These tools provide a halfway house by letting you test your responsive designs within a virtual environment.

Check how your website appears on different devices, including TVs, with Screenfly

Screenfly is a free tool for testing a website on different screen sizes and different devices. It’s been around for a few years now, but it’s still popular and does its job extremely well.

Just enter your URL, pick your device and screen size from the menus and you’ll see how well your website is working on it. Featured devices include desktop computers, tablets, televisions, and smartphones.

DevTools' Device Mode offers an easy way for developers to simulate mobile devices within the Chrome browser. Use it to learn how your site appears across different screen sizes and resolutions, including Retina screens.

You can even simulate device inputs for touch, geolocation and device orientation within the emulator.

Resizer helps you to establish Material Design breakpoints for your responsive site

Google’s Material Design guidelines include advice about using breakpoints, responsive grids, surface behaviours and user interface patterns. And last year, it launched a free tool so you can see what following that guidance looks like on real-world devices.

Google Resizer allows you to enter a custom URL and view a site across Material Design breakpoints for desktop and mobile. If you want to see a demo first, click on the address bar and select ‘Pesto’ or ‘Shrine’ from the drop-down menu.

Ghostlab’s focus is on simultaneous testing across a bunch of devices and browsers

A paid-for website testing app, Ghostlab allows you to test your website on a multiplicity of browsers and mobile devices simultaneously. Start testing in one browser or device and all the others will mirror your actions, whether you’re clicking links, selecting buttons, filling out forms or reloading the page.

Handily, you also can take a screengrab from any device, annotate it, and drag and drop it to your bug tracker. See it in action in this video.

Browser Stack is one of the most advanced, full-featured testing tools around. The paid-for app offers access to more than 1,000 mobile and desktop browsers for testing purposes, a list which is continually being updated, based on market trends and usage statistics based on Browser Stack’s 36,000 customers.