How do I optimize my website for mobile?
- February 17, 2020
- Posted by: Jimmy Ombom
- Category: SEO
SEO Mobile Optimization
For SEO positioning on Google, it is therefore essential to have a well-optimized mobile version, otherwise, you risk big problems and a noticeable drop in positioning and ranking.
Moreover, by now a large slice of users is accessing the various websites from their mobile device, tablet or smartphone.
In this article I show you how to optimize your site on mobile devices perfectly for SEO, to get good visibility on Google and results in terms of traffic.
Importance of Mobile SEO
Visits from mobile devices now exceed 70% from users throughout the world. An important percentage that leads to the need to develop a strategy in this sense.
Furthermore, recent research has shown that the average time spent browsing on a smartphone is about 57 hours a month, or about 2 hours a day.
South Africa has 51% smartphone penetration which contributes to the country’s online figures.
“South Africa (59%) is the only country in the region where at least half the population is online,” the report stated.
The other five countries sampled have less than 40% penetration: Ghana (35%), Senegal (34%), Nigeria (32%), Kenya (30%) and Tanzania (13%)
The web has depopulated all over the world also thanks to the important contribution of mobile devices, which have led to an overall 51% increase in traffic in the last 10 years.
Internet penetration is at 90% in Kenya. According to the latest statistics by the Kenyan Communications Authority (CA), broadband internet take up as of September of 2017 rose 14.3% in comparison to previous years.
The number of internet users has increased from 45.4 million to 51.1 million users, with the popularity of mobile Internet being the biggest factor behind this rise.
This same research also highlighted how:
- almost 33% of Africans use a smartphone (lower percentage than many other European and world countries);
- 82% of Kenyans surveyed connect from mobile;
- 74% also use PCs;
- 63% use a desktop computer.
This statistic shows how Kenyans use multiple platforms to connect.
All this overview to show you how those who stay out of mobile optimization is destined to stay out of the market in a short time.
Conversion rates for Mobile E-Commerce
The SmartInsights company recently analyzed how the conversion rate of e-commerce from smartphones amounted to about a third compared to the desktop.
This means that the customer is even more inclined to buy from a PC rather than from their smartphone.
This probably happens because many users do not yet feel safe to conclude a smartphone contract where, instead, the fastest and most fleeting visits are made.
Another plausible reason is that mobile websites are still too little optimized and that browsing from small screens is still difficult due to too small text characters.
It seems clear, therefore, that the optimization for mobile is also fundamental for another reason than those set out above, or about the possibility of recovering that conversion rate lost concerning e-commerce, acquiring a good advantage over the competition.
At this point, you might ask yourself: but how do I know if the “mobile” problem also affects my website?
The first thing to do is take a look at your site’s metrics.
Therefore, open Google Analytics and measure the statistics of your website by checking:
- how many users enter your website using a mobile device (to do this you need to click on “Public”, then on “Mobile device” and then on “Overview”);
- in how many they buy from your website and what is the conversion rate from mobile devices (to do so in the same table further to the right, use the drop-down menu to filter the objective you have set).
Once these analyses have been carried out you should have a precise picture concerning the number of users who visit your website from mobile and to those who complete purchases or requests for quotation (always from mobile).
Most likely the numbers you will get will fall within the average of the analysis I gave you a little while ago, but do not be discouraged, because in the next few lines I will show you how to proceed best for SEO optimization of the mobile website.
- SEO for Affiliate Websites: Increase Your Web Traffic For Free
- How Does SEO and Social Media Work Together?
- What are the different types of SEO?
Website SEO optimization for Smartphone and User Experience
The term user experience (UX) refers to a field of web design that mainly concerns the use of the website by a user.
The first requirement for good user experience, therefore, is to have good usability: all the functions that the user wants to access the user must be simple and reachable.
In principle, a site must respond to the needs and interests of the user and be easily usable both from PC and from a desktop.
So let’s see together how to optimize the user experience.
Optimization of Layout Elements and Responsive Design
Let’s start with a fundamental assumption: the screens of mobile devices are very small.
For this reason, it is essential to forgo the graphic elements or layouts that are not indispensable.
Furthermore, in the mobile version, the content should be placed in a single central column that is wide across the screen and, above all, that does not force the user to scroll horizontally.
Using a web design of this kind, text and graphic elements expand depending on the size of the screen and you can enjoy the best of the contents.
This type of technique is called responsive design and is a feature of those websites that can adapt automatically to the device used.
Be careful because with a web design of this kind you will have to use a larger font than the desktop version, otherwise, it will be unreadable for the user and therefore for your potential customers.
Mobile Version and Responsive Website
Recently, Google has released guidelines regarding the transition from mobile to responsive.
The difference between the two versions is that in the case of a mobile version the desktop site is served in a subdomain. In the second case, instead, the desktop and mobile version coincide because a fluid layout was used.
You must know that sometimes developers and web designers, if they find themselves in front of a particularly complicated site, end up turning to a smaller version of the site, leaving out most of the content.
But Google’s Mobile-First Index penalizes sites that leave relevant content out of the mobile version, resulting in traffic loss.
The basic advice, therefore, is to create fluid layouts at the start.
We are no longer in the era of static layouts: now images, menus, sidebar, footer and site content must be adaptable to the size of the device consulted.
An escamotàge to get to this fluidity is to base style sheets (CSS) on percentages and not simply on pixel-related measures.
I’ll give you an example: if I have a width of 980 pixels divided into two parts (which in this case will be area content and sidebar), I will agree to assign the extension in percentage (therefore 80% against 20%) and not in pixels (700 against 280).
In this way, the screen will naturally adapt to the text contained.
In an age where total web optimization is aimed, the loading times of a site appear to be decidedly fundamental, both to prevent the bored user from waiting too long to leave the page and for SEO optimization.
The speed of loading a site, in fact, is one of the aspects that Google positively takes into consideration for positioning on search results.
Short loading times, therefore, allow an exponential optimization of the user experience that will not have to wait for useless time and, on the contrary, will be happy to have saved precious time.
I know what you’re thinking: “All very beautiful. But how can I increase the loading speed of my website? “. Don’t be discouraged because the answer to this question is very easy.
Just delete all the elements that slow down the loading of the site, thus compressing the images, videos and the most complex graphic elements.
To this, I advise you to add a good optimization of the code which must, however, be performed by an experienced programmer.
Google has also recently launched a new technology, the AMP (Accelerated Mobile Pages), which speeds up the loading of content on mobile devices.
Remember that those who surf from a mobile device usually do it for a practical matter. The strength of mobile is precisely this: to browse from any network using the data on the web.
However, sometimes the network quality is not very high and the sites take a very long time to load.
And it is in cases like these that the user is led to abandonment.
A good way to speed up your website, therefore, is to use compression tools (an example is GZIP, which reduces white space and decreases file size).
Furthermore, scripts must be minimized to avoid slow loading (which is often caused by Java).
All the images, moreover, as already said, must be optimized, setting the cache so that the user has a version already hosted in his browser and no significant changes are displayed.
If you use WordPress many plugins perform this type of operation
Google Mobile Optimization Test
These are two quick and free tests, which can help you quickly identify and resolve the main problems.
Search and navigation
Let’s say that in the desktop version of a website no problem arises with the construction of the menu, which can be easily complex and full of features.
On mobile, however, you need to focus on research, which is fundamental for the user who wants to reach the content they want with just one click.
The search bar, therefore, must be positioned in excellent view in the responsive version of the site.
Also, make sure that it provides reliable results while avoiding potential user abandonment.
Links and Buttons
Buttons, call to action and navigation links in the mobile version must be visible. This means that they must be large enough and allow interaction even with very small screens (they must, therefore, be adapted for this purpose).
Google Mobile-First Indexing
While the graphic elements can be waived with a view to mobile optimization, the content is not at all.
The customer wants to get information in the same way from your site in desktop and mobile versions.
To this is added a technical reason: Google in 2017 has started Mobile-First Indexing, or the search engine takes into account the content in the mobile version for indexing.
This means that if you delete the content in the smartphone version, that content will not be indexed by Google even for the desktop version.
It is important, therefore, to focus more on the other points I have illustrated to you and to maintain, instead, the content present within your website almost unchanged.
Maximization of Functionality
To be able to keep the content unchanged, therefore, you will need to focus on the compression of the navigation section.
I advise you to make the menu take the form of a “hamburger” and eliminate the empty spaces present in the desktop version (this will allow you to gain space to preserve, instead, the indispensable elements).
If you have an e-commerce, compress the menus in the main navigation bar. A drop-down menu will replace the space dedicated to the personal account and the display will have to be occupied by the products with photos in the foreground and keys that lead to the purchase directly.
You better know your visitors
Google Analytics can be a great way to get to know your visitors better.
My advice, therefore, is to use Google Analytics to know the origin of the traffic, the keywords that bring the user to your website, the most clicked pages and the statistical movements of the users.
This will allow you to identify those areas that are weak and those that are not, optimizing the website and moving it in a very specific direction.
Do not neglect the industry news
The web world is constantly evolving.
For this reason, every web designer and every SEO specialist must periodically identify the changes in the sector and find out about any critical issues that can be an obstacle for a correct indexing and SEO positioning of the website on Google.
Always be informed about changes affecting Android, IOS, as well as the main mobile devices.
The use of a backward solution, in fact, could result in a serious error and, on the contrary, the principles of speed, usability, and functionality (which we will deepen in the next paragraph) must always be respected.
On the web, changes take place on the agenda, often upsetting the sector. For this reason, it is essential to stay informed and move accordingly.
A tool that Google uses a lot on viewing websites from Mobile is the “test for visibility”.
With this tool, the search engine tells you that there are no navigation problems on mobile devices.
But what are the navigation problems?
It is useless to tell you that to navigate from most smartphones you use your finger, and therefore the touch.
Therefore it must be possible to activate all the controls with the fingertip.
No apparently clickable areas that, instead, are not activated once pressed, but rather worked on navigable areas with arrows, browsable slides, and elements where the use of the touch is facilitated.
Remember that your final recipient is always the user in flesh and blood and the easier it will be to navigate the site, the more satisfied he will be.
A condition that will make it easier to buy and that will lead, for a variety of reasons, to the search engine to improve the positioning of your website.
On the contrary, if the main features are unreachable, the customer will not know how to get what they want, with a consequent decrease in trust in the site and the possibility of purchase.
To make a website touch-friendly you need to use some Java Scripts that can be easily found in various open-source libraries.
SEO Tools for Website Optimization for Mobile
In this paragraph, I will indicate you some sites that make available free useful tools for the optimization of the navigation from mobile.
For resizing and image optimization I suggest:
And finally, for script compression:
Principles for Mobile Navigation
As I told you a few lines ago, mobile browsing must meet the requirements of:
If your website is very minimal and without particularly relevant elements this is not a bad thing.
Some sites, in fact, well designed and very simple, have the advantage of being navigable in a decidedly easy way both from desktop and mobile.
In this sense, it seeks to privilege simplicity by allowing the user to make quick choices without giving up the visibility of the content and an interesting and captivating look on the site.
If the user can move freely and simply within the site, this means he can make his choices, move on, go back, without running the risk of being lost.
Your site must also be fast, so as not to risk abandonment by the user who does not want to wait too long and functional loading times or respond to the wishes of the navigator.
Also, remember that:
- many users use the telephone: the possibility of navigating between websites at any time is a growing trend. According to an announcement released by Google in 2015, it seems even that mobile searches are greater than desktop ones;
- a mobile-friendly site increases your visibility: for all the searches carried out by mobile Google “rewards” sites that are mobile-friendly with a better position. This means that a site with a good location but that does not have a mobile version will tend to be shown lower down in SERP;
- in local searches are often privileged the search for results in the vicinity: often from the smartphone, we look for restaurants or other activities that are nearby. A site optimized for mobile, therefore, leads to a significant improvement in sales, especially for those activities for which “immediate” sales are possible and without a long weighting.
What is a Responsive Website?
We have spoken several times in the previous paragraphs of responsive sites and it is legitimate for you to ask me what it means.
In short, a responsive site is a site that, thanks to the use of a special template, is optimized to show the contents on the device that is used.
A responsive site changes resolution, the size of the images and the navigation menu to give the user the best possible experience.
If, on the contrary, you come across a website and cannot read the text and squint and enlarge it to read it better then you are not in front of a mobile-friendly site.
In a nutshell, if a site is responsive, you don’t need to create a special one for the mobile version, but the same adapts to the device from which it is displayed.
To create a responsive site, just follow a few simple steps.
The first is to carry out the mobile-friendly test made available by Google (which I remind you is simple and free and you can access it from the link that I gave you a few lines above).
This test will allow you to check for anomalies. For example, if the text of the pages of your website is too small or if the call to action buttons are too close to each other.
The second concerns the speed which, as we have widely discussed, is very important.
Users who surf from mobile, in fact, often do not have internet access at home and, for this reason, the contents must load quickly, without taking too long.
The speed test can be performed through a series of tools that are available for free on the web, to which I suggest you to integrate the tools for the reduction of images, contents, widgets, and plugins that I suggested you in point 10.
Errors to Not Make on a Mobile Site
Some errors prevent good optimization for mobile and that can, as a result, also interfere with the positioning of your website. Here they are, therefore, exposed here in some points.
- Don’t go check out the version of your website from mobile.
It may be that you work mainly on your website from a PC and, therefore, from a desktop version. There is nothing wrong with that. But it is very important to check how your site is displayed even from a smartphone. If you do not do this it is practically impossible to have a clear point of view on mobile viewing.
- Create endless pages.
We have already seen how mobile browsing occurs above all thanks to touch. Therefore, do not abuse the thumbs of users who come to your site with pages that are too long. This will not give a good browsing experience and, on the contrary, for a similar reason, the user could decide to leave the page.
- Insert very detailed infographics.
Infographics are a positive thing for a website. The problem, however, is that being in image format can lead to an excessive resizing of the text, which could thus become practically illegible. Therefore, before inserting an infographic, check with a test whether it is better to break the image into more parts, to help reading.
- Insert too much text.
What appears to be a normal text in a desktop version, may instead be excessively long and verbal in a mobile version, especially if it is not well divided into blocks and paragraphs or if there are no images, titles or anything else. Be careful, therefore, to structure your text correctly using mobile viewing.
- Insert call to action buttons too close together.
The call to action buttons are designed to make life easier for the user. If they are too close to each other, however, in the mobile version it might be almost impossible to click on one rather than another. This type of malfunction irritates the customer a lot, so be careful to avoid similar mistakes.
- Use flash.
Flash doesn’t work on devices like iPhone and iPad, so my advice is this: even if the temptation is strong for you, avoid it. You would lose only a large portion of users.
- Use forms.
Compiling forms from your smartphone is not the best experience you can give to a user. For this reason, try to avoid them on the mobile version and, if they are indispensable, reduce them to a minimum, focusing only on the most important information.
- How can I speed up my website loading time?
- How does voice search Affect SEO?
- What is Search engine optimization (SEO) and how it works
Since we have seen what we should not do when working on a mobile site, let’s see together and recap, instead, what needs to be done to be able to get a good result:
- Process a single column layout.
This is a decidedly important concept and one to keep in mind: the layout must be single-column, the head also must include the identity of the site (via logo or claim), the navigation menu must be optimized at best for mobile, the content must be clearly visible and any other content must be placed in the footer.
I also advise you to make the site’s identity occupy no more than 5 or 10% of the total so that the user sees most of the content without having to scroll.
Furthermore, the menu must be expansion and banner and any categories of the site must be streamlined and reduced only to those that you consider most important and necessary.
In the mobile version, everything must be simple and easy to understand.
- Get users to understand content immediately.
The user who arrives on your website immediately must understand what the page contains.
For this to happen the title must be explanatory, the category must be present (to make the user understand in which section of the site it is) and already the first lines must summarize the information present throughout the page.
For this purpose, moreover, it can be very useful to insert a summary of the topics covered, so that from a mobile device the user can immediately access those he considers most interesting.
The summary, among other things, if implemented according to HTML standards, also helps the search engine to identify the various topics covered on the page.
- Eliminate items that are not strictly necessary.
As I have already explained to you extensively, a mobile site needs “lightness”.
Therefore, all non-essential elements that can slow downloading or make it difficult to use should be avoided.
My advice is, therefore, to “turn off” some elements in the mobile version. If therefore, the sidebar in the PC version has too many banners, aggregative blocks or graphic elements, we can decide not to show them in the mobile version.
With a responsive layout, just insert the display: none; clause.
With a layout depending on the user-agent or the m.sitoweb.tld subdomain, the elements that you consider not strictly necessary should be eliminated.
- Use graphic standards.
Makes the menu open only if the user requests it.
In this way, you will avoid to occupy space that, in this type of visualization, must be optimized to the maximum.
A good solution can be a button with the word “Menu” or more icons that point to the various airs of the site (personally, the solution I prefer).
Remember to pay attention to the size and colour of the font, which should make reading easier and not difficult to interpret.
- Optimize the behaviour of the interface.
For a good experience on mobile, you have to optimize the site to the best considering the use of the touch. To do this I suggest you:
- insert call to action buttons (which are however clearly visible and distant from each other);
- insert text links (these too not too close and moderate);
- consider that the page does not scroll with a wheel, but with the use of fingers. Therefore, prefer slideshows and image/content galleries;
- consider the fact that smartphones and tablets can be rotated. In this way, the visible area changes proportions and a responsive website is the best way to exploit it. The alternative is to oblige the user to view the site in a given direction;
- bring any text areas too large and that perhaps only interest a part of the users in accordion or expansion elements (another good way to “save space”);
- insert a button to search for content, perhaps even through filters. It helps the user to better orient himself in the website;
- divide content that is too long into multiple pages to avoid infinite scrolling;
- show the contents related to the topic that appears at the end of the page, for an easier transition from one content to another within the website.
- Allow the user to return to the top of the page or the summary.
In mobile versions of websites, the return to the head page is very useful, perhaps through a button. The same for the various topics of the summary (especially if we are dealing with very long contents).
- Facilitates sharing.
Needless to say, the smartphone is widely used to browse the various social networks. Giving the user the ability to share content from mobile is an “extra”. Simply enter, therefore, dedicated buttons and clear icons marked with canonical colours. Be careful not to forget Whatsapp and Telegram.
- Make usable forms.
As already mentioned in the previous paragraph, reduce the forms to the main information, perhaps dividing any questionnaires into steps.
If there are registered users, you can automatically fill in the form and optimize it for device resolution.
But above all, be careful to insert multiple choices that are clickable (sometimes they are too small and unusable as a mobile).
Once completed, the form redirects to a thank you page or sends a reply email (the user needs to know that the compilation was successful).
- Make the most of the potential of mobile devices.
Use QR codes that can take the user directly to the page of your website.
Furthermore, insert maps that exploit the geolocation of the individual and allow the user to call you immediately thanks to the “click to call” keys.
Remember, finally, that a website that works on mobile devices has a fundamental importance in a business and investing in mobile optimization is certainly a good move.
The sites optimized for mobile, in fact, have higher positions in the search results, they are necessary for most people who log in from smartphones (now more than half) and allow good navigability to the user who otherwise would leave the site in short time.
The Three Main Questions
Therefore, after the optimization process, ask yourself the three fundamental questions:
- Does my site load quickly?
We have seen how important the loading speed is to avoid the risk of abandonment by users who, by accessing in a mobile way, want immediate results without many expectations.
- Is my site easy to explore?
Verifying the “yield” of your site from a mobile device is essential. The user must be able to find what he is looking for in the shortest possible time and to be able to move from one section to another on the site without difficulty.
- Does my site allow for easy interaction?
The call to action or click to call keys are essential. The customer must be able to contact you quickly and easily.
This increases the possibilities of interaction, but also those of purchase. The fewer steps required to complete a transaction, the better the user experience will be.
If the answer to these three questions is yes, then you are on the right track to increase your sales and contacts exponentially thanks to the possibilities offered by mobile.