OPTIMISE YOUR WEB PAGES

You can make a number of adjustments to the layout of your Web pages to ensure they display well on a small phone screen.

LANDING PAGE

Eliminate everything that isn’t absolutely necessary for the landing page. The more there is, the longer it will take to download, and the more there will be to distract your visitors. Distracted readers leave.

Keep in mind the way people are likely to use your site on a mobile device. They may be looking for your location or how to contact you to get a quote or make a booking, so the easier it is to access this information the better their experience. To this end, place your business name, contact information, location and – if relevant – a link to a map on the top left of the landing page.

IMAGES

Don’t position large images at the top of the page as it dramatically slows the loading – unless of course it’s part of a photo gallery. Crop each image tightly and keep images small. The smaller they are – in terms of both dimension and download time – the happier mobile customers will be. Remember that download limits apply to mobile networks and users don’t want to use their entire allocation, or pay extra, for downloading excessive images or navigation icons. A good rule of thumb is to restrict individual images to a maximum of 12 KB, and the total size of a Web page – including all images, HTML, CSS, and JavaScript – to 100 KB at most, but optimally 50 KB.

GIF files include an index of the colours present in the image. This index can include more colours than are actually displayed, so reducing the index to only the colours present in the image produces a further reduction in the file size.

ALL PAGES

Replace words with conventional mobile icons where possible for tap to call, to connect socially or to find the menu.

Position navigation buttons so users can easily find what they’re looking for without a lot of clicks or scrolling. Ideally, your site should be navigable with one thumb and require no pinching – people want the ability to navigate with their ‘phone hand’ without using their other hand.

Have large, touchable buttons to accommodate ‘fat’ fingers. An adult’s average index finger is 15 to 20 millimetres which translates to 45 to 57 pixels. So, ideally, allocate at least 45 pixels of space to buttons or tap elements. This ensures the targets on screen are easily selectable and reduces the incidence of accidental taps.

Short URLs are the ideal when they have to be typed in, but conversely a long link is actually easier to tap onto so, where possible, use three to five words for an embedded link.

Use larger font sizes – say 16 point – as segments of text on a cell phone can become difficult to read. Experiment with different fonts. A popular belief is that sans serif fonts (which don’t have the little flicks at the ends of each character) are easier to read, but there’s no conclusive evidence about this. Aim for between 30 to 40 characters per line, and wrap any long strings of words with a word-wrap style so the text will break to the next line rather than running off the page, enabling the user to see the whole text without needing to scroll around.

Position key information ‘above the fold’ (i.e. the part of the page visible on a device without needing to scroll). However, when it comes to articles, don’t break them up into multiple pages. While it can be difficult to scroll on a phone, scrolling is generally easier than clicking.

Change certain form input attributes – very easy for someone with a knowledge of HTML – to make life easier for mobile users. If your Website uses input fields to request a user’s name and address, switch off ‘auto correct’ and switch on ‘auto capitalise’ as this saves the mobile user having to toggle the caps key for each word. For the email address, use the emailspecific input field so the user is presented with the ‘@’ key without having to search for it.