Image

Mobile Friendly Website

  • Introduction

  • Responsive Website

  • Make Information Easy to Find

  • Don’t use Flash

  • Viewport Meta Tag

  • Autocorrect

  • Button Sizes

  • Font Sizes

  • Compress Images and CSS

  • Switch Views

  • Conclusion

Introduction

In 2017, it was stated that mobile devices accounted for 50.3% of all web traffic worldwide. This means, while it’s all well and good having a website that people can access for definite on a desktop - it’s important to have a website that is mobile friendly too.

 

The vast majority of people nowadays turn to their mobile device to make quick searches to find something they need within that moment

 

A lot of people simply prefer to use their mobile device to search for certain things because it’s much easier and more accessible. Whatever their reasoning, they’re using mobile devices to find websites and this means it’s necessary to have a mobile friendly website.

You need to ensure your website visitors have a good, positive experience no matter how they look at and browse your website. This means making it fully optimised for all devices and ensuring that, however the visitor is looking at your website, it works efficiently and excellently.

Responsive Website

The first step to ensuring your website is mobile friendly is to have a responsive website.

 

Having a responsive website means all the content stays the same on any device, only changing the way it’s displayed based on the size of the screen

 

A responsive website means you’re not having to create multiples of the same website, and it ensures mobile users get the same experience as desktop users. A responsive website design is also great for SEO as Google stated it’s their “preferred format for mobile websites”.

Responsive websites aren’t necessarily easy to make, which is why you’ll either need a professional to help you out or look for website builders that have responsive website templates. Whatever approach you take, you need to make sure your website is responsive and can be viewed on all devices.

Make Information Easy to Find

As mentioned previously, people using mobile devices to make searches may be in a rush and wanting to find something quickly. This means you essentially need to give them what they want, straight away.

 

 Don’t hide important information away from people

 

Try to think logically and determine what people will want from your website if they’re searching for you, or something similar. Include the most important things first and/or ensure that website visitors on mobile devices can find relevant information easily and quickly.  The easier it is to find the important content, the better.

Don’t use Flash

Flash is actually known for slowing down a pages loading time. A large majority of devices may not even support Flash, specifically Android or iOS devices. If your website experience depends on Flash, mobile users on devices that don’t support it won’t be able to access your site and will miss out.

 

It’s important to try and avoid using Flash to ensure that everyone can have access to your site with no issues

 

If your website has something stopping all potential visitors being able to use the site the same, it will reflect badly and discourage people.

Viewport Meta Tag

The viewport meta tag is actually a way to control how your website shows up on mobile devices. It controls width and ensures that your website doesn’t appear the same width on a mobile as it does on desktop.

 

If your mobile website appears the same width as your desktop website, it will make for difficult reading and make it a lot less accessible and easy to navigate

 

Having a viewport meta tag actually tells browsers to fit the width of your page to the particular screen size of the device it’s being viewed on. You must add this html onto each page:

<meta name=”viewport” content=”width=device-width, initial-scale=1”>

Autocorrect

This may be one you didn’t even consider; but autocorrect can often make website forms a lot tougher to fill in. Autocorrect tries to auto complete words or sentences and will quite frequently change people’s names, addresses and so on to more common words; making it much harder to quickly fill in a form.

Turning off autocorrect is as easy as including autocorrect=off in the html of the input field. This makes for a better experience and ensures that website visitors can input their information easily, with no hassle.

Button Sizes

On a desktop, buttons are a lot easier to click and make use of. However, on mobiles it can be tough to accurately click on a button that is as small as buttons on a desktop. Visitors using mobiles to browse your website may get frustrated and find themselves annoyed, which then leads to them perhaps clicking off, if they can’t properly click on buttons, or they’re trying to click on a button and keep accidentally clicking another.

 

The simplest and easiest way to get rid of this risk is to make your buttons bigger

 

Each time you add a button to your site, view it on a mobile and determine if it’s big enough and easy enough to click on without any frustrating misclicks. The easier a button is to click, the more chance you have of people clicking it.

Font Sizes

Font size is also extremely important as if the font size is too small, visitors won’t be able to read it easily.

 

You need to use a font that is big enough to read on small screens and means that all users can easily understand what is on your website

 

It’s also important to just use standard website fonts. If you use any other font, your visitors browser might need to download it and this will slow down the loading time. You want your website to load as fast as possible so it’s extremely important to make sure your content is standard, but still high quality.

Compress Images and CSS

This continues on from the previous overall message about making sure your website loading time and speed is fast. Your imagery and CSS could result in a slow loading time, which could further result in visitors on mobile devices instantly leaving your page as it doesn’t load quick enough for them.

 

The quicker your website loads, the better

 

This is because, as mentioned, people using mobiles to search for your business or something similar may be in a rush to find something and want it instantly.

To make sure your site loads as quickly as possible you will need to compress anything that takes up a lot of space which slows loading time. This means any high resolution images and the websites CSS. Compressing them ensures your website will load much faster.

Switch Views

Whilst this may contradict everything that has been mentioned, it’s good practice to actually include an easy way for mobile visitors to switch the view back to desktop if they want to. Allowing them to personalise their view will give them a much better experience and will automatically make them feel positively about your website.

Conclusion

As previously mentioned, mobile is actually the dominate device to use for Google searches (only by a little!) which makes it very important to make your website accessible for mobile users and mobile friendly overall.

Making your website mobile friendly is not too difficult and it’s extremely beneficial, giving all users and visitors a great experience and thus a positive attitude towards your business.

 

The better your website is, the better your website visitors will feel

 

You need to give them an experience that is easy, with nothing hidden away and with no difficulty taking actions when necessary.

Think about how often you use your mobile to look at websites. It will then become obvious how important it is to make sure your website is mobile friendly.