Website Advice

The Best Practices for a User-Friendly Mobile Website

Creating a mobile-friendly website is never an easy task. They’re many things to consider and if you’re not an expert – there may be certain things you’re overlooking. It’s important to take into account design techniques and best practices in order to have a website that’s easy to navigate on any device.

As the digital world continues to change, more and more users are stepping away from laptops & PCs and do their internet browsing on a mobile device. In fact in the second half of 2020, mobile devices (excl. tablets) generated 51.53% of global website traffic. (Source Statistica)

As this percentage continues to grow, it’s now more important than ever to ensure your website is up to standard. Search engines, such as Google & Bing have started to penalise websites that aren’t optimised for use on mobile devices. As a result, your website may be losing traffic without your knowledge.

However, we’re here to help. By guiding you through some best-practices and sharing some tips about how things work – we hope you’ll be able to make better decisions about your online platform.

Advice About Navigation on Mobiles

Mobile devices & tablets rely on our fingers to move around a site or app. As we scroll up and down – the power really is at our fingertips. You may think this wouldn’t be much different from using a computer mouse but you’d be pleasantly surprised.

There’s a lot of things we don’t even think about while we use our mobile phones online. For example pinching to zoom in on a site. How does this work with your website? Do users have to zoom to see certain content? ‘Pinch zooming’ shouldn’t be something a visitor uses regularly to see text and images on your site. Everything should appear clearly and easy to read at all times – if users need to zoom in to read a paragraph – this likely means it’s being ignored.

This leads us onto viewport width . As screen sizes are different on separate devices, best practices dictates that we design in a linear fashion. This means we alter the width of our site to fit the device being used. This way users should only ever scroll down a mobile site not from side-to-side. Having the ability to scroll in more than two directions unsettles the user. It’s a bit like being on a train you only want to go forward and back.

The other thing to consider is menu navigation. You may notice that many sites (on mobile) don’t show the menu as soon as you arrive on their homepage. Instead you’ll find three lines in the top left or right corner which when clicked shows the menu in full. This seems to be the best practice for menu navigation around your site on phones as it takes up less space and is visually appealing.

Prioritising Content to Show on Mobile Devices

Making it as simple as possible is the aim of a mobile landing page. You want to get users from A to B as quick as possible without lots of filler in between. This is why many developers will write alternate content for mobile and desktop views, as with desktops it’s acceptable to put in a little bit more information.

However, on mobile it’s important to pear back and keep it basic. If you have a gallery of images, consider just showing the essentials or even better have a sliding showcase of images.

A smart idea is to scroll through your site counting how many seconds it takes for you to get from top to bottom taking in all the information. Remember the 15 second rule – after this time most users have switched off and have a greater chance of leaving your site. If you don’t get your essential message out in 15 seconds you may need to redesign how your site looks.

What to focus on when looking to optimise content: Look at all your call-to-actions as these will usually be what users are looking for.

  • Product Search
  • Contacting You
  • Where you’re located
  • Downloading An App
  • Login To Their Account
  • Placing An Order/Booking An Appointment
  • Reading Your Blog

These are some possible call to actions you may want your users to perform while on your site. Ensure that on mobile devices that these options appear immediately once they arrive on your landing page.

Testing Mobile Pages on Google Search Console

While you’re building your mobile site, you can check its progress on Google Search Console. You may need to do a little bit of backend setup but once you’re up and running – see how Google ranks the mobile usability of your site. If there are problems, Google will highlight these and ask you to make amends. This is also a helpful way to increase your search ranking!

Another trick to testing, is to use the Inspect tool on Google Chrome. By left clicking a website and scrolling down to Inspect, you can call up a panel which shows all the backend code on your site. On the top bar you can choose between different devices and see how this looks on each.

On Safari, you can enable the Developer Menu by going into “Safari” > “Preferences” > “Advanced” and clicking “show Developer menu in menu bar”. A new menu item will appear called Developer in there you can “Enable Responsive Design Mode”.

While testing you’ll want to ensure that mobile web design is shown in a user-friendly way on some of the most popular smartphone devices.

This has been our quick guide to creating a user-friendly mobile site. If you’re looking for some expert analysis of your site check out our Free Digital Consultation page or get in contact with us today.