How to optimize WordPress for mobile devices
Mobile devices have been placed at the heart of companies‘ digital communication strategy, supported by the high penetration of advanced phones (smartphones) and tablets.
The mobile phone is no longer conceived as a device for sending messages and making calls, but has become an Internet access tool for making purchases, consulting news, reading articles, searching for companies or interacting with other users through social networks that have their own applications for these devices.
The way we perform searches has evolved and is different if we do it from a mobile device or from a computer, since the first case is usually associated with local searches to meet the needs of the moment.
However, nowadays we use the mobile phone to search for all kinds of things and subjects. Google is aware of this change and, therefore, gives preference in Google results to sites adapted to this type of device.
The fact that our website is not adapted to mobile devices is detrimental to our ranking in Google and therefore makes it difficult for those users (increasingly numerous) who prefer to access it from their smartphone.
Fixing mobile usability errors in WordPress
If you use WordPress you may already have your website or blog optimized for mobile devices, as the latest updates to both the WordPress version and the different themes already come with this option to make your life easier.
Therefore, the first thing you should do is check that you have the latest version of both, that is, WordPress and theme.
If you’re not a programming expert, don’t panic! Seeing this message makes our bodies tremble, but don’t worry, it’s easier than it looks. In this post, I want to help you to solve some of the most common problems.
The first thing to do is to go to the Webmaster Tools, section of mobile usability and see what are the current problems that your web has to show in this type of devices:
Some common mistakes
Graphics window not configured:
The graphical window controls how a web page is displayed on a mobile device. Without a graphical window, mobile devices will display the page as it would be displayed on a computer; with the same screen width, but with the proportions adjusted to the device’s screen, causing users to have a bad experience.
The correct configuration of this element allows you to control the width and proportions of the page on different devices and thus, achieve a good adaptation to mobile.
How to solve it?
Insert the “viewport” tag on your website, specifically within the ‘head’ tag of your website, like this:
meta name=”viewport” content=”width=device-width, initial-scale=1″>
In this way, you are configuring elements such as width, height, size and scale of the graphic window, so that it adapts to the different sizes of mobile devices. To understand this:
- With Width you set the width of the viewport. By putting in the label “device-width”, we are allowing a dynamic adjustment to the size of each device, which is equivalent to 100% of the device’s screen width.
- initial-scale: Defines the initial scan. With the value 1 assigned, it will be shown correctly at a scale of 1:1 and no zoom will be applied.
To see more types of configurations of these elements of the “viewport” label, I recommend this article.
Here it is best to do it from the theme, because if you add it directly from the editor, every time your theme is updated, it will be deleted and you will have to insert it again.
For more information about this topic, you can go to Google help.
Tactile elements too close together:
It is possible that Google warns you through Webmaster Tools of this problem. and refers to the elements of your website are too small and are very close together, for example, the buttons on your main menu. I leave you this help from Google to solve it.
Plugin to adapt your WordPress website to mobile
Another very simple option is to install a plugin in your WordPress, at this point I recommend without a doubt the WPtouch Mobile Plugin.
It automatically creates an independent version of your website optimized for mobiles, respecting and leaving intact your computer version (i.e. your WordPress theme).
For mobile users, the site will display a different theme adapted to this device. There are several themes available to choose from (if you use the pro version), but the one that leaves you with the free one is very good and allows you to configure basic options such as the menu the user will find: