Build a mobile friendly website

So, you’ve followed the advice to create a website for a small business but now you’re wondering if your new shiny site is Mobile friendly?

Being friendly for mobile users is vital for your business, in fact if you just cater for desktop then you’re potentially losing 61% of customers. Being mobile friendly can no longer be ignored.

Thankfully it’s not too difficult to build a mobile friendly site and most modern sites are sympathetic to the device they are viewed upon but just in case you need a few extra pointers we’ve compiled this list to get your mobile site truly ready for any device.

Device Statistics

Statistics that matter:

  • Mobile e-commerce sales hit £2.4 billion in 2021
  • 6.8 billion mobiles in use worldwide
  • In some countries 80% of web traffic is mobile
  • 61% of mobile users will never return to a website if it is not mobile friendly

Without further ado let us get started on some of the key factors in being friendly for mobile devices.

Responsive design

Responsive design is a critical aspect of website design, a responsive site will adapt to the viewers device. That means you can build only one website, not a separate site for desktop, tablet and mobile. Cool huh!

2014 was crucial moment for mobile devices, it was the year that more mobile users accessed the internet than desktop users, that may not seem a big deal, but it meant that finally site owners had to do something about mobile devices. If you didn’t have a site that worked on mobile, then you were losing out.

Navigation

No longer will that cluttered navigation bar be tollerated.

Your users are looking for a clean, simple experience so you’re not going to be able to just squeeze that 10 item navigation bar across the 400 pixel width and expect them to like it.

Most mobile sites declutter their navigation by using a ‘hamburger’. This tidy little icon allows the user to expand and shrink the navigation links when they choose. If you don’t have this then you’re probably going to need to get it.

Bandwidth

One of the greatest things about mobile device is the access to information nearly anywhere. So, if you’ve got a connection, you should be able to load a webpage.

Out on long walk in the lake district and want to see who won the champions league final? Pull out your phone and have a look.

The only issue for you as a business website owner is that all locations don’t have super-fast internet bandwidth, you may get 5G 100mbps in central London but you sure aren’t getting that on top of Scafell Pike in a thunderstorm. That leads us to talk about page size, now it’s easy to design for desktop and high bandwidth, most people don’t even consider the end users download speed these days. Back in 2005 it was good advice to keep webpage size below 100kb including images, that wouldn’t do for today and a JavaScript file can bust through 100kb. Like we say, not an issue on your desktop in your cosy home in Chelsea but this won’t do for mobile devices.

So, it’s worth understanding the page size on your site and trying to reduce the amount of file and size that need to be transferred to the users mobile.

JS and CSS

Consider combining and minifying any JavaScript and CSS file to reduce wasted space and trips to and from the server.

If you have access, then switch on dynamic compression on the webserver.

Images

Compress your images and if you have the technical know-how then take advantage of HTML5 SrcSets, these allow you to suggest various file sizes depending on the browser and device. The browser will download the image that best suits the device size.

Video

Think, do you really need to serve video to the users on mobile? If you do, then consider serving a 720p version and not that 4k behemoth.

Appearance

Apart from great UX there are some other design considerations that need be thought through when showing content on a smaller device surface.

Font size

Makes sure your text is still legible, not too large and not too small. This is where a mobile first strategy is beneficial when build your stylesheets (CSS). Building for the smallest device first allows you to get it right for the largest audience, mobile should never be an afterthought.

Element visibility

Show and hide elements dependant on screen width to keep the content relevant for your mobile audience.

There is however a downside to this approach as the content still must be downloaded even though it’s not shown, this eats up valuable bandwidth and slows your load times. There’s no easy way around this without inspecting the user-agent header that accompanies the users request. A bit techy for most and a bit unreliable too.

Using the correct markup

User inputs

If you have input fields in your page that expect the user to choose a number, or if the box can only accept email or any other type then you can assist your user by setting the correct type on your Input element.

To collect information from the user, mobile devices show a keyboard so the user can type what they need, there are various types of keyboard though, so, for example if you tell the device the input is for the email type it should show a keyboard that has the relevant characters for email (as below).

To tell the mobile device to use the email keyboard you would need to add type=”email” within the input tag as below:

<input type="email" />

You can also make life easier for telephone numbers or credit card information by using the type=”tel”.

<input type="tel" />

Additionally, for IOS devices there’s the extra pattern attribute to show the succinct 0-9 dial pad:

<input type="tel" pattern="[0-9]*" />

It’s all been a bit inconsistent up to now, but luckily there’s a new kid on the block to help us all out.

Meet InputMode, this is slowly becoming adopted by all the main browsers and is already available on all main mobile operating systems, simply add inputmode=”numeric” to the input element.

<input type="tel" inputmode="numeric" />

Semantic markup

You can go the extra mile for users by helping the browser recognise what items on the page mean, so, rather than a set of numbers that could mean anything you can tell the browser this is a telephone number. This will allow the browser to prompt the user to make a phone call when the number is clicked.

Markup for this would look like:

<div itemscope itemtype="http://schema.org/Person"> <p>Telephone: <span itemprop="telephone">01111 1111</span> </p> </div>

Conclusion:

We now see how important it is to cater for the greater than 60% of users that browse the web on their mobile phone.

What simple steps you can make to have a mobile friendly website that your customers will love.

Remember, happy customers = happy companies.

Do you want a Free Business Website?

At Yoodu that's all we do...

Webistes for you and your business.

Get started absolutely free.

Free forever. No credit card needed.

Create a site now