How To Optimise Websites For Mobile, WordPress
Make sure to use a mobile-first theme from the WordPress library when building your site look at how your website layout looks like on mobile and tablet formatting. Make sure the menu is on the right side of the screen. If there are any buttons, they should also be on the right side of the screen on mobile. With mobile-first themes, all the formatting and design is already in place to be mobile-friendly. Most users surf the internet with mobiles over desktop, and this is why as per the Google guidelines, it is now mandatory to have a mobile-friendly functionality on your site.
What does mobile-first mean
The overall layout of your site should be properly adjusted to fit the screen of all mobile devices. It should be visually and technically adjusted.
There are a plethora of free mobile first themes to choose from so do not worry it is easy to find a theme that fits your requirements.
Your site should have text, buttons and your logo adjusted to fit the screen of any mobile device. The text should be readable without using the enlarging feature of zooming in.
Because most people hold their phones and operate them with one hand the buttons and menu should be reachable with a users thumb. Usually buttons and menus are placed on the right side of the screen for this reason.
Your site should be visually appealing on mobile. Sometimes you will have to adjust your logo to a smaller size, choose the items that remain sticky. For example I have disabled the sticky header for mobile devices because it takes up too much of the screen.
In your WordPress customiser you can look at your site in mobile, tablet and desktop so remember to do so every time you make adjustments to your website design
How do you check if your site is mobile-first
Making your site mobile friendly is must-do for all websites. If your site is not mobile-first then your site will be penalized by Google.
With Google Search Console you can easily check if your site is mobile friendly and if any user on your site has any issue reading your blog you will be notified. If you have not done so already go make an account with Google Search Console today! Hahaha….. me sounding like a shady salesman.
For anyone who has not yet connected their website with Search Console watch this tutorial YouTube video by WPBeginner.
If you have already connected your site with search console then go to your Google Search Console dashboard and click on mobile usability on the bottom left of the menu.
After clicking on it you will see the results of how your site was mobile-friendly.
The best part of this is that Search Console will send you an error message via email if any user has issues on your site while using mobile. The “valid” box means that visitors were able to navigate through your site on their mobile devices without any problems.
Search Console is great for the long haul but it will not tell you how fast your site loads. Check the speed of your site with PageSpeedInsights by Google. Yeah you think your site is super fast because you have opened it in your browser fifty times so now it is cached in your search engine.
The most awesome part of PageSpeedInsights is that you do not need to make an account with them. All you have to do is type in your URL into the search engine and then click on” analyze.”
Like all things Google the results on why your page is slow (if it is slow) will be incredibly vague. Still, after running the test they will give you a list of possible issues that you can look into.
Page speed is not a huge factor for SEO but it is something you should keep an eye on. Here is a link to PageSpeed Insights (this site is by Google) and you have two options of analysing your site for mobile and desktop. The desktop will always be faster than the page speed in mobile.
What are the best free themes for a mobile-first experience?
Now I do love Kadence WP these days because it is fast and it has premium features for free. It has as yet not been indexed into the WordPress theme directory, so you will have to download it from the official website.
Here is a list of the best mobile first WordPress themes that are fast and you can get great value for free!
- Kadence WP
- Astra
- Uncode
- uDesign
- Avada
- Spacious
- Neve
- Enfold
- JustBlue
- Hestia
- Divi
- Sitka
- H-Code
- WooShop
- Profile Theme
As a new blogger choosing a theme can be a huge hurdle but find the one that suits you. I suggest looking at at least three before choosing the one you want.
How to make small optimisations on your site that help make your site mobile-first
In 2020 a big majority of websites were formatting their content in the middle of the page without anything on the sidebars. People thought it was a trend but in fact this was done because it is easy to convert for mobile.
In the same way when you put up too much in your side bar it just increases the scroll time of the user without any added benefit. Do not put up comments, a menu, not more than one ad, and anything else in your sidebar.
Centre your content as well as your media. So if you put images and video into your posts then always put them in the centre of the page.
Check to see if the menu in mobile works. Some themes will automatically convert all the pages in your header and put them in your mobile menu. Other evil themes will leave your menu empty so make sure to visit your site in mobile and click on all the buttons to see if everything works.
It is easy to find errors if you put yourself in your viewer’s shoes. Ask a few friends and family to look at your site on mobile to give you feedback.
Make your text mobile-first
Write short paragraphs in you your posts. When you write shorter paragraphs is easier to read. On mobile large chunks of text make it seem as though there is too much to read.
Ideally sentences written in simple English and short paragraphs is the best formatting for mobile viewing.
What is could be making your site mobile-unfriendly
Plugins! Yep they do add many functionalities to your site but apart from slowing down your site they are a security threat.
So have as few plugins at one time on your site at one time. Keep a maximum of 10 plugins.
A theme that is not made for mobile could be causing all number of problems, buttons, fonts and all other features can be too small to see or click on.
Make your design as clean and simple as possible. A complicated design may look good on your desktop but in mobile it will not look as good.
Quick mobile first checklist
- Connect/index your site with Google Search Console
- Use PageSpeed Insights to check your load time for mobile and then make adjustments to make your mobile experience faster
- Always look at your site on your own mobile device
- In your WordPress customiser look at what your site looks like
- Write short paragraphs
- Keep plugins to a minimum
- Enable caching on your site
Final thoughts
If your current theme is not mobile-friendly you should just change it now. It is better to find a WordPress theme that is mobile-first instead of fighting a non mobile friendly theme. Eventually all themes will have the mobile ready features because this has become a requirement.