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…
Before you do anything, make sure the smartphone is connected to the computer via a USB device. Now let’s get into it…
Firstly, go into the phone ‘settings’ (see image A below) and then click on “About Phone” (see image B below).
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.
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).
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)
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.
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!
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).
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.
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.
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!