5 Ways to Test Your Responsive Web Design

5 Ways to Test Your Responsive Web Design

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.

I. Aptus

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.

Screen Shot 2013-10-28 at 7.31.49 AM

II. Responsinator

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.

Screen Shot 2013-10-28 at 7.37.34 AM

III. Screenfly

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.

Screen Shot 2013-10-28 at 7.41.53 AM

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.

Screen Shot 2013-10-28 at 7.45.48 AM

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.

Screen Shot 2013-10-28 at 7.56.36 AM

Conclusion

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!

« Previous Post
Next Post »

8 COMMENTS ON THIS POST To “5 Ways to Test Your Responsive Web Design”

  1. Galina Walls says:

    Thanks, Justin! This is very useful. I liked the Screenfly best.

  2. Simon says:

    Hi,

    Amazing tools indeed, but have you ever checked http://www.viewlike.us? 🙂

    • Justin Seeley says:

      Hi Simon,

      No, I hadn’t seen that tool before, but it looks really nice. I’ll be sure to add it to another showcase post I’m working on for RWD. Thanks!

  3. Chad Rogez says:

    Justin thanks for this post. this is exactly what I have been looking for and did not realize that there were this many tools for testing responsive layouts.

  4. Marine says:

    Hello Justin,

    I ‘d like create my own website to find a job in France.
    I love your website design, can you tell me with which CMS or software you build your website.
    I wait your answer with impatience.

    Thank you for your help.

    Marine

  5. adam says:

    Thanks for sharing this. I have one website to share with you with good collection of responsive websites @ http://visitresponsivewebsites.com/

Leave a Reply

Your email address will not be published. Required fields are marked *