Can A “Mobile First” Responsive Web Design Boost Your Sales?
Your website analytics will prove it. The world has gone mobile.
And smart marketers and web designers are going responsive.
This isn’t a fad.
The screenshot below shows what mobile devices are being used to access a boutique eCommerce website. On this particular website, mobile devices account for 12.5% of traffic. They are split between iOS, Android and Blackberry operating systems.
Application or mobile web?
‘Mobile’ does not simply mean cell phones.
Mobile refers to cell phones, tablets and everything in between such as the Galaxy Note which is a mix of the two.
So, the question is: Should you build an app or design a mobile website?
There are hundreds of businesses that decide to go the application route. The problem with this is that you generally end up have a restricted amount of content and functionality and many apps are device specific (e.g. you have to download and install an app on your Android handset or on your iPhone – and it needs to be done on every device).
This immediately restricts the reach of your product to the end audience you have in mind because of their device. It is, however, a more predictable one off cost, and if you have customers that are only iPhone users for example, this will work well for your company.
If you have a store or service that needs to reach a large number of people your best way forward would be to go with mobile web, using responsive design.
Start with the smallest device first (in terms of screen size) and work your way up to tablets and then up to computer screens. This is called a “mobile first” approach.
The Mobile First Approach
The “mobile first” approach is actually a concept that pre-dates responsive design.
Mobile first design allows you to enhance your website to cater for bigger and more complex browsers/devices when required, rather than trying to degrade and simplify your desktop experience.
A List Apart has an excellent set of responsive web design publications (online and in print) that can help you in refining and implementing your responsive design approach.
A Good “Mobile First” Design
One of the best examples I’ve found of “mobile first” responsive design is Burberry.
Their website reformats all the content no matter which device you access it from. Screenshots below show access on a 10.1inch Android tablet, a 27” widescreen cinema display and on a 13” laptop. No matter what device has been used to access this website, the user can easily view all the content and buy the products.
With this website I can get to the product page in THREE CLICKS, and it’s a full and rich experience. I can also find everything I need to know about my product and make the purchase.
In addition, Burberry makes the best use of screen space available with full screen images on a widescreen.
Their tablet version has very similar content to the computer version, has an excellent touch interface and even tells me what content cannot be viewed on the tablet. It is this kind of attention to detail that can win or lose you customers and which truly demonstrates a unified customer experience.
And all of this comes from one primary code base.
Example of Poor (or No) Responsive Design
In many ways it is unfair to compare Argos, a budget price store with the likes of luxury etailers like Burberry.
However, the Argos website may have an even greater need to be device agnostic given the wider customer types they need to service.
The screenshot below is from the Argos website viewed on a Samsung Galaxy Tab2, 10.1 inch.
You can see from the URL that I’ve been redirected to a “mobile” version of the website, the problem is, its formatted for a phone, not a tablet. This is a waste of valuable screen real estate.
Furthermore, its not particularly useful and it takes on average SIX CLICKS to get to a product page using their menu. That’s far too many clicks for an easy purchase journey.
When I finally manage to get to the product page, all the product details are well below my viewable screen area, forcing me to scroll to find more information. Even the “Reserve” button is below my immediate viewable area and I cannot “buy now” or arrange home delivery unless I force the browser to go to the “full” version of the Argos website.
Going to the same website on a mac, viewing in a 27” widescreen display, see how much screen real estate is being wasted here? How many special offers or products could I have got on to this home page if I had made use of the full space?
Lastly, here is the Argos website on a 13” laptop screen, which is where the Argos website is optimized to work.
Argos has done themselves a disservice by using a fixed width design. The main reason this happens is it that many companies have designed for computers (desktop/laptop) first and are now going back to retrofit their mobile versions into these designs.
More often than not, and as shown by Argos, this results in a poor user experience and further demonstrates why “mobile first” with responsive design should be adopted.
About the Author: Leanne Byrom is a freelance User Experience Practitioner and UX Lead for Phosphor Digital with a focus on the role of online in the end-to-end customer experience. Follow @PhosphorDigital