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

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.

devpractic.es is responsive

devpractic.es is response.

In the short above, you can see that i’m testing out DevPractic.es within the context of a tablet.

My preferred tool for testing the responsive nature of a website is Viewport Resizer by MalteWassermann. Straight from the website:

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.