How to optimise your website for mobile devices on WordPress

We’ve come a long way since the first smartphone, IBM’s Simon Personal Communicator, entered the market in 1994. Fast forward a couple of decades, and by the end of 2021, the number of Australian smartphone users is expected to reach 20.6 million

We now spend more time on our mobile devices than on our desktops, reading news, shopping, and browsing websites. Our appetite to search for and buy products and services online, particularly, is not slowing. 

As a result, creating a responsive website that offers a seamless desktop and mobile user experience has become a non-negotiable. 

Speaking of websites, WordPress continues to be one of the most popular content management systems globally.

As of October 2021, 42.8% of the top 10 million websites use WordPress; that’s a staggering 409 million users viewing 20 billion web pages a month. Part of the reason for this is that WordPress makes it easier to design a website that is responsive and mobile-friendly.

A responsive website automatically scales its content to work for the screen size it is viewed on. It is a crucial contributing factor to a business’s success.

That’s why at LYF Solutions, we design responsive websites in WordPress and other environments and help small business owners navigate the web design space. 

To find out how you can optimise your website for mobile in WordPress and why it’ll make a difference to the success of your business, please read on.

Why is it important to optimise your website for mobile

Consider this:

Mobile viewing is here to stay, and your business has to be ready for it!

How to check if your website is mobile friendly

When our team develops a new website for a client, it will automatically be optimised for mobile. But if you have an existing website, it pays to make sure your website performs well on all devices.  

To check how easy it is for visitors to use your site on their mobile device, you can simply enter your business’ URL into Google’s Mobile-Friendly Tool. Ideally, the result should look something like this: 

Google mobile friendly page test tool result

If your website is missing a responsive design or fails the test for another reason, then you have a couple of options to remedy this.

How to design a website to work for mobile and desktop

Think about how easy to use your website will be once it is shrunk to fit a mobile screen. Will it still be simple to navigate? 

A creative and responsive web design will take care of this. Responsive in this context means your navigation across a web page and between pages adjusts to all sizes of screens.

Creating a responsive website that offers a seamless desktop and mobile user experience

There are a few simple actions and tools to consider to get your website working well and looking its very best across all devices:

  • WordPress plugins: In essence, plugins will add new functionalities to a core platform like WordPress. A plugin such as Responsive Menu, for example, will help with functionality across all devices.

Plugins are relatively easy to add. The trick here is to find the right one. There are many plugins available out there because WordPress is open-source. The Search Engine Journal has analysed and recommended eight of them recently.

Note that when you sometimes add new plugins or features to a website, they may not always be mobile-friendly. In that case, you’ll need a developer or plugin support to tweak it for you,

  • Mobile-friendly WordPress website themes: The name says it all! When you opt for a mobile-friendly WordPress theme, a lot of the work is already done for you. If your theme is already mobile-friendly, you should not need to worry about additional plugins. Ask for a demo to test website themes so that you can make an informed decision on the one that works best for you.
  • Push notifications: Push notifications are a great way to keep mobile users on top of updates by letting them know there’s new content waiting for them. However, it’s important to note that these notifications are optional in WordPress and visitors do have the option to disable them. On the other hand, they are generally welcome as long as you don’t overload the system. 
  • The word on CSS: CSS and responsive design go hand in hand. It’s a language really, much like the better-known HTML. But where HTML takes care of a website’s structure and content, CSS will also give it style with colours, fonts and layout. In the fashion world, CSS would be the Dior adding couture to an otherwise plain garment. HTML and CSS work independently of each other. 
  • Font size matters: It’s actually not just the size that matters; some fonts are less legible than others. Choosing a ‘good’ default mobile font size means you will be able to read the body text on your phone easily, much like a print text in a book when held at a natural distance. 

A font size of at least 16 px is the standard for readability on mobile devices. Secondary text can be two to three sizes smaller. 

If your content is text-heavy and demands very little interaction, you have more room to explore sizes and styles. But whatever you do, be sure to check your design on all devices before it goes live.

Also, avoid using too many fonts; it will slow down the site and cause readers headaches. It’s best to stick to two fonts at most.

  • Responsive icons: Don’t forget about the shapeshifters in web design! The use of icons in web design is already well embedded in practice. What’s important is that they can adapt their size to the screen they are being used on without losing their shape. In addition, they must remain recognisable, even when they are small, mainly since they often also perform a specific function within your website. To take the hassle out of this design part, responsive icons can be purchased in packs.  
  • Sizing images: You’ll want images to be fluid and resize to any screen, much like fonts and icons. When uploaded to a website, images usually default to a standard width and height. Assigning a new, relative value to the width in CSS will give you a responsive design and adjust the picture’s width and height according to the screen size. It’s important to note that you’ll need to use a relative value such as a percentage instead of absolute units like pixels.  

To DIY or not to DIY

Good web design has become very much part of the parcel of solid business practices. 

We hope we’ve given you some valuable insights and tools to decide on your website’s needs, whether there are areas that could be tweaked or updated, and how to implement these changes.

We also understand that most small business owners feel that keeping up with web design and the latest tech trends is a bit out of their comfort zone. While a raft of information is available, options and the continuous innovation in this space can be overwhelming. 

This is where the team here at LYF Solutions can make a real difference! Consider outsourcing your website development and maintenance to us, so you can concentrate on what you do best – developing your business.

After a stocktake and discussing options with you, we can take care of all your web needs. Let us develop or update web pages for you that are user-friendly across all devices, showcase your business and brand, are creative and engaging, and achieve measurable and successful outcomes.  

We can take care of all your web needs and help you develop or update your website to be user-friendly across all devices. Contact us to find out more about how our team can help your business truly stand out in the digital world!


More inspiration

Good for the environment

Want to reduce your small business carbon footprint further?

To inspire your business to do better for the planet, we’ve prepared this detailed eBook with 30 tips.

We’ll send you more wisdom and news monthly which you can opt-out of at any time.