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.
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.
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.
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.
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?
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.
6. Can all relevant content be seen?
Hover effects - think about it, how do you hover on a mobile?
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.
However, on all mobiles you are just greeted with this rather unhappy message.
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.
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.
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.
However, their mobile site looks entirely different and is definitely not consistent in terms of branding.
If you have questions about optimising your Bluepark website for mobile, just ask below.
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.
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.