Hat Trick Blog

What is a Mobile Friendly Website?

added on Thursday 18th June 2015 at 00:00am

Recently there has been a lot of buzz about "mobile friendly websites and how important they are. You may have head other terms such as "adaptive or "responsive but essentially they all mean the same thing. Making your website work well on a mobile device! With a large number of internet users now using their smartphones to connect to the internet and expecting to see mobile friendly websites, you cannot afford not to have one.

Google has recently released a large update to its Search ranking algorithm. Imagine you are selling your house and need a electrician, you pull your phone out of your pocket, get onto Google and search "Electrician. Here is what you see;

Google Mobile Search showing Mobile-friendly tag

Youll notice that under the green website url there is a light grey "Mobile-friendly banner. Google can now tell if your website is mobile friendly and will use that as another ranking factor to calculate where you should be on the search results.

Here are is an example of a website (viewed on a smartphone) before having our "mobile-friendliness added in;

Mobile Device showing a Desktop website that does not fit

This is a screenshot of a non-mobile friendly website. To find what you want is a struggle! You have to swipe here, pinch and zoom there and half of the buttons dont work. We all hate that experience and so, why would we want to give our website visitors that experience?

Here is the same website but in a "mobile-friendly website. You can see that everything fits the screen and is easy to read. There are already a few traits we can see here;

Mobile device showing a Mobile friendly design that scales to the devices screen

1. Call now is a link
If you click on the telephone number your phone will ask you if you want to phone that number. If you click "No then nothing will happen, if you click "Yes then your phone will proceed to phoning that number. How amazing is that? There is no writing down, there is no copy and pasting or even trying to remember the number!

2. The famous "Burger menu icon
Youll see that on the top right hand side there is an icon. Its three white lines on top of each other.
You have probably been seeing that a lot lately. What is it? Well If you click on that it will show a menu like this;

Example of a mobile friendly menu with tap areas separated

The menu is now easy to use, the links are not small hard to touch icons, they are large boxes that you cannot miss!

At Hat Trick Media we offer "mobile friendly design packages. Here is some more information;


Your website is designed to fit on any device using calculations and percentages. Basically when a user loads up your website on their phone, tablet or pc the website will react accordingly and display a calculated page. On the page everything will be done be percentages, for example: Font Sizes, Box Sizes and Images.


The adaptive method is slightly different from the responsive method. When designing the website or event changing a current one you decide which devices you wish to target with your now mobile friendly design. You could for example just show it on an iPhone or an iPad.

If you would like to add a sprinkle of "mobile friendliness to your website then please feel free to give us a call on 01476 576 839 or email us on thrive@hattrickmedia.co.uk.