When did you last find yourself browsing a non-mobile friendly website on your phone or tablet? Probably quite recently especially if the site you were on was more than a couple of years old. When it comes to websites and mobile devices, the relationship is going to be a long one with many commentators saying that the future is mobile.

Making sure that any site you’re either building or have commissioned operates on all devices is a key part of the process as over 50% of all search engine lead site visits are now made using mobile devices. If your site isn’t mobile friendly then you could be missing out on traffic.

All of the sites we design and build here at Teapot are ‘responsive’ meaning that they adapt to the screen size whether it is a massive monitor or a tiny little smart phone. This has been standard policy for two years or so now.

Built To Be Mobile Friendly

When we’re building websites, checking the way a page looks on mobile has been made that little bit easier thanks to a neat feature available on Android phones where we can dual view the website on both computer and phone, whilst editing it to your preference. Instead of having to manually check what the site looks like on the phone it’s now possible to synchronise the computer and phone giving you complete control. Curious? Read on to find out how to set it up yourself.

Here is how to do it in a few easy steps…
STEP ONE

Before you do anything, make sure the smartphone is connected to the computer via a USB device. Now let’s get into it…

STEP TWO

Firstly, go into the phone ‘settings’ (see image A below) and then click on “About Phone” (see image B below).

Image A

Image B

P03
STEP THREE
The Build Number

This part may sound a little strange but it is essential! You must tap the ‘Build Number’ of the phone no less than seven times. This will enable the Developer Mode, which is shown in image A above. Until this is done the Developer Mode option will not be accessible nor visible as an option in the list.

STEP FOUR

Proceed into the developer options and turn it on using the switch icon (top right of image C below). Allow development settings by selecting OK (see image D below).

Image C

P04

Image D

P05

STEP FIVE
USB Debugging

Now that you’ve accepted the developer options, you have to turn on the USB debugging setting. This will start to initiate the link between the computer and phone. Click on OK (see image E below)

Image E

Image F

P08

STEP SIX
More USB Debugging & Transferring Files 

For the last time, I promise, allow the USB debugging (see image G below). Now you’ll have the choice of what to use the USB for.

Image G

P10

Image H

P11

STEP SEVEN

Select ‘Transfer Files’ (MTP) – see image H above. This will allow media files to be transferred to and from the devices.

We are finally setup so it’s now time to switch to the computer!

STEP EIGHT
Over To The Computer

If you’ve correctly followed the steps above you’ll find that if you visit chrome://inspect/#devices the device that you have connected will be shown. You can then type in a web address to view (see image I below).

Image I

PC2

An Example Using Our Website

Here is a simple example of what can be changed on www.teapotcreative.co.uk (see images J & K below). On the right hand side you can see the code display whilst on the left you can see how things would appear on your mobile device screen.

Image J

PC3

Image K

PC4

As you can see we have inspected the element and changed the trademark blue to an unruly pink! There are many other elements available to change, you’ve just got to try it yourself. If you’re building websites then this is one tech tip you definitely want to try.

More?

If this has whetted your appetite for more tech related blogs and tips from the Teapot team then why not follow us on Twitter and keep your ear to the ground for the next blogs. Thanks for reading and good luck trying out this tip on your own smart phone and computer. Get in touch if you get stuck!

  • SBA 2016 Winner
  • chamber