Subscribe to our newsletter
18 December 2018

How to make the perfect page for mobile devices in 2019

Get in touch

How to make the perfect page for mobile devices in 2019

In 2018, 52.2% of all worldwide online traffic was generated through mobile phones, up from 50.3% in the previous year (Statista, 2018). A study shows that 51% of searchers are more probable to purchase from a mobile optimised website (Quicksprout) and that 46% of consumers will not revisit a website which is not working properly (Hubspot).

Furthermore, Google reports show that 40% of mobile consumers turned to a competitor’s web site after an unsatisfactory mobile web experience, and 57% would not recommend a business with a bad mobile website. 

Keep in mind that 93.3% of small business owner’s websites are not mobile friendly (Searchengineland), indicating a huge potential for your business to optimise it’s mobile pages.

The first thing to investigate on your mobile device is your front page, since it is often the page that brings in the highest number of traffic.

Build a targeted front page

First, investigate if your front page is providing your users with a great user experience (UX) by checking your bounce rate and average time on page. Bounce rate is the percentage of users who navigate away from the site after viewing only one page. What you would like is the user to click around on your website and navigate to different pages viewing different solutions/products/services and therefore have an as low bounce rate as possible.

If you have a high bounce rate but your average time on page is one minute, then this is not a problem. Visitors might be reading the content on your site, filling out a contact form.

Secondly, investigate which banners, text, images and videos the user sees, where the user clicks, how far the user scrolls on the page and what they see. To get an understanding of this we recommend using a ‘heat map’.

Several SEO tools such as Siteimprove or Hotjar have heat maps. Banners are especially important on mobile since banners on mobile devices compared to desktop devices do a better job of breaking through, when it comes to ad recognition and message recall. However, one of the most common problems on mobile devices is that the user may not notice your banners, this is known as ‘banner blindness’. 

We always recommend six simple things to remember when designing banners:

  1. Make it look like relevant content.
  2. Do not have any background colours, since studies has shown that it makes the brain look away.
  3. Do not use white text on a background colour, since it is hard to read.
  4. Have a clear header on a white or light background colour.
  5. Try to have HTML generated text, since it appears clearly on the screen.
  6. Have a “call to action” bottom or link that makes the customer perform an action.

A good example could be the below banner from Nike.

Mobile banner

 

Rotating banners

Rotating banners are banners that swap between different banners automatically. The benefit of using rotating banners is that if the user itself must swap between the banners, it has that consequence that many banners not are viewed. 

Rotating your banners can therefore increase the number of banners being viewed by users. If you are rotating your banners, here are four things to remember to ensure the best outcome.

  1. Rotate the banners slowly, since a fast banner rotation can stress the user.
  2. Stop the banner rotation when all banners have been shown once.
  3. Make it possible for the user to ‘pause’ banners.
  4. Make it clear for the user how to scroll between the banners, for example as Nike do with their arrows in the above example.

Structure your content

We now know that the top of the page should include banners which 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 the individual website. However, we tend to follow two rules of thumb.

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

    swipe-banner
  2. Headings & swipes. A way to increase UX using headings and swipes can be done as shown in the below example.

Below, two images are shown, a before and after the image has been optimised. In the image ‘3 of 15’ has been included to show that there are more products available. Furthermore, the product image to the right has been ‘cut over’ so the customer visually can see that there are more products available. Below the image’s dots has been included showing that more pages are available and which page the customer is located on.

 

mobile-products

 

Length of content

When making your front page or other landing page, one of the hardest things is to decide the length of the page, because there is so much potential information to include.

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

 

mobile-sites

 

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

Easy and simple web page footer

The user-test in the study also found that the customers expected to be able to find help on delivery information and returns easily. Comparing staples and Asos, the users preferred Asos’ web page footer since they have gathered the information that customers must recently are looking for in the footer. This makes it faster for the user, since they do not have to click the ‘help centre’ button as showed in the below images.

About the author

kwc
Kenneth Wernst ChristensenSEO ConsultantSend e-mail

Contact Person

Joseph Goodson
Joseph GoodsonHead of MarketingSend e-mail

Related Entries

7 new digital marketing and technology trends in 2018

More

8 SEO tips when launching a new website

More

Part 1 of 3: SEO of the 50 biggest E-commerce websites in the UK

More

Novicell London

8 Devonshire Square
EC2M 4PL London
United Kingdom


+44 (0)20 8144 8142

Novicell Aarhus (HQ)

Søren Nymarks Vej 6
8270 Højbjerg
Denmark

www.novicell.dk
+45 8619 0550

Novicell Ebeltoft

Jernbanegade 5,1
8400 Ebeltoft
Denmark

www.novicell.dk
+45 8619 0550

Novicell Oslo

Ole Deviks vei 6B
0606 Oslo
Norway

www.novicell.no
+47 400 84 611

Novicell Copenhagen

Amerika Plads 19, 2. sal
2100 København Ø
Denmark

www.novicell.dk
+45 8619 0550

Novicell Barcelona

Carrer de Pallars 84
08018 Barcelona
Spain

www.novicell.es
+34 932 31 53 03

Novicell Madrid

Calle Irun 23 1-1 & 1-2
28008 Madrid
Spain

www.novicell.es
+34 932 31 53 03