How To Properly Test Responsive Design

Now that all the rage that responsive design has become a bit more common place in our day-to-day work, I think it’s worth sharing how to test for responsive design.

Specifically, this is how I think a lot of us has historically tested for responsive design:

Testing Responsive Design

It’s funny because it’s true, right?

But here’s the thing: Is this really a viable use case for properly testing responsive design?

Test Responsive Design

Responsive design is fun. I know. I remember when browsers first began implementing support for it, and we all began dragging our browsers back and forth, and saying “Ohh, that’s neat,” or even critiquing other sites who didn’t have responsive design despite the fact that much of our own work didn’t have it either :).

Funny how that happens isn’t it?

But in all seriousness, part of working with software is testing for use cases. I don’t think anyone would argue with that. To that end, we need to make sure that we’re properly testing for responsive design.

And dragging your browser window back and forth isn’t the way to do it (though it’s fun enough in and of itself :).

Find The Right Tools

In order to actually testing responsive design, you need some type of simulator or tool that will show you what your site and/or web app will look like within the context of another device.

Viewport resizer is a browser-based tool to test any website’s responsiveness. Just save the bookmarklet, go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page.

If you don’t currently have a tool of choice, or you’re still dragging your browser back and forth, check out Viewport Resizer.

Of course, there are other tools that are available so feel free to link up your preferred utilities in the comments!

Have The Proper Media Queries

Next, when you’re project calls for responsive design, then I’ve found having a predefined set of media queries really helpful in making sure that I have all of my bases covered. This includes phones, tablets, iPads, and desktops viewing a site both in portrait and in landscape.

To do this, there’s a set of media queries that I always include in less or css files. Depending on the nature of the project, I’ve got two variations of the media queries.

One set includes queries specifically for the iPhone, iPhone 5, various versions of the iPad, and other tablets (in both portrait and landscape mode). And the other set includes queries that are more generalized to handheld devices (such as phones) and to tablets. It also supports both portrait and landscape modes.

Details Media Queries

You can check out the gist (or view it below, if you’re reading this site in a web browser):

Generalized Media Queries

You can check out the gist (or view it below, if you’re reading this site in a web browser):

Using this set of media queries in conjunction with a responsive testing utility will help make sure that the majority of your bases are covered.

However, if there are dimensions that are off or that I’ve forgotten, then please leave a comment on the gist and I’ll aim to keep it updated.

Is That All?

I doubt it.

I’m no designer, nor did I have I ever claim to be; however, I know that what I’ve outlined above has proven successful in the majority of the projects on which I’ve worked, so I’m simply passing it along not only to help out others, but also to gather any extra feedback from you guys.

So feel free to share your thoughts in the comments or additions to the code on the gist.

Join the conversation! 20 Comments

This is one area that I think Firefox has it right: it’s built in. Doing control + shift + M (or whatever the Mac equivalent is) brings up the viewport tester, with a dropdown of different sizes. And you can add your own, as many as you want.

Resizer IS awesome! My only comment would be that resizer uses device specific sizes. These are almost exclusive to apple devices. If you use this tool be sure to grab the screen resizer and try all custom sizes.

You may need some custom media queries based on your design but it all depends. This is a great starting point but if the design starts to look like poo make a custom media query.

I do already use Viewport Resizer for final verification, but I find that on simpler sites, simply dragging the browser window and just fixing stuff as it breaks, by writing a media query for that size ( using just max-width ), and not worrying about any device specific sizes, seems to work best.

I find that on simpler sites, simply dragging the browser window and just fixing stuff as it breaks, by writing a media query for that size ( using just max-width ), and not worrying about any device specific sizes, seems to work best.

The only reason I’m not a huge fan of dragging the browser is that sometimes, you may hit a size that breaks when it doesn’t necessarily correspond to any particular device.

I don’t think it’s a bad strategy, of course, but in my experience, sometimes I end up introducing more work than I really needed to do.

Hey Malik – thanks for the request, though this isn’t something that I’m going to be covering on the blog anytime soon as I have a backlog of other content that I’m looking to cover in the coming months.

Luckily, there are plenty of other resources available on the web that go much further into depth than I ever could on this particular aspect of development.

Just Getting Started with WordPress?

I write a lot about WordPress development but if you're just getting started, I recommend checking out WPBeginner. They have free training videos, glossary, and more.

WPSessions hosts some of the best WordPress training you’ll find anywhere from many well-known speakers.

If there’s something you’d like to learn, and it’s not already covered here, it’s probably been covered at WPSessions. If you use the special link below you can watch your first session for free and get a steep discount on the full-access VIP membership.