Testing responsive designs

Testing is a critical component of any web project, and that's especially true for responsive design. The trick in testing responsive sites is in accurately testing how your site is going to look and perform across multiple devices. Most people test responsive design projects by simply resizing their browser window as they refine their layouts. While this type of testing is helpful at giving you immediate feedback, it doesn't accurately show you how the site will render on mobile browsers, and it ignores performance altogether.

Thankfully, there are a few tools out there that can help you test your responsive designs. The first thing that most people want to test when designing responsive layouts is their media queries and whether or not they're hitting the right breakpoints. Now, you can resize your browser window to test this, but you're not really getting any feedback as to the actual trigger points themselves, and it's not exactly a speedy process. In fact, many designers became so frustrated with this that they created a couple of online tools to help speed up the process and make it a bit more precise.

Benjamin Keen has created a nice bookmarklet that you can add to your browser's bookmark toolbar. A single click of it will show your current page rendered in as many sizes as you wish. You simply create the bookmarklet by adding the dimensions you want to test, generate it, and then you'll be able to test multiple breakpoints at once. This is extremely handy for testing locally. The Responsinator isn't a bookmark, but rather, it's a site where you can go ahead and enter any URL you want and see the page rendered at preset breakpoints that match popular phones and tablets.

Now, there are a lot of online tools like The Responsinator, and doing a quick search will give you a ton of options. Two of my favorites are responsive.is, which allows you to enter a URL and simply click the icon of the device that you want to simulate. What's nice about this is you see the content actually animate as it reflows. I also really like Screen Queries. The thing that I love about this one is that not only you can enter in the URL or test a page locally, you get a nice grid, which shows you where your breakpoints are, you can focus on the actual rendering, and scroll down through your designs, and it has a ton of preset screen sizes and devices that allow you to quickly test across multiple devices.

While examining your breakpoints is an important part of testing responsive design, it shouldn't be your only concern. If people are going to be viewing your site on mobile devices, you want to make sure they're performing properly. One of the best online mobile tests that I found is Mobitest. Now this is a free online testing service that allows you to enter the URL of your site and also choose the device that you want to test on. Now, once the test is complete, it's going to load up a screenshot of your site on that device.

It's going to tell you what your average load time is. And one of the things I really love about this, you get this really nice waterfall chart that shows you all of the resources that loaded for this page and how long it took those resources to load. So this way you get a little bit of a clearer picture of which resources might be slowing your site down. It's also especially helpful for checking to see if you're managing your resources properly and if specific resources either did or did not load based on how you are managing them. You might also want to look at using mobile emulators for testing, especially if you don't have access to multiple devices.

Now, a mobile emulator is just that. It's a program that does its best to simulate a specific mobile device, browser, or operating system. You can either use online emulators like TestiPhone.com and Opera's Mini simulator, or you can download and install emulators like Opera's Mobile emulator and the emulators that come with Apple's iOS SDK and Android's SDK. In fact, you can pretty much find an emulator for almost any mobile device.

For a more thorough look at emulators, I recommend using mobiForge's excellent article on mobile emulators. It's a great way to learn where to find them as well as some of the pros and cons to using them. Now, I think that emulators are a great way to simulate specific mobile environments, but they can be difficult to set up and they're not always 100% accurate in showing you exactly how your site is going to behave on an actual device. Although all the approaches that I've mentioned are helpful nothing, beats testing on the actual device itself.

Now, I know that building a large device library can be expensive, but at a minimum, you should have a sample of iOS and Android devices to test on. While you're testing on the devices, you'll need some way to debug your sites so that you can test for performance and make sure that everything is running the way that it should. Opera's Remote Debugging tool is a great way to pair Opera's Dragonfly Debugger on your desktop with the site on a mobile device. For WebKit remote debugging check out Weinre, or Weinre depending upon how you like to pronounce it.

It lets you set up remote debugging with WebKit Inspector so that you can inspect the pages running on mobile devices. You may have gathered from all of the options that I've shown you that testing responsive designs can be a bit of a pain. Well, if you're not used to testing sites across multiple devices, you should be prepared to have a slower-than- usual testing cycle at first. You should also be prepared for having to deal with an entirely new system of browser bugs as you add mobile browsers to the mix. However, once you begin to understand what works and what doesn't, you'll adopt the testing workflow that allows you to make sure your sites work as well as possible across multiple browsers and devices.