Responsive Design Testing Techniques

Responsive design testing is critical when you’re building a responsive site. However, this testing takes a lot of effort due to the large number of devices and resolutions. Today we’re going to take a brief look at some techniques you can use to make this easier.

Starting Out Responsive

When you first start implementing your design it is very handy to use a responsive grid framework (I like Gumby). This enables you to implement responsive treatment from the beginning. If there are some really specialized components that won’t work with the framework, try to implement the broad strokes of making it responsive while doing the initial build. Don’t worry about font sizes or spacing, just try to make the layout collapse as the screen size changes.

General Layout Tests

A good solution for quick tests of general layout is pageres. This makes it very easy to get screenshots of your site at multiple resolutions. It’s similar to just resizing your browser to see how the site behaves at different sizes, but has the benefit of generating static images so you can see each resolution next to the other and compare how a specific component adjusts itself.

Some Caveats

The pageres solution shouldn’t be used for real cross-browser/cross-platform testing – just basic layout review to verify your breakpoints are working.

• The solution uses PhantomJS, a headless browser based on WebKit so you won’t get a true cross-browser test with it
• During testing for this blog post, I couldn’t get web fonts to render
• The solution uses the horizontal resolution but basically ignores the vertical resolution and captures the entire screen height. This is good for seeing how the entire page looks but won’t show you where “the fold” is. This also means that you don’t need to specify the same horizontal resolution with different vertical resolutions

Responsive Design Testing on Devices

Once you’ve got a basic responsive design working you need to test on actual devices. In the past we covered ways to do cross-browser QA on mobile. If you have a few devices it can be very effective to use a solution that enables those devices to “follow” your desktop browser.

Addy Osmani has a great writeup on synchronized cross-device mobile testing that talks about several solutions to achieve this.

Some Thoughts for the Future

Frequently you reach a point in a front-end development project and you look back and see places where you can make the code better. In regular software development this is called refactoring and you rely on your unit/function/feature tests to help ensure that you don’t break anything as you change code. However, in front-end development, it’s considerably harder.

One thing I’ve dabbled with in the past is diffing screenshots from different points to see what has changed. Depicted is an interesting new tool in development to bring structure to this process. You can also watch a great video about the background of the project from Velocity 2013.