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.

Category:
Projects
Tags:

Join the conversation! 20 Comments

  1. 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.

  2. I honestly just sat down to write this exact post about using Resizer. Great stuff brother.

  3. 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.

    • These are almost exclusive to apple devices.

      You’re right – luckily it does allow for custom sizes, but I usually have about half-and-half of using the generic boilerplate versus the iPhone/iPad/Desktop media queries depending on the project.

  4. I like this way of testing basics (it looks right) but nothing beats a device in hand for actually testing if button sizes (as an example) actually work on a device.

    After doing testing like this I always grab the devices I have around and test it in hand to be sure.

    • Yeah – definitely right on that front. Unfortunately, the market is so fragmented with so many devices that we have to almost rely a bit on the user base to let us know if they notice something weird.

      In that case, we can add additional media queries.

      • Agreed I have a 7″ device, iPad 2 and iPhone 5 for testing. Then there are some local guys I get together with every couple weeks and they have some other devices I can test with.

        Having a whole device lab would be crazy expensive.

  5. You shouldn’t use device dependent media queries. But rather let the content determine where the breakpoint should be.
    http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/

    I like to use Ghostlab for testing mobile, you can use the browser inspector for remote debugging:
    http://vanamco.com/ghostlab/

    • You shouldn’t use device dependent media queries. But rather let the content determine where the breakpoint should be.

      That’s a good perspective, I’ve not thought about that before.

      But sometimes I wonder if we don’t subconsciously (for lack of a better term) implement some of our designs knowing that they’ll be viewed mostly on certain devices.

      Either way, thanks for that link!

  6. Thanks Norcross I didn’t know about that Firefox feature.

    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.

  7. I prefer responsive view tool on firefox that i use with firebug.
    Control + shift + m!!! Resize the world!
    Also Chrome have this option but is hide in the option panel.

  8. We’re using Responsive Design View tool in Firefox. I think you should give it a try ;)

  9. Request to share few generic test scenarios on responsive design. Thanks in advance.

    • 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.

Leave a Reply

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