Tips For Making A Website Easy To Use On Mobile

It’s often forgotten that the majority of people visiting a website won’t be doing so through the desktop browsers the site was likely designed on. Although PCs and Macs are essential for formulating web pages and uploading content, audiences generally arrive via smartphones and tablets. As a result, making a website mobile responsive has evolved into an essential aspect of successful site design.

Making a website mobile friendly used to be impractical, inspiring a transitional period of stripped-down m.dot portals containing prominent “click here to visit our desktop site” links. Fortunately, the days of limited mobile functionality were soon banished by 4G and responsive website templates. These load quickly even over sluggish wifi connections, resizing automatically according to each device screen’s pixel width.

Because search engines now grade sites according to how usable they are on mobile devices, making a website mobile friendly has become more important than ever. These are some of our tips for ensuring a seamless mobile user experience on phones and tablets alike:

Use plenty of white space

There’s an understandable temptation to squeeze in as much into your on-screen real estate as possible. However, less is most definitely more when it comes to drawing people’s attention to a page’s most relevant parts. Swathes of text and superfluous images (especially generic Creative Commons Zero ones) confuse audiences, preventing them from identifying key takeaways or core messages.

Deploy large buttons

Diminutive or closely-stacked buttons are annoying, even on desktop web browsers where the precision of a mouse is available. On a smartphone, they’re impractical to accurately tap with a finger or thumb. Buttons should be large, well-spaced and clearly labelled. Plus, if someone does hit the wrong tab, returning to the previous page must be quick and easy.

Minimise written content

Few people read lengthy terms and conditions documents, and the same principles apply to rambling web text. Mobile audiences are particularly unlikely to wade through long descriptions, so pare back text wherever possible. Put USPs front and centre, break up paragraphs with subheadings, and use bold or underlined text to highlight key points.

Simplify navigation

That doesn’t just mean hamburger menus in lieu of top menu bars. Mobile browsers struggle with multiple tabs, and split-screen browsing is often impractical. Try to minimise the number of pages, and don’t block navigation with interstitial pop-ups. Ecommerce sites, in particular, should always enable customers to continue shopping or review their baskets again before completing a purchase.

Reduce unnecessary elements

Every cascading style sheet, WordPress plugin and uncompressed graphic has to be downloaded over wifi or 4G. Spend time cutting back on the site’s programming and contents to eliminate flab. Set graphics to display as a percentage of the screen rather than at set pixel widths, remove contact forms requiring anti-spam plugins, and avoid graphical transitions.

Use large fonts

Stick to pre-installed sans serif fonts, making a website mobile friendly on any device without requiring plugins. Use a font size of at least 14pt, so audiences don’t need reading glasses. Sentence case and Title Case are easier to read at a glance than capital letters, which is why road signs use title case. Menu button text, in particular, must be instantly readable.

Remember the direction of travel

Compressing a 1920-pixel desktop display onto a mobile site pushes content below the visible first screen. Since audiences have to scroll down, don’t let pages become bloated, necessitating extensive swiping to reach bottom menu bars or Next buttons. Arrange content in descending order of priority, and crop anything non-essential off the bottom.