How to see your site on other devices

Pin It

Use Google Chrome to see your site on multiple devices

Now that Google is so concerned about how websites look and behave on mobile devices, it’s handy that Chrome also gives us a useful way to find out how our sites appear and function without having to own every type of phone or tablet.

We’re a reasonably online household so we can physically check sites on various generations of iPhones, an iPad, Kindle and of course, our laptops but what about all the various versions? And what about those Galaxies and Samsungs and Motorolas and so on? What about all those tablets I’ve never even heard of?

2015-04-20_1630With Chrome,it’s easy with the ‘developers tools’ section of the browser. Depending on your version of Chrome navigate to the developers tools using ‘file’ or, if you’re like me, the ‘hamburger navigation on the top right of the browser. (See image on the right).

You’ll now navigate to the following:

  • More tools
  • Developer tools

You’ll now see something like this:

2015-04-20_1722

Note the bars below the site

 

2015-04-20_1631You’ll see that there are bars below the site that can be enlarged by dragging them but in the meantime, you need to go to the cog icon shown by the arrow in the image above. (And on the right).

This allows you to disable cache. See below – just check the box.

2015-04-20_1632

Check the box

Close the box,there’s an ‘x’ on the right to do so, and you’ll notice that there’s a cellphone icon on the left. Click that – see the image below.

2015-04-20_1632_001

Click the cellphone icon.

Now you will see how your site looks on a phone.

2015-04-20_1647

A JAQUO article visualised on a cellphone

 

But what about all those different phones and tablets? At the top,there’s a drop down with a variety of different devices. Simply choose the ones you want to emulate. You can see the drop down below.

2015-04-20_1647_001
The chances are that if one article looks fine then all will but to be sure, check a few samples. You cansee below that I’m checking this one out as it appears on a Google Nexus.

2015-04-20_1649

Check articles

 

2015-04-20_1744

Icon

As an example, here’s a site that doesn’t work well on a phone (A Samsung this time). Note that the tool helpfully tells you underneath what the problems are. If you don’t see them, click ‘open drawer’ -it’s the blue icon next to the cog.

2015-04-20_1713

A site that is not cellphone-friendly

 

As you can see, Google doesn’t like the site you see above because the navigation on the left is too small, as is most of the text.  You can check for technical problems as they are shown in red below. Sometimes these will be coding problems that you can’t fix. Others you can – this site, for example, showed a problem with the configuration of the Facebook ‘like’ button. For errors like these, just update the plugin if there’s an update available or find a newer, better version.

How does your site check out?

 

 


 

Jackie Jackson, also known online as BritFlorida, is a highly experienced designer and writer. British born and now living in the USA, she specialises in lifestyle issues, design and quirky stories. You can see a wide range of articles here, or visit her website Tastes Magazine. See The Writer’s Door for more information.

You might also like:

Author: Jackie Jackson

Share This Post On

Submit a Comment

Your email address will not be published. Required fields are marked *