Responsive Testing in Chrome

Responsive Testing in Chrome

The days when people only accessed websites on standard sized screens is long gone. These days, if your website isn’t optimised to look good on mobiles and tablets, as well as computers, you’re going to be missing out on a large chunk of traffic.

When we advise our customers on what sort of theme template to use for their website, we always tell them to look for something that is described as ‘responsive’. But if you don’t have lots of different devices to look at the demo site on, how do you know what it will look like before you start building? Some theme developers helpfully include previews for a standard mobile and tablet in their demos, but many don’t. You could just load up the demo site and drag the corner of your browser to resize the window, but that’s not going to show you exactly how it will look on a particular screen size.

Luckily, in most cases, using Chrome’s developer tools makes responsive testing a little easier to see exactly what you need.

If you don’t already have the Google Chrome browser installed on your machine, you can download it here.

Step 1

chrome_emulation_step1

Find a theme you like the look of and load up its demo site. Most demo sites are displayed in a frame so to be able to emulate the devices properly, you’ll need to remove this first. You can generally do this at the top of the screen by clicking the little cross.

Step 2

chrome_emulation_step2

Next, pull up the developer tools by clicking on devtools_button   in the top right hand corner of your browser. Select Tools -> Developer Tools.

Step 3

chrome_emulation_step3

This will open up a drawer at the bottom of your browser. On the right hand side, click  drawer_button to open up the section that contains the emulation tools.

Step 4

chrome_emulation_step4

Select the device you’d like to emulate from the drop-down and click on ‘Emulate’.

Step 5

chrome_emulation_step5

You’ll need to click on the refresh button to the left of the address bar  – refresh_button – to see the final result.

Step 6

chrome_emulation_step6

If you’d like to see what your site would look like with the device in a landscape orientation, click on ‘Screen’ to the left of the panel and use the button in between the two dimensions to swap them over.

So there, you have it – a quick and simple way to check what your chosen theme will look like on different screen sizes. You can find out more with Google’s in-depth instructions but we thought we’d give you the quick and easy version first. Enjoy!

Don’t forget, if you’re a helpfulwebhosting customer and you want assistance with any of this, don’t hesitate to get in touch and we’ll walk you through. If you’re not a helpfulwebhosting customer and wished your host was as helpful as us, talk to us about switching.

 

 

 

Share Your Thoughts!


Let's get social on Twitter, Facebook, Google+ and LinkedIn

Visa Credit payments supported by WorldPay Visa Debit payments supported by WorldPay Mastercard payments supported by WorldPay Maestro payments supported by WorldPay American Express payments supported by WorldPay JCB payments supported by WorldPay
WorldPay Payments Processing
%d bloggers like this: