Rob Smith, Digital Director at Blueleaf shares his knowledge on mobile optimised websites. The mobile landscape is rapidly changing and maturing into a space where there’s a lot of potential revenue available for a mobile focused site that concentrates on simplicity and getting things done for the customer.
Keeping things simple is one of the keys to a good mobile experience. Not forcing people to zoom or to scroll horizontally makes mobile experiences much more slick, versus normal sites where you do a lot of zooming in and out on devices.
John Lewis do this well, with a very simple front screen to allow easy access to their products. In our opinion they could do a better job of reprioritising their store locator (see below) but the site is very simple and effective. They may be able to do more by using a simpler first level category structure as well.
You can see that search is front and centre so that people can just be directed straight to their need.
When looking at a site on a mobile, there’s a much higher chance that someone is in the context of being on the move as opposed to just sitting at home (although this is not always true of course). As a result, your content and customer journeys should be adjusted so that the right content is further up.
A good example of this is Argos’s mobile site, where they have put the store locator very high in terms of prominence as well as a stock checker. When on the move it’s much more likely that you’ll be using one of these functions, so wisely they do not make you dig for the information, putting it front and centre.
Mobile sites are often accessed at best on 3G connections and sometimes even less when you get out of cities or to smaller towns. As a result only the most important imagery and style need to be brought forwards on a mobile site to keep overall site speed and download size as fast and small as possible.
We can see a good example of this on the ASOS site where there is very little in the way of images on the screen other than some small images for navigation, a sale banner and the logo. This keeps speed very quick on mobile devices, even if the connection isn’t very good.
Lots of vertical scrolling is OK
As you can see on the left, an ASOS product listing page defaults to 12 to a screen and so has a lot of vertical scrolling involved to get to the products. This is OK on a mobile site – people expect to use their touch screens (generally) to scroll quickly through content and see things that catch their eye.
Again it should be noted that the page is very very simple with a focus on the product imagery above all else, and not the product information. In this case even the ‘refine by’ functionality is later on in the page to not clutter access to the products.
So, in summary, keep it simple, make sure the salient information is prioritised and don't be afraid to streamline the design. If you need any help with optimisimg your website for mobile devices, then contact Rob Smith at Blueleaf, firstname.lastname@example.org or Adrian Lomas at Blueleaf, email@example.com on 01829 260 600.