Menu

How to Test Responsive Designs

Testing your responsive web designs is crucial because the user experience on mobile devices is quite different from desktops.

But actual testing on all the mobile devices in the market isn’t practical for most of us.

So a simple responsive design testing technique some of us do is resizing our browser’s window size to kind of match the viewport sizes of smartphones and tablets. This is a quick-and-dirty trick for basic visual testing and it help us spot major problems, but it’s a terribly inaccurate portrayal of the mobile device experience.

Mobile devices have unique touch interactions like swipes and pinch-to-zooms, and likewise desktops have interactions like hovering and right-clicking. Responsive designs must account for these variances.

This tutorial will discuss an effective and practical method for debugging and testing your responsive designs. It involves a tool you probably already  have: Google Chrome.

Google Chrome’s DevTools has a feature called device mode that’s loaded with helpful tools for testing and debugging responsive designs.

Device mode is unprecedented. Most other responsive design testing tools simply resize your viewport, but device mode actually emulates the mobile device experience, particularly touchscreen interactions like tapping and swiping, right in your web browser.

Here’s a run down of device mode’s main features:

To start using device mode, open up your web design in Google Chrome.

Then, open Developer Tools by clicking on Chrome’s menu and then choosing More tools > Developer Tools. The keyboard shortcut for opening Developer Tools is Ctrl+Shift+I (Win) or Option+Command+I (Mac).

How to open Developer Tools

You should now see the Chrome Developer Tools (abbreviated as DevTools from now on) panel at the bottom or on the right of your browser’s viewport.

Developer Tools when opened

Click on the device mode icon (it’s a super tiny button that looks like a smartphone) to toggle device mode on and off.

Device mode icon

When device mode is turned on, you’ll see something along the lines of the image below, and the smartphone icon will turn blue:

Device mode appearance

Responsive Design Testing on a Specific Mobile Device

Use the Device panel to emulate the experience of a particular mobile device. This will allow you to visually test your design on said mobile device, as well as test touch-like interactions.

Device mode

Let’s say we’d like to see how our responsive design looks and functions on an iPhone 5. All we’ll need to do is  select that device in the <Select model> dropdown list:

iPhone 5 testing

Device mode will change the design preview so that you’re seeing what an iPhone 5 user might see. What’s more, if you notice, your mouse cursor is now a circle. When you move your mouse up and down, the design preview will scroll up and down, simulating the swipe interaction behavior. Moving your cursor over a link won’t act like you’re hovering over it (because there’s no hover on touchscreens).

Animation showing touch interactions

Media Queries Testing/Debugging

Debugging and testing your media query breakpoints  is super easy when you’re using device mode. Just click on the the “waterfall” icon at the top-left of device mode and it will show you a bar graph of your breakpoints.

Also, hovering over the “waterfall” icon will display the number of media queries there are on the page you’re testing.

Media query testing

Clicking on the bars will immediately switch the design preview to that media query breakpoint. Switching back and forth between your media queries is quick, making this feature quite a huge time-saver.

The colors of the media query bars are indicative of the type of media query being represented: Orange is a min-width media query, blue is a max-width media query, and green is a min and max range media query (e.g. @media (min-width: 320px) and (max-width: 640px)).

Related article: Design-Based Media Queries

Mobile Internet Testing

You can test the perceived performance of your responsive design by using the Network feature of device mode. Click the Network dropdown menu and choose the mobile network technology you want to test with, such as EDGE or 3G. This feature will throttle your Internet connection to match your chosen network technology.

Mobile internet connectivity emulation

Conclusion

DevTools is an incredibly powerful tool, and device mode makes it an even more indispensable part of the modern web designer’s toolkit.

There are a few more features in the device mode for you to explore, such as:

Share your strategies for responsive design testing in the comments below. Do you have tips to share about device mode?

Related Content

Jacob Gube is the founder of Six Revisions. He’s a front-end developer. Connect with him on Twitter and Facebook.

This was published on Mar 18, 2015

8 Comments

This is a great share! Thanks!

Luke Pettway Mar 18 2015

I try to use real devices when I can. I always hit people up when they get a new phone, as most people I know don’t try to sell their old ones. Really it is just a matter of having enough screen sizes.

I use BrowserSync to then connect to my local dev environment which updates all my devices every time I update a file that is being watched. This process has worked really well for me as I don’t have to fumble around with devices and can glance over at them to get a good idea of how things look. Once I am done working on the design, I’ll get a few coworkers to sit at a table and play with the site on different devices.

    Jacob Gube Mar 18 2015

    That’s exactly what I do, borrow as many devices as I can from friends and family!

    Thanks for sharing your tip RE: BrowserSync. We definitely need to cover it!

      Jack Carpenter Mar 22 2015

      My friend works at a company where they subsidize the development staff to get different mobile handsets so they can test on as many real environments as possible. That way not everyone has the standard iPhone, but a range of screen sizes, etc.

Excellent tutorial on the usage of Chrome Dev Tools. I accidentally stumbled upon the responsive tools one day and couldn’t believe how valuable they could be to website development.

Christiane Peschen Apr 05 2015

Great tutorial. Thanks for sharing it.
I use Google Chrome every day but didn’t know about the functionality of the DevTools.

Stella Bryan May 08 2015

Thank you for sharing this post, we are planning new website for our company and make it responsive so I found this post very helpful in that.

This comment section is closed. Please contact us if you have important new information about this post.

Partners