4 best practice tips for your mobile website design

Let’s chat about how your website should perform on mobile. Sure, your website is responsive (content stacks neatly on smaller screens) but is it actually user friendly? And is it effective in giving your audience what they’re looking for, quickly and clearly? But before we look at some best practice tips…

Why should you care about the mobile version of your website?

First up, head to your Google Analytics account. On the Home screen of your account, scroll down until you see the stats for “What are your top devices?”.

You’ll see the percentages for Mobile, Desktop and Tablet for the past 7 days (you can also change it the past month). 

• Does the percentage for Mobile usage surprise you? 
• Is it higher than Desktop usage?

Chances are (but not always), that more of your audience are visiting your website on their mobile phone. And that can take us by surprise.

Now think about the last time you actually viewed and tested your website on your phone. And I mean, really tested it. When was the last time you went through all of your main pages on your phone? If you haven’t, guess what? Your audience has.

We can often get obsessed with how our website looks on a desktop. I get it, there are so many more options available to us on bigger screens. We can have columns, pretty background images, and those things aren’t as important (or possible) on a phone.

Best practice tips for your website on mobile

Everything comes back to the user experience and that’s true for your website on desktop and mobile. Information needs to be easy to find. Your menu needs to be simple. These things help make the mobile experience a straightforward one. 

You know yourself, that when you visit a website on your phone, you definitely don’t want to be scrolling for ages to find the info you want.

Make the most of ‘above the fold’

This is the area of your website that your audience sees before they scroll down through your content. It should contain your logo and menu ‘hamburger’ icon. 

It will also contain your banner and you could really optimise the space by including a button link to your key service, to get in touch or to Shop Now if you run an online shop.

Think about the most important Call to Action on your website and add that to the mobile version of your banner. Make sure all of it is visible to your audience BEFORE they start scrolling.

If your website has a lot of information on it, consider adding a search function to the header area of the mobile view. Some of your audience may prefer searching for something rather than scrolling through your pages.

Make your mobile menu simple

If your main menu has a lot of links on it, consider simplifying it for mobile. Your audience would prefer this over having to read through a long list of options to find what they’re looking for.

Rather than listing all of your services, consider only having one link, such as “Services” or “Web Design Services” to give more information. You’ll need a main services page for this to work and it’ll feature each of your services with Find Out More buttons.

Make your links touchable (clickable)

Fact is, we all have different sized index fingers and we all have varying degrees of mobile mastery. With any buttons or text links, make this a major consideration. Provide enough space around the link so that it can be touched (clicked).

This is often most applicable in the footer area of your website, such as quick links, email link and a phone number link. Make sure there’s plenty of spacing between these.

Make your phone number clickable

Because your audience is viewing your website on their phone, they expect to be able to click on your phone number and their phone will start dialling. 

Makes sense, right? 

But this is something that is easy to forget and also something that can really irritate your audience if it’s not available to them. Be sure to include the area code (if it’s a landline number) and a country code (especially if a client needs to call you from overseas) so that there are no issues with calling.

If you were to code it, it would look like this:

<a href=”tel:+61412345678”>0412 345 678</a>

This is how the number appears on your website: 0412 345 678

This is the number that your phone will dial: +61412345678

Your audience and Google will love you

Once you make your website’s mobile version more effective, your audience will love you for it. They’ll appreciate the effort you’ve put in to making their mobile experience stress free and easy.

You know who else likes a mobile friendly website? Google. Those smart little Google bots are checking out your website’s mobile experience just as much (if not more) than your desktop version.

So back to the question: When did you last check out your website on your mobile? Even if you haven’t, your audience has. Time to hop onto your iPhone!

You can find more website tips in the Website Workbook: