Discover how to make a WordPress website mobile-friendly by reading about how we do it for our clients. This article will help your website to look great and load quickly on mobile phones.
Why a Mobile-Friendly WordPress Website Matters
In the final quarter of 2021, people using mobile devices to access the internet, made up over half of all website activity.
If your site doesn’t work well on mobile devices, it can make potential customers click elsewhere.
So it is critical that your WordPress website:
- Looks good on mobile phones
- Is easy for people to use on their mobile devices
All WordPress sites designed by WEBsmall are mobile friendly – even our budget packages. This is how we do it!
Mobile Devices Are Different
Mobile phones are different in two ways. Mobile devices have:
- Vertical (portrait) rather than horizontal (landscape) screens
- Less processing power, which means web pages tend to load slower than they do on a computer
Your site needs to look good and be easy to interact with on all devices.
Test Your Site
Before reading further, you should test your WordPress website to see if it mobile friendly.
The first step is to use Google’s free testing tool. Choose a few random pages, including your home page. Then enter your site’s URLs for each page (one at a time) and run the tests.
Creating Mobile-Friendly WordPress Sites
There 5 ways to make your WordPress website is mobile friendly:
- Use a Responsive WordPress Theme on your site
- Choose the Right Guternberg Block Plugin
- Use a Good WordPress Caching Plugin on your site
- Select a Good WordPress Image Optimisation Plugin
- Use a Good WordPress Asset Optimisation Plugin
1. A Responsive, Mobile-Friendly WordPress Theme
The first step in making your WordPress look great on mobile phones is to choose a responsive theme. A website theme consists of all the code that gives a familiar look and feel across your website.
Responsive themes allow users to view your WordPress website on any device, whether it’s a mobile phone, tablet, computer, laptop, etc.
choose a Responsive WordPress Theme
Responsive WordPress themes help your website to look great when viewed on a large monitor as well as a tiny mobile phone screen. Your WordPress site will look great on all these different devices.
Mobile friendliness improves the user experience and also has a significant SEO advantage. Search engines like Google rank mobile friendly websites better than non-responsive ones.
My Favourite Responsive Theme for WordPress Sites
While there are many responsive WordPress themes available, my favourite mobile friendly WordPress theme is GeneratePress for four reasons:
- It allows you to make block-based headers and footers (more on that later)
- Automatically creates a mobile-friendly version of your navigation menu
- Lets you easily set font sizes for mobile devices
- It is a great WordPress theme (the best I have found) for flexibility and speed
There is a good free version of the theme available for anyone who wants to use it. Personally, I think upgrading to the Premium version is worth it.
Other Responsive Themes I Would Recommend for Great Looking WordPress Websites
While I always use GeneratePress, there are some other lightweight and responsive themes available that suit mobile devices. Quality WordPress themes that will help make your site mobile-friendly include:
2. USE Gutenburg Block Plugins to build Your Mobile-Friendly WordPress Sites
While choosing a responsive theme will help you create mobile friendly WordPress websites. You should also use a lightweight, responsive block plugin to make sure the content also looks good on mobile phones.
What Gutenberg Block Plugins Do
Blocks are what you should use when building WordPress web pages. Designers use them when creating web pages using a grid system. Imagine you are looking at a newspaper. The content is arranged in different sized blocks (rectangles). Two blocks that may appear side-by-side on a computer, map appear under each other on a mobile phone.
Quality Gutenberg blocks are the best way to create web pages that suit mobile devices. As of 1 December 2018, WordPress adopted Gutenberg blocks as the standard way to build and layout content on WordPress sites. This change was rolled out with WordPress 5.0.
I avoid page builders like Elementor. They can help you make a mobile friendly WordPress site in terms of layout. But I have found they slow down your site – especially on mobile phones. Use a quality block plugin to make your content instead.
You can use a WordPress Block plugin to make your website look good on mobile phones, while also catering for the lower processing power of those mobile phones.
My FavouriteWordPress Block Plugin
My favourite WordPress block plugin is GenerateBlocks. This WordPress plugin was developed by the same people as the GeneratePress theme. GenerateBlocks allows you to make and layout content differently on different devices. This includes:
- Setting different font sizes, padding and margins for different devices
- Layng blocks side-by-side on desktops but under each other on mobile phones
Again, I believe paying for the premium version is well worth it. You can create just about anything with the four, versatile blocks the plugin gives you, along with specific customisations for computers, tablets and mobile phones.
Other Block Plugins I Would Recommend
The only other block plugin I would recommend to help build a website that looks good and loads quickly on mobile phones is Kadence Blocks. As with GenerateBlocks, Kadence Blocks has both a free and a paid version. Both are great.
You can use both block plugins. Personally, I only use GenerateBlocks.
Other Options I Don’t Recommend
There are quite a few more WordPress block plugins to choose from, and most help you create good layouts on mobile phones. But they also make your page load slowly. And, given the lower processing power of phones, this stops them from being mobile friendly.
There are also quite a few page builders out there. Page builders are a different way to design WordPress websites without using blocks. They are easy to get the hang of – even for beginners. But I don’t recommend page builders for two reasons:
- Blocks give your far more flexibility
- Pagebuilders tend to slow down your website
But there are also block plugins that can slow down your website, including Ultimate Addons for Gutenberg and Ultimate Blocks
3. CACHING Plugins to Help Improve Speed
As mentioned previously, mobile phones have a lower processing power than computers. So, to be mobile friendly your site needs to load quickly. Google has a free tool (different to the earlier one) to test how quickly your WordPress site loads.
My Favourite Caching Plugin for Improving Site-Speed
My favourite WordPress plugin for improving the speed of mobile websites is LiteSpeed Cache. Why? Essentially because it does such a great job. But here are a few more details.
It offers server-side caching (no other chacing plugin does)
It includes image optimisation (with other caching plugins, you need a separate chacing plugin)
It’s free (which is just a bonus)
Another Free Alternative Caching Plugin
If you don’t have a LiteSpeed server, the best free option is the WordPress plugin called Swift Performance Lite.
A Great Paid Alternative Plugin
If you have a spare bit of cash, WP Rocket is the best premium WordPress plugin available. I don’t think it is better than LS Cache, but if you don’t have a LiteSpeed server, WP Rocket is your best option.
4. IMAGE OPTIMISATION Plugins to Make Your WordPress Website Mobile Friendly
People love images so you need them on your website. But images can also make your website slow, which makes it mobile-unfriendly. If you want to make your WordPress site mobile friendly, then you may need an image optimisation plugin. Image optimisation plugins speed up your WordPress site’s loading time – especially on mobile phones.
You Get a Free Pass if You Have a LiteSpeed Server
Websites running a LiteSpeed server and LS Cache, you don’t need a separate plugin for image optimisation. Just set it up within the LiteSpeed Cache plugin.
Best Free Image Optimisation for your WordPress mobile site
If you don’t have a LiteSpeed server, your best free option is ShortPixel. But, you are limited to 100 images per month.
Best Paid Image Optimisation
The best paid option is also ShortPixel. But you only need to pay if you use more than 100 images per month. The paid version is no better than the free version, you just get to optimise more images.
5. Asset optimisation plugins to Make Your WordPress Website Mobile Friendly
Code scripts, particularly code scripts written in CSS and JS help your WordPress website to look great and function properly. However, many plugins such as Elementor and Contact Form 7, load scripts on unnecessary pages. These scripts can make your site slow to load, which is a problem for mobile sites. And when they load on pages where you don’t need them to load, they slow down your website unnecessarily.
In this case, to speed up your site’s performance, use an asset optimisation plugin. An asset optimisation allows you to turn these scripts on or off on a page-by-page basis.
Note, as Caching plugins compete with each other, they are starting to include some asset optimisation. Eventually, this may make asset optimisation plugins obsolete. But for now, I still recommend using them. But you must be careful not to turn on any overlapping features.
Best Free Asset Optimisation Plugin
The best free asset optimisation plugin is Asset Cleanup. It does its job as well as any paid alternative, but it is less user-friendly.
The Best Paid Asset Optimisation Plugin
The best paid optimisation plugin is Performatters. I prefer it to Asset CleanUp simply because it is easier to use.
6. Use Responsive Plugins if They Affect the Front End
The front end of your site is what the world can see. The backend of your site is what you can see, but the world cannot. For example:
- A caching plugin operates behind the scenes – your site’s visitors don’t see it
- A contact form plugin is visible to everyone who visits your site
If a plugin generates content that is visible on your site, you need to make sure that is mobile-responsive. Here are some common plugins that are responsive:
- Contact Form – Happyforms (free)
- Gallery – MEOW Gallery (free)
- E-commerce – WooCommerce (free)
- eLearning – LearnDash (paid)
- Slider – Soliloquy (paid)
- Accordion & FAQ – Lightweight Accordion
7. WordPress Mobile Plugins
You may read about WordPress Mobile plugins. These are touted to be install, click and hey presto – your website is mobile-friendly. These plugins include WP Touch Mobile Plugin and WordPress Mobile Pack.
The first of these adds a separate mobile theme for your site, while the second turns your site into what is called a progressive web app.
You don’t need a separate theme to make WordPress mobile friendly. But, I’m not against the idea of progressive web apps – I just don’t think we are there yet.
7 Common Mistakes to Avoid
Having animations on your site that don’t meet HTML 5 animation standards
Embedding videos on your site that cannot be played on mobile phones
Having a separate AMP website for mobile phones (e.g., m.websmall.net) – it is dated
Using pop-ups and overlays that stop a visitor from interacting with your site in the way they intended
Sites that are slow to load on people’s mobile phones
Fonts that are too small to read (min 16 px) on a mobile
Buttons (touchpoints) that are too close together (affects useability)
FAQs
The answer depends upon how your WordPress site was built, how large it and how complex it is. A large site built with page builders will take more time to redesign so look great and load quickly on mobiles phones. So they will be more expensive than a smaller site built with blocks. At WEBsmall, redesign websites to be mobile-friendly. Contact us if you would like a quote.
There are two things that make a WordPress site mobile-friendly. First, your site has to look great and be easy to interact with on the smaller and different screen of a mobile phone. Second, your site has to load quickly despite the lower processing power of mobile phones. Mobile-friendly websites look good on mobile devices, yet they still load quickly.
To be responsive means your site changes (responds) to different screen sizes and orientations (e.g. a computer screen or the screen on a mobile phone). Your site does this so that potential customers can easily access and interact with your site no matter what type of device they are using. Responsive websites look different, but still good on mobile devices, tablets, laptops and desktop computers.
