Mobile
Article

Better Responsive Website Testing in Google Chrome

By Matthew Setter

Is your site mobile-aware? Is it truly responsive? If it’s not, according to eMarketer, there are expected to be more than 1.75 billion smartphone users this year. By 2017 global mobile phone penetration will rise to 69.4% of the population.

I know: You’ve heard the chants before; the internet is everywhere; next year the internet will only be viewed on a mobile device; desktop computers are going the way of the dinosaurs…

But seriously, that’s what’s happening! Whether you like it or not, if you don’t get on the bandwagon, that site you’ve invested so heavily in may soon have a very limited audience.

But then it gets complicated, as there’s no one mobile landscape. With the release of the iPhone 6 and 6 Plus recently, there are nothing less than 46 competing devices, all with different resolutions and hardware capabilities. And in addition to that, there’s network speed to contend with.

Whereas on the desktop, you might think only in terms of Wifi or DSL speed, with mobile handsets there’s all the different network data speeds, namely: GPRS, EDGE, 3G and LTE (4G).

While you can make a mobile-aware site, can you make one which handles such a wide range of devices that also works well across different data speeds?

I now want to show you two simple tools; tools which can help you respond to the most common devices and speeds and stay on top of the development issues, until your site’s perfect. Let’s start with number one.

Mobile Emulation in Google Chrome

With the release of Chrome 32 a new developer tool was added — mobile emulation. This tool is an absolute godsend for debugging mobile and responsive designs.

If you don’t already have it open, open it with one of the following options:

  • Press F12 (or Cmd+Alt+l on a Mac)
  • Click Developer Tools under View -> Developer
  • Right click anywhere on a website and click Inspect Element

At the top of the developer tools window you’ll see a new icon, which looks like a mobile phone. Click that and the mobile emulation mode will be enabled for the site you’re currently on, as you can see in the screenshot below.

chrome core configuration

You can see the normal developer tools are available, but there are a number of additional options, and the site’s been rendered to simulate a mobile device, in this case an iPhone 6 Plus. Let’s look at it in some more detail now.

Device Configuration

chrome device configuration

At the top left, there’s a device configuration, allowing you to pick from one of 46 mobile devices to emulate. Below the device list you can see options for:

  • Screen resolution
  • Display rotation between landscape and portrait
  • Set the device pixel ratio
  • Fit the display within the visible viewing area or display
    it at the full size

Network Configuration

chrome network configuration

Next, in blue, is the network configuration. There you can set the network speed, all the way from offline to no throttling. This will help you see just how fast, or slow, your site will load depending on the speed of the network the user is on.

Under ‘network’, you can manually set the user agent. This will help you see how your site will respond.

Breakpoints

chrome - detected breakpoints

Now what about those breakpoints? The tool will automatically detect all the breakpoints you’ve set in CSS and provide a link to each one. You can see in the image below it has detected 6. By clicking on each of them, you can see how the page renders at each.

One point about User-Agent strings; if you don’t want to set them manually, you don’t have to. By clicking escape on your keyboard, you can open up further configuration options and pick from a list of pre-set user agents to spoof.

In addition to this, you can also emulate hardware device sensors, including touch input, geolocation and an accelerometer.

Usersnap Extension

With all the configurability this new edition provides, designing for mobile devices just became a whole lot easier. But that’s not the end of the story.

It’s one thing to see how the site renders under different conditions, but how do you share the results with your developers and designers?

The Usersnap Chrome extension integrates nicely with this new addition to the Chrome developer tools. You can take the screen annotation and reporting capability you’ll be familiar with if you’ve ever used the Usersnap Widget and apply it to your design sessions with the mobile emulation plugin.

If you don’t already have it, install it from the Chrome Web Store. Once installed, you’ll see a Usersnap icon appear in the Chrome toolbar. The first time you use it, a small prompt will appear indicating you have to configure it.

Click ‘ok’, and after logging in to Usersnap, you’ll be taken to the configuration page of the tool. At the bottom of the page, as below, you’ll see a list of your projects.

usersnap pick your project

Pick a relevant one from the list and click Select Project. With that done, you’re now ready to use the extension. Going back to the mobile emulation plugin, I noticed that when the page hits the 768px breakpoint, it stops rendering correctly.

So I want to let my team know about it so I can get it fixed. Clicking on the Usersnap button opens up what I saw of the site in the Usersnap editor, where I have all the usual functionality available. I can add a comment, highlight, note, blackout, ruler, and draw onscreen.

usersnap annotate responsive screenshot

You can see in the screenshot above that I’ve made some annotations for my team to let them know what the site looks like and that it needs some changes to have the site render correctly on a mobile device. Now you have even more flexibility and control than ever before to design, develop, and debug great web sites and applications.

Wrapping Up

So there you have it, two great tools to help you simplify the effort required to ensure cross-device compatibility of your website or web app.

Have you tried them yet? What’s your experience been like?

Comments
MatsSvensson

Device Configuration in chrome is useless.

Not even close to what it looks like, and where the real breakpoints are, on the real devices that i have available to test on.

Its the same with all these tools.
It takes a whole lot more than just showing the content inside a square of a certain size.

paul_irish

Would love your bug reports if this is what you're seeing. We are committed to our emulation being as faithful as possible. Certainly devices will be necessary for performance and touch characteristics, but no reason layout/dPR/styles can't be identical. That's what we're going for, and I think we're actually doing very well. Report any bugs at http://crbug.com

MatsSvensson

Reporting bugs in any of Google's products has never ever given me any results or even responses over the years.
So I don't do that anymore.

Life's to short.

PaulOB

Well you got an immediate response from Paul (who obviously cares about his product) so perhaps it is worth your while reporting the bugs you mention. It will benefit all of us.:)

djeyewater

So does this tool enable / disable features depending on the device chosen? Or does it just size the window to the same size at that device? The first would be useful, the second would only be semi-useful if you were designing for a specific device / set of devices.

The bandwidth throttling sounds quite user friendly compared to alternative options.

fsoft

I am sorry to say that the usersnap part of the article actually looks more like biased advertising.
I think the tool is good and useful, but trying to integrate it with the Google DevTools is far from being a good idea ...
By reading the article, I thought it would integrate with the devtools, but it actually resizes itself inside the viewport, breaking all your measurements. It is useless.
That's why I think it it just advertisement.

settermjd

Paul, I agree. Whilst I don't believe that emulation will ever be a 100% perfect representation of the original, from what I've experienced so far with the mobile responsive extension, it looks quite faithful to me. Thanks for stepping in and giving your input.

settermjd

I have to agree. Paul's done a great job of both supporting the product and providing assistance.

settermjd

I'm not sure if it does enable or disable features dependent on the device. I don't believe it does. However the resizing seems to work quite smoothly, at least from what I've seen so far. Maybe Paul has more to say about this?

settermjd

Thanks @fsoft for the feedback. I see what you mean, but didn't think it was that bad. However I agree that there is some room for improvement.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Mobile, once a week, for free.