Can A “Mobile First” Responsive Web Design Boost Your Sales?

by 16 08/06/2012

Your website analytics will prove it.  The world has gone mobile.

And smart marketers and web designers are going responsive.

Responsive design is a new trend in web design that uses a fluid and flexible layout. Websites are developed in HTML and through CSS3 media queries you can adapt your entire website for particular devices or operating systems, handling enhancements with JavaScript.

Mobile usage has double every year since 2009 and now accounts for almost 10% of Internet usage. By 2014, internet access via mobile is expected to overtake fixed line access.

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.

Devices shown in analytics

 

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.

Burberry 10.1 inch tablet view

Burberry 10.1 inch tablet view

Burberry 27" widescreen view

Burberry 27″ widescreen view

Burberry 13" laptop view

Burberry 13″ laptop view

 

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.

 

Burberry product page on 10.1″ tablet

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.

Argos on 10.1" tablet

Argos on 10.1″ tablet

 

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.

 

Argos product page on 10.1" tablet

Argos product page on 10.1″ tablet

 

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?

 

Argos on 27" widescreen

Argos on 27″ widescreen

 

Lastly, here is the Argos website on a 13” laptop screen, which is where the Argos website is optimized to work.

 

Argos on 13" laptop

Argos on 13″ laptop

 

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 

Leanne Byrom is a Freelance User Experience Practitioner and Lead UX at Phosphor Digital with a focus on the role of digital in the end-to-end customer experience. Consulting with large and small companies alike in building best of breed online experiences.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

16 COMMENTS

Alain

I love it when you go in details about what works and what does not work.

I just published a blog, one day before yours, titled: “How mobile friendly is your site”.

I brought up more or less the same points that you hightlight on your blog. But the detail that you put into your blog is something to look forward to.

Thank you so much. You have taught me a great lesson.

August 6, 2012 Reply

    Leanne Byrom

    Thank you Alain, I’m glad you like the content and that it helps you. I just came across this survey for the UK about smartphone and tablet usage. It clearly shows how important these devices are becoming to users and I hope that all designers take note of this – because only by designing properly for these devices, will we be able to make good sales and keep our customers happy!

    August 7, 2012 Reply

Justin Avery

I’m all for responsive design, in fact this article will be going in the http://www.responsivedesignweekly.com newsletter this week.

What would be intereting is to see the statistics of visits on the mobile devices to the Argos and Burbury examples you provided above and see which has delivered the largest conversion rate for users.

Argos have really gone with a mobile specific, rather than mobile first responsive design. Obviously it fails greatly across the tablets, but maybe it makes up for it when it comes to mobiles on their own.

August 7, 2012 Reply

Justin Avery

I should really check website before I comment on articles.

The burberry site is a terrible example of a mobile first responsive design. First of all, it’s not responsive past the 1024px mark. Theview port is set to 1024px.

Loading up the site on a mobile takes you to a mobile specific website, the same as what the argos site does. This is not mobile first responsive design but mobile specific websites.

On closer inspection of the Burberry site the links on the pad are probably a little too small for a touch device, something that should be increased when on a touch device.

August 7, 2012 Reply

Leanne Byrom

Hi Justin
Thanks for both of your comments. Unfortunately, the Argos and Burberry website analytics are not publicly available information. Agreed, Argos have gone mobile specific – their mobile version seems to work ok on a couple of devices I’ve looked at it on (HTC & iPhone)

With regards to your comments on Burberry, I am really surprised – I don’t get a mobile specific site at all when accessing on iphone and android smartphone or tablets – I get their actual website, and the screen entirely reformats for me on 22″ or even 27″ monitors. I can only think that we’re accessing the website in different ways, or their site is picking up your device and serving mobile to you, when in fact I’ve not been served mobile versions at all.

August 8, 2012 Reply

    Justin Avery

    Double check the URL that comes up on the iphone/android, it redirects to ….burberry.com/store/mobile/….

    August 9, 2012 Reply

      Leanne Byrom

      Hi again Justin, thanks for the URL – however, as you can see from the tablet screenshot on this page, and also what I am seeing on my phone(s), I do not get redirected to a mobile site at any point in time. The URL that is served to me is always:- http://uk.burberry.com/store/ and even when going through the category and products pages, at no point is a mobile URL shown and at no point am I redirected to a specific mobile site. This is one of the reasons why I have used Burberry as an example of responsive web design. Their “desktop” version is actually what I am viewing and using on all mobile devices. On some devices you can force them to “see” the “desktop” version, may I suggest you try that, and you will be able to see that, even though it is a desktop designed site, it truly does work very well on mobile devices.

      August 9, 2012 Reply

Paola Martinez

Excellent website, would be great if you can post a way to made a normal web design in a mobile resposive. Thanks

August 17, 2012 Reply

Leanne Byrom

Hi Paola, thank you for your comments. Turning a “normal” web design in to a more mobile friendly one can be quite a long and difficult process, depending on whether your website is already live or if it is still in the design stage. Let me know which situation applies to you, and I’ll start looking at putting together a blog to cover this.

August 21, 2012 Reply

Bjørn Wang

Great article!

Now I’m struggling with mobile analytics in CrazyEgg … to follow up on exactly the points made in this article.

We’ve made a responsive site for a customer, which adapts to different screen sizes.

But CrazyEgg always shows the desktop site in every report. Even when i filter for mobile users only, clicks are displayed on the desktop version of the site.

How can i make CrazyEgg show me actual clicks on the mobile site version?

February 14, 2014 Reply

    Kathryn Aragon

    Hi Bjorn. Glad you liked the article. You can get answers to your questions at http://support.crazyegg.com. Common questions are answered on the site, and if you have any additional questions, email support@crazyegg.com.

    February 14, 2014 Reply

      Bjørn Wang

      Thanks Kathryn,

      I see now that mobile analytics (different screenshots for mobile and desktop) is indeed available. I just have to upgrade my license first. Pricing seems a bit steep though, bnut I’m considering it.

      Bjørn

      February 25, 2014 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>