Two Tools I Use For Testing Mobile and Responsive WordPress Projects

For developers, the terms “mobile” and “responsive” are already a bit cliche. It doesn’t really matter though, right? They’re here to stay which means that part of our job is to test mobile WordPress projects as best as we can.

Because mobile devices render content different, there are two aspects to the problem:

  • Some have browsers that are powerful enough to render sites just as they would on a desktop, and thus will need responsive layouts.
  • Users who don’t have responsive-sites use plugins such as WPTouch to give their site mobile capability which is essentially an entire other site.

This means that we, as developers, are responsible for testing:

  • Responsive-ready projects
  • Sites on which users have installed some of our work – like a plugin – that may not be compatible with, say, WPTouch.

On top of that, we do development on localhost rather than a publicly accessible environment so it can be cumbersome to have to deploy a project and get an environment setup just to go through the process of testing a site or a project only to rinse and repeat until we get it fixed.

Thankfully, it really isn’t that complicated. Here are two tools that I use to test mobile WordPress projects:

Responsive.is

Test WordPress Mobile - Responsive.is

Responsive.is is a web application for easily testing your site on multiple displays. Specifically, it renders a given site in five different layouts:

  • Desktop
  • Tablet Landscape
  • Tablet Portrait
  • Phone Landscape
  • Phone Portrait
Best of all, it works with localhost, so you can simply provide it the URL to your local environment and it will work exactly as if it were a live site. Hands down, this is my favorite utility for testing responsive sites.

UA Swticher

Test WordPress Mobile - UA Switcher

UA Switcher is an extension (for both Chrome and Firefox) that makes it trivially easy to spoof the user agent of your browser. This makes it really easy to test sites that have plugins such as WPTouch installed.

At the time of this post, the extension can spoof the following user agents:

  • Chrome
  • Firefox
  • Opera
  • Safari
  • IE
  • iOS (iPhone 4 and iPad)
  • Android
  • Windows Phone

Naturally, since it’s a browser extension, it works on localhost as well. This has been my favorite extension for testing some of my plugins that add functionality to a blog that may clash with other mobile plugins or mobile themes.

For the most part, these are the only two tools that I use. I’ve had yet to find the need for anything else, but if you’ve got any suggestions, leave ’em in the comments.

5 Replies to “Two Tools I Use For Testing Mobile and Responsive WordPress Projects”

  1. Chrome dev tools have a UA and a viewport switcher, and its pretty much all I use. You can also set it to emulate touch events, so if you’re using modernizr.touch, you can test that.

    I addition to Chrome, XCode from Apple comes with iOS simulators. You can choose from iPhone, iPhone Retine, iPad, and iPad Retina. These are useful for touch events as well, as they mimic the action with your mouse.

  2. Responsive.is is super handy for sites that are built to be responsive, which based on its name, is what it is intended for.

    What I do not like about Responsive.is is how sites that are not built to be responsive are not scaled like they are on iOS.

    Check out Apple’s website using Responsive.is and then select the iPhone portrait view to see what I mean: http://responsive.is/apple.com

    I still find BrowserStack to be the most useful in testing all devices / situations.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.