10 tips for the perfect mobile WordPress site

Published on: Updated: March 26, 2018

By 2013, more people will use mobiles than PC’s to connect to the internet.

Compuware’s What Users Want from Mobile survey in 2011 found that 57% of people would not recommend a business with a bad mobile site, and 40% have turned to a competitor’s site after being unhappy with a mobile site.

With all this in mind, you can’t afford not to optimise your WordPress website for mobile devices. Whether you decide to this via a fully responsive design or a separate mobile site, these tips will help you make things as easy as possible for your mobile users.

(Note: Some of these tips are only suitable for separate mobile WordPress sites, as responsive websites use the same content for all screen sizes. But it’s worth bearing these tips in mind when creating responsive sites too – as with all web design, you need to achieve a balance between the needs of all the different people using your site.)

1. Make your mobile site simple to navigate

Use a simple navigation structure to help mobile users find what they’re looking for. This can include:

  • Mobile-friendly navigation menu.
  • Avoid rollovers that can be fiddly to use on mobiles.
  • Provide a keyword search box for larger sites.
  • Keep everything vertical to avoid the need for scrolling.
  • Add a prominent ‘home’ button.
  • Use bold, colour etc. to highlight more important/popular links and buttons.
  • Keep is simple – aim to have no more than 7 links on each level of navigation.

2. Design for touchscreens

Most websites are designed to work using a mouse, but your mobile WordPress site should be designed with touchscreens in mind.

  • Use large, centred buttons that are easy for people with big thumbs to press – there’s nothing more frustrating than a mobile site with buttons that are too small and fiddly!
  • Add clickable padding to smaller buttons, check boxes and radio buttons.

3. Attract local people

95% of smartphone users have used their phone to find local businesses. If your website is aimed at local people, make it as easy as possible for them to find you:

  • Place your address or location in the header of your mobile WordPress site.
  • Include maps, directions and GPS.
  • If you’re a national chain with multiple branches, make it easy for users to check stock at their local store.

4. Speed it up

Mobile users typically want to find information even faster than desktop users. Design your mobile WordPress site to load fast. Reduce the number of images used and compress them using tools such as PNG Gauntlet and ImageOptim for faster load speeds.

Your mobile WordPress site should also be easy to skim read. Writing for the web is different to writing for print, so consider professional web-friendly copywriting to make sure you get it right. Or if you decide to do it yourself, here are some tips to get you started:

  • Think about what mobile users are most likely to be looking for (use Google Analytics to see which pages they’re using the most). Put this content at the top of each page and ensure it’s easy to find.
  • Replace long paragraphs of text with simple bullet lists.
  • Break up each page with sub-headings and bold text where appropriate.

5. Make your mobile WordPress site easy to look at

Mobile screens are much smaller than desktop computer monitors. To make things worse, they are viewed in a variety of lighting conditions including low light and very bright light. Make sure your mobile WordPress site is easy to view in different conditions without causing eyestrain.

  • Use contrasting colours for text and backgrounds.
  • Fit all content onto a mobile screen size to avoid the need for zooming/pinching.
  • Make buttons and links stand out using bold, shadowing etc.

6. Create an accessible mobile site

A good mobile WordPress site will work on all mobile devices and not just iPhones!

  • Use HTML5 and other alternatives to Flash, as lots of smartphones don’t support Flash. If you want to use Flash, ensure there’s a fallback options for devices that can’t use it.
  • Set up your mobile site to work on horizontal and vertical orientations.
  • Ensure the orientation can be changed seamlessly without causing your users to get lost.

7. Increase conversions on your mobile WordPress site

The main aim of most websites is to achieve conversions – whether you want your users to buy your product, sign up to your newsletter, make an enquiry, or something else. This is just as important with mobile sites, so make sure yours is designed to make conversions as easy as possible.

  • First, think about what it is you want your mobile users to do (define your conversion goal).
  • Structure your mobile WordPress site to prioritise information that will encourage conversions – for example, this might involve placing big ‘join now’, ‘enquire now’ or newsletter signup forms near the top of the page.
  • Think about the whole conversion process from a mobile user’s perspective – reduce the number of steps/clicks and make it as simple as possible; use as few fields as possible in forms.
  • It sounds silly, but it’s easy to forget that smartphones are phones as well as web browsers! Take advantage of features like click-to-call, which make it easy for mobile users to contact you at the click of a button.

8. Use mobile WordPress site redirects

If you’re using a separate mobile site (as opposed to a responsive design), use a mobile site redirect. This code automatically detects what type of device your visitors are using and sends the mobile users to the mobile site.

  • Include buttons on each page allowing people to switch between the mobile site and desktop site.
  • Provide an option to allow people to choose which version of your site they will be directed to on future visits, so they don’t have to switch each time.

9. Test, test, test!

User testing is the most important way to make sure your mobile WordPress site is doing its job.

  • Before you start – ask your users what they want from a mobile site.
  • Use Google Analytics to discover how people are actually using your site. Use Visitors Flow to see whether mobile users are navigating the site differently to desktop users. Is the bounce rate higher for mobile users – particularly on specific pages? How long is each type of user spending on the site? Use what you learn to plan an effective mobile WordPress site.
  • Once your mobile WordPress site is in place, do some user testing to find out whether it’s as easy to use as you hoped.
  • The mobile web is changing all the time. Put a date in your regularly diary to re-test it and make ongoing improvements.

10. And don’t forget your desktop site!

Now re-read this article with your desktop site in mind. Most of what I’ve said is good practice for all websites and not just mobile WordPress sites – intuitive navigation, focus on conversions, etc.

Lots of web designers believe that you shouldn’t second-guess what your mobile users want. They argue that instead, you should provide the same information to all users.

There is some merit in this approach and it’s sometimes surprising to find out how much mobiles are replacing desktops. Since many of the above tips apply equally to all websites, your mobile site should be as similar as possible to your desktop site.

However, there are fundamental differences in how mobiles work due to their use of touchscreens etc. When you’re designing for mobile, some subtle changes will help you make it as effective as possible. 

Filed under: WordPress Web Design