As we’ve mentioned in many of our recent posts, responsive and adaptive design has really caught on in the web design and development community due to the increase in mobile and tablet devices and the frequency users now browse websites on them.

This leaves designers, developers and to some extent, clients, with a problem; how to test on all these devices and screen sizes? It’s not always practical to go out and buy a new device every time a new one appears on the market (and realistically very expensive!)

There is a wide array of tools available on the web to help you test your website at multiple screen sizes. Here are a few of the ones we currently use and have found useful.

The Responsinator

This is a standalone website, which performs a simple task: display your site inside the frames of popular smartphones and tablets. It does its job well, and is quite useful to get a feel for what your site looks like if you don’t have multiple devices to test it on. Just enter a URL, and preview it on an iPhone, iPad, Kindle, and several Android phones. You can view the Responsinator site here.

Mobalizer

Mobalizer is a free desktop app that allows you to preview mobile websites, design mockups, and local HTML on Mac or PC. It includes a range of devices including iPhone, Blackberry, Nokia and Samsung. You can preview any URL and even export images of device views. You can download Mobalizer for free here.

Google Chrome

Google Chrome is now a commonly used and very popular browser. Many developers out there will probably be aware of the tools available for viewing and debugging website source code. You may not be aware that you can also use the same tools to preview other devices.

Clicking View in the menu > Developer > Developer Tools > and then select the Cog icon (bottom right) to launch the settings menu. In the ‘Overrides’ tab you can change the browser User Agent for a number of mobile devices and even other browsers such as Internet Explorer.

Summary

These are tools we find useful for testing responsive and adaptive designs on a computer, but it’s always good to test on real devices as they’re not always 100% true representations of the actual device. Consider these tools quick previews for checking layouts; they’re for looking at a design, not interacting with it.

Do you have a favourite tool for testing responsive layouts? Let us know below.