Testing a new site before launch is one of the most important stages. The last thing we want is for a site to be launched and then changed a lot over the first few weeks: it means we can’t see immediate impacts of our changes, and it leads to a great deal of disruption for the site’s users. Not only is the site new, but if it’s not tested fully and lots of changes are happening, it’s different every time the user visits the site.
It’s hard, however, to test a responsive site, especially if you only have one device to test on. People won’t generally have laptops, desktops, phones and tablets to test on without asking around in an office, and while this is always a good idea – it’s great to be able to see a site on real devices – it’s very rarely possible to sit down with someone else’s device for long enough to carry out full testing.
One way of testing – and the easiest – is to keep resizing the browser window to see how a site works at different break points. While this kind of works, it’s far from ideal. It doesn’t represent the true user experience – resizing doesn’t really happen on a mobile device, so things usually look wrong until you refresh – and it’s hard to know when your screen is at the right size to represent each common screen size.
The Chrome browser, however, gives us a way to test on a range of devices without needing to own them. It’s far from perfect, because it won’t always take account of some of the little quirks of different operating systems, but it gives a really good starting point and represents the mobile experience much better. Here’s how to use it.
The first thing you’ll need to do is to activate the Chrome inspector. When you do this, it’ll look scary, but don’t worry – you can’t actually change anything and when you turn the inspector off everything will reset just fine.
To turn on the inspector, you can click the menu icon in the top right of Chrome and select More tools > developer tools, or you can use ctrl + shift + I. There are more details on the official Chrome Dev Tools site. You should also be able to press F12 to open the inspector.
When you do, you’ll see something like this:
As I said, a little scary at first view, but pretty simple in reality.
What you see at this point is a way for developers to look at the code and try different changes, debug things, and see what styles are applied to different elements. It’s useful for development, but from your point of view it’s not what you want to see.
What you want to do is to emulate different browser sizes and types, so we’re going to click the “toggle device toolbar” button:
…or press ctrl + shift + M.
This puts the browser screen in to device emulation mode. There’s a lot going on, but what you should notice first is the website you’re looking at in a smaller window in the middle of the screen.
Now, the inspector window – the bit with all the code and buttons and stuff no-one understands – is taking up a lot of space and it’s not really that relevant at this stage, so let’s get it out of the way. If you close it (the close button is on the far right) the screen will revert to the normal browser window, so we don’t want to do this. What we can do is “undock” the toolbar so it floats in its own window. If you have two monitors you can drag it out of the way, or if you just have one you can minimize it at this point.
To undock the window, click the three vertical dots on the far right and next to “dock side” click the first button, “undock into separate window”. Go back to the browser window and you should have plenty of space to play with.
Let’s have a look at what we have now:
Starting from the top:
The best way to test on a range of devices is to start by working through the drop-down menu of defined, common sizes. Try in both landscape and portrait mode. You’ll notice when you’re testing like this that the mouse cursor turns into a circle, which represents your touch: hold the mouse button down to touch and swipe the screen and click to just tap. Note the size of the circle: you’ll see that if links are too close together on the screen that they might both overlap the circle, which would be an issue because you’d be tapping both at once.
If you see any issues while you’re testing, you’ll need to let your developer know. The best method by far is to send a screenshot as well as a description of the issue. From the screenshot, we’ll be able to see the browser you’re using, as well as the screen size you’re testing at, and we should be able to replicate the issue.
One fairly common complaint with responsive sites is that when the screen is resized things don’t catch up, but on refreshing the issue is fixed. Don’t worry too much about this: resizing a screen doesn’t really represent how a user navigates most sites, and it certainly doesn’t represent how people use mobile devices. The only exception is when you click the portrait/landscape button: this should work as you expect. Otherwise, refresh the page each time you select a different device or screen size.
When you’re done, close the inspector window and things will return to normal. Congratulations! You’ve responsively tested your site!