As the use of mobile devices continues to rise all across the world, so does the need for us to deliver a tailored experience for those devices on the web. There’s very little debate about the fact that the best way to do this is to design a single, responsive website instead of serving up multiple versions of “mobile optimized” webpages as we have in the past. The only problem I have with responsive layouts is that when it comes time to test them out, I simply don’t have a multitude of devices and/or operating systems to test them on. Because of this I’ve turned to a few different testing tools for responsive web design, and in this article I’ll share my top 5.
Aptus is a nice little Mac application that allows you to test responsive websites natively on your machine (providing you have a Mac). This is actually one of my favorite methods because not only does it allow you to setup multiple breakpoints for testing your site on several devices, but it also allows you to change the user agent for the browser as well. That means you could test your site at pretty much any size using any “modern” browser. They even have support for Internet Explorer back to version 7.0 (nobody designs for IE6 anymore, c’mon). Aptus isn’t free, but it’ll only cost you $2.99 from the Mac App Store.
If apps aren’t your thing, or if you don’t own a Mac, there’s always in-browser tools like Responsinator. This tool is quick, easy, and well designed. Responsinator doesn’t offer the perks of user agent modification (so you’ll have to load it up in multiple browsers) but it does offer a nice selection of device sizes for your responsive testing pleasure. Responsinator is also a free tool, at the moment, so if you don’t want to shell out the $3 for something like Aptus, this might be a great alternative for you.
Screenfly is another browser-based tool but it has a much richer tool set than that of Responsinator. This tool offers multiple breakpoints including mobile, tablet, desktop, and (surprisingly) TV. In addition to the breakpoints, you can also rotate the display and enable/disable scrolling on the webpage. If you’re looking for a more robust testing environment in the browser, you should definitely give this one a shot.
IV. Responsive Web Design Testing Tool
The final in-browser tool is simply called the Responsive Web Design Testing Tool, and it is the work of Matt Kersley. This is a very simple RWD testing tool that offers multiple device sizes as well as just pixel dimensions. The tool is free to use and can also be forked on GitHub if you like. Again, this tool doesn’t offer user agent testing, but it’s still a nice option for those of us who don’t own several types of mobile devices.
V. Adobe Edge Inspect
Finally, we come to another one of my favorites, Adobe Edge Inspect. This tool is a part of Adobe’s Creative Cloud platform and it allows you to test your mobile designs on a number of mobile devices. The difference here is that you actually have to have the devices in order for this to function. You will also have to install an app on said devices in order for your desktop to communicate with it. Basically this app syncs whatever you’re looking at in a desktop browser with the app’s built-in browser and allows you to interact with and refresh the pages as needed. Providing you have multiple devices for testing, this is an absolutely amazing tool. However, for someone like me, it’s use is limited because I only have a few phones/tablets that I can test on.
No matter how you test your mobile responsive designs, it is very important that you do so. Make sure not only to test at multiple breakpoints and resolutions, but also in different operating systems and on different browsers as well. You never know where someone will be viewing your website or with what device, so it’s best to try and cover all of your bases in order to ensure a good experience for all users who access your content online. If you want more information on how to develop responsive designs, check out this course at lynda.com by my friend James Williamson. Thanks for reading!