Following on from our post listing some of the best mobile emulators, we have put together a list of our favourite responsive design tools. The popularity of responsive designs has exploded recently, meaning there is now a much wider variety of tools to help you build and test your own responsive designs. As consumers are using more and more devices to view websites and make purchases, making sure your design works well across all screen sizes is imperative. Using tools and emulators such as the ones listed here will help make sure that your responsive designs look good and work perfectly on a variety of screen sizes, from phones, tablets, desktops or TVs.
The Responsinator – responsinator.com
The Responsinator shows how your site looks on a variety of devices including the iPhone, iPad and Kindle, as well as a ‘crappy’ Android and a ‘nicer’ Android. All can be viewed in both portrait and landscape. One downside is that you can’t specify any other pixel measurements, so you can only test your site on the devices mentioned above.
Protofluid - app.protofluid.com
Matt Kersley’s Responsive Tool - mattkersley.com/responsive/
Matt Kersley, web designer and developer, has created a simple tool for testing responsive web designs. The emulator displays your site in 5 sizes: small phone, iPhone, small tablet, iPad portrait and iPad landscape.
Screenfly - quirktools.com/screenfly/
Screenfly by QuirkTools is a nice little responsive emulator with a choice of 25 devices and screen sizes including 8 different phones, 9 different screen dimensions, 3 TV screen resolutions and 5 kinds of tablet (although there is no iPad 3 option yet).
Responsive Px - responsivepx.com
Responsivepx is a responsive emulator which helps you to find the breaking points in your designs so you can alter your media queries accordingly. You can change the test screen size pixel by pixel to see exactly where the problems in your site occur and it gives you the option to add or remove scrollbars too.
Demonstrating Responsive Design - jamus.co.uk/demos/rwd-demonstrations/
This tool is fairly limited as it only offers 5 screen sizes for testing – iPhone portrait and landscape, iPad portrait and landscape and a standard desktop screen. The dimensions are also not displayed. However, as the name of this tool suggests, it works perfectly well for demonstrating responsive design to clients or a quick test of a media query.
Resize My Browser - resizemybrowser.com
Resize My Browser does what it says on the tin – it allows you to resize your browser to any one of the pre-determined sizes, or any one of your own. You can also create a new preset size which will remain on the menu even after you leave the site.
ResponsiView – Chrome Web Store
ResponsiVew is an extension for Chrome browsers which, with one click, opens a new window with the specified dimensions. It includes default settings for 480 x 320px and 768 x 1024px and you can also specify your own height and width.
Have you used a responsive testing tool that we haven’t mentioned? Let us know in the comments!