The importance of optimizing your website for mobile

Why you should have a mobile-optimized website

In 2018, 52.2% of all global online traffic was generated through mobile phones, compared to 50.3% the previous year (Statista, 2018). A study shows that 51% of users are more likely to buy on a mobile-optimized website (Quicksprout) and that 46% of consumers will never visit a website that is not working properly (Hubspot).

In addition, Google reports show that 40% of mobile consumers went to a competitor's website after an unsatisfactory experience, and 57% would not recommend a business with a poor quality website in its mobile version.

Keep in mind that 93.3% of the websites of small business owners are not mobile (Searchengineland), which indicates great potential for your business to optimize your pages on mobile.

Finally, having a mobile-optimized website is a factor that Google takes into account, so it's a compelling reason not to forget its action.

How to optimize your website for mobile

The first thing you should research on a mobile device is the main page of your website, as it is often the page that attracts the most traffic.

Bounce rate

First, you'll need to investigate if your homepage is providing your users with a great user experience (UX) by checking your bounce rate and average time spent on the page. The bounce rate is the percentage of users who navigate away from the site after viewing just one page. What we expect is that the user will click on your website and navigate to different pages seeing different solutions/products/services and, therefore, to have as low a bounce rate as possible.

If you have a high bounce rate but the average time on page is one minute, then that's not a problem. Visitors may be reading the content of your website or filling out a contact form, for example.

Banners

Second, it investigates what banners, text, images and videos the user sees, where they click, how far the user scrolls on the page and what they see. To understand this, we recommend using a “heat map”.

Several SEO tools such as Siteimprove or Hotjar have heat maps. Banners are especially important on mobile devices since banners on mobile devices compared to desktop devices do a better job of penetrating, when it comes to ad recognition or remarketing. However, one of the most common problems on mobile devices is that the user may not perceive your banners, which is known as “banner blindness”.

We recommend 6 things to consider when designing a banner:

1. Make it look like relevant content.
2. Don't include any background color, as studies have shown that it causes the brain to look the other way.
3. Don't use white text on a background color, as it's hard to read.
4. Use an intelligible header on a white or light background.
5. Try to have text generated in HTML, as it appears clearly on the screen.
6. Include a “call to action” at the bottom or link that causes the customer to take an action.

A good example would be the following Nike banner.

Rotating banners are banners that change automatically. The benefit of using rotating banners is that if the user himself must change the banners, many banners are not seen.

Therefore, rotating your banners can increase the number of banners that users see. If you're rotating your banners, here are four tips to ensure the best result:

• Rotate the banners slowly, as a quick rotation of the banner can stress the user out.
• Stop the banner rotation when all the banners have been displayed once.
• Make it possible for the user to 'pause' the banners.
• It makes it clear to the user how to move between the banners, for example as Nike does with its arrows in the previous example.

Structuring the content

We now know that the top of the page should include banners that look like relevant content. We also know that the customer should be able to rotate and pause, but what about the rest of the page?

This, of course, always depends on each website. However, we tend to follow two general rules.

Delivery Information. We recommend including delivery information on the main page, for example, Asos in the image below, and keep the delivery information in the footer for the rest of the pages.

Headings and slippage. One way to increase UX is to use headers and swipes, as shown in the following example.

Length of content

When creating your landing page or other landing page, one of the most difficult things is deciding the length of the page, as there's usually a lot of potential information to include.

A Customersense study showed that all test participants preferred the length of the Zalando text compared to Ikea, Amazon & Staples shown in this image.

The reason people preferred Zalando was because users knew when the page was ending, and the page has enough information not to be too short.

Simple footer

The tests carried out by users during the study also revealed that customers expected to be able to find help with delivery and return information easily. During the comparison between Staples and Asos, users preferred the footer from the Asos website, since it collects the information that customers should be looking for recently in the footer. This makes it faster for the user, since they don't have to click the “help center” button. As long as the user can save a click, all the better.

Mobile phones have become the preferred medium for consumers and users, so it is vitally important that websites are designed especially for this type of device. Websites and their contents should be able to adapt to any mobile terminal with different screen resolutions.

How can we help you?

If you need more information do not hesitate to contact us.