Maltpress

Web Development


Built by maltpress

Testing responsive sites using Chrome

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.

Step 1: activate!

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:

inspector1

As I said, a little scary at first view, but pretty simple in reality.

Step 2: make it mobile

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:

devicetoolbar

…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:

inspector2

Starting from the top:

  1. The top menu bar shows:
    1. a drop-down for the device we’re emulating – try selecting different devices and see how the window changes.
    2. The pixel dimensions of the screen we’re looking at. If you select “responsive” rather than a device you can resize the window to represent any different device you know the dimensions of.
    3. The current zoom – in order to fit larger device windows into your browser (for example a tablet screen) Chrome may zoom out to show the whole window. If things look way too small, check that this is set to 100% so you know that’s what it will really look like.
    4. The device orientation swapper button: click this to swap between portrait and landscape.
  2. The top, grey bar allows you to click to select different default width breakpoints. Hover over and you’ll see that you have options for small, medium and large phones, tablet, laptop and larger screens.
  3. The second, more colourful bar shows the breakpoints that the developer has coded in. At each of these points, something changes. A good responsive build will have relatively few of these: in the example you’ll see that this site needs a little work in this regard! Again, you can click to select these different sizes.

Step 3: test

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!

Back to blog



Leave a comment


By using this site you consent to our use of cookies. To find out more, see our privacy policy. Continue