eCommerce Advice

Cate

Mobile Design Best Practices - 10 Quick Questions to Ask Yourself

2 CommentsTuesday, 3 June 2014  | 

Mobile design best practice

Our Mobile Optimisation: Responsive Templates update has quite possibly been our most popular new feature to date with so many of you adopting it within the first few days of release. However, there are a few things to remember before delving into the world of mobile commerce which you should keep in mind whilst you set up your template and we’ve put together a list of 10 quick questions you should ask yourself as you go along.

1. Will my customers want to use the mobile site?

Mobile shopping is done on the go and, therefore, is seen as an easier and more convenient alternative to shopping in store and online. This should always be reflected in every part of your mobile site, so really think about how a customer would use yours. If you don’t know, ask them! Set up a small questionnaire or ask for feedback on your social media sites.

And remember, once you have your site optimised for mobile use your statistics to monitor how successful your mobile site is and make any adjustments that can improve these results.

2. Does it serve its purpose?

A mobile site is there purely to be another platform that your customers can purchase from. This should always be its primary focus. Don’t distract customers with social share buttons that are larger than the 'add to basket' and 'checkout' buttons or create competition banners that take precedence over selling banners. Keep it clean and uncluttered with clear and well sized call to action buttons.

Don’t clutter the mobile site with content that isn’t relevant to the customer on a smart phone. This will not only distract the customer from the primary focus but it can end up irritating them.

Marks and Spencer know that their desktop customers will be interested in looking at inspirational pages such as blog posts and therefore have a large area underneath the main banner dedicated to promoting these.

Marks and Spencer Desktop

However, they also know that their mobile customers just want to shop and are not interested in looking at beautifully stylized photos or reading blog posts. Therefore, these are not shown on the mobile site and, instead, are replaced with offer messages.

Marks and Spencer mobile

Don't use pop-ups to try and get around not adding certain content to your site. Many people block these on desktops anyway because they are annoying and, when you're in a hurry and looking for convenience on your phone, they are quite possibly the most irritating thing that will immediately put customers off.

When you click on the Toys R Us link in Google on your mobile it takes you to their home page as you would expect. However, you are then immediately greeted with a pop-up asking if you want to download their Wish List app. You are then forced to choose an option before continuing to the actual website.

Toys R Us pop-up on mobile
 

3. Can all customers use it?

Remember, not everyone is built the same, some of us have small, slender fingers whilst others have large, plump fingers. Make sure your buttons are big enough for all sized digits to ensure everyone can have the same experience. Which 'add to basket' and 'wish list' button do you think would be easier to click on?

Mobile add to basket button   John Lewis mobile

Also, some people have better eye sight than others so, making your font really tiny may help to save space, but it's not going to help someone who is short sighted.

4. Can all mobiles use it?

Don’t just rely on the smart phone you have in front of you, check that your mobile site looks and works correctly on all mobile devices. The best thing to use for this is an online mobile emulator which you can view on your desktop. Try www.mobilephoneemulator.com which allows you to view your site on the most popular smart phones.

5. Does it fit on a mobile screen?

One of the most common mistakes people make with mobile designs is the site is too wide for the screen. This would mean that people would have to scroll sideways to view everything, which is irritating enough on a desktop, but on a mobile this can end up causing all sorts of issues. For instance, on an iPhone if you side swipe from left to right it is the same as clicking on the back button.

The main thing that causes a site to be too wide is the use of fixed width tables. Ideally tables should never be used in mobile content but if you can’t get away with not using them then they must always be set at 100% rather than a fixed width. This will allow the table to sit correctly on the desktop and then shrink down when viewed on a mobile.

See our How to: Set up Mobile Ecommerce on Your Bluepark Website blog post for more information.

Adobe's blog, which has been optimised for mobile, has fixed width images that don't reduce in size and therefore push the site out on the right hand side. This means that the user has to scroll across to see the whole of the image.

Adobe mobile   Adobe mobile
 

6. Can all relevant content be seen?

Some functions that work on desktop websites simply don't work on mobiles and therefore should be avoided to make sure your customers can navigate through your site without any problems. These include:

  1. Flash - this doesn't work at all on any iPhones or iPads so should be avoided on all websites as it will just leave an empty space on your site
  2. Frames - these should be avoided anyway but on a mobile they will not scroll, leaving content hard to navigate
  3. Hover effects - think about it, how do you hover on a mobile?
  4. Fonts - some non-standard web fonts won't render correctly on certain mobiles. Always test fonts on all devices and browsers before designing your site around them.
The 24hoursofhappy.com website that promotes Pharrell Williams' no.1 song Happy was released this year and is built entirely in Flash. It works great on a desktop and is a fantastic tool to promote his single.

24 hours of happy desktop

However, on all mobiles you are just greeted with this rather unhappy message.

24 hours of happy mobile

7. Do products have the right volume of content?

Learning how to write clear, concise and informative product content is one of the most invaluable skills you can have in website management. Not only will it help you to create more focused content but it will also help in terms of SEO. This skill is even more vital when it comes to mobile as you want to create content that gets the point across without taking up too much space and that won't put people off reading it.

Mobile content should never be lengthy. People don't want to read paragraph after paragraph of content and they don't want endless scrolling so keep it simple, yet informative, with headings and bullet points. Break the content down into the most valuable pieces of information and only focus on them.

8. Can my customers find what they’re looking for?

People use mobile websites to quickly check prices and availability as well as actually purchasing, therefore you need to make sure anyone who comes to our site can find what they're looking for. Just like desktop sites people browse mobile websites in different ways so make sure you offer all of the searching and browsing functionality that is expected by customers.

A search box should always be accessible on a mobile site, as well as the category and information menus. It is best to initially keep these tucked away in the header to save space but allow them to be easily accessed by clicking on a link or icon. All of these functions will allow the customer to search or browse for what they are looking for.

The Bluepark demo site shows how easy it is to have this functionality tucked away in the navigation bar but accessible whenever the customer needs it.

Demopark mobile   Demopark mobile
 

9. Will my site load on all connections?

Remember people browse mobiles on a multitude of signals from GPRS through to WiFi and your mobile website needs to be able to load quickly on all connections. Using large product images or using images instead of text, as well as having large amounts of content, will all slow down your site making it more frustrating to view on a slow connection.

Javascript is used in all ecommerce websites but adding additional Javascript to your site will slow it down. Any widgets or functionality that has been sourced externally and added to your site should be removed from your mobile site.

10. Is my mobile site recognisable?

When regular customers land on your mobile site they need to recognise it as being your company in an instant, otherwise they may think they are on the wrong site and leave. Make sure both your desktop and mobile sites both comply to brand consistency by either using the same template or having similarly themed ones and always include your logo.

Doodled Books have a well designed desktop site that has a very distinct branded look to it that would be instantly recognisable to a regular customer.

Doodled Books desktop

However, their mobile site looks entirely different and is definitely not consistent in terms of branding.

Doodled Books mobile

If you have questions about optimising your Bluepark website for mobile, just ask below.


Zoe Ripley
Tuesday, 10 June 2014  |  11:50

Hi Cate,
I would like to recreate the template including the add to basket size on the sugar shaker example on my mobile site. I have already included the empty html in my categories to clean up the site. have you also done this in the products description to make it show like the example.
kind regards
zoe


Cate
Tuesday, 10 June 2014  |  12:58

This is created by using custom HTML in the Product detail page field and %product_action field that is done in a single column. It's not something that is part of the standard template.