{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

With 2013 the first year tablet shipments are expected to exceed that of PCs and also a year in which smartphone penetration reaches 64% in the US (Nielsen), responsive design is rightly this year’s hot topic.

Despite this, it seems a lot of big brands are playing catch up, with new research from Venda showing just one of the UK’s top 50 most visited retail sites (Curry’s) currently hosts a responsive website.

A quarter of websites analysed don’t have a mobile optimised site, and many retailers host their mobile site under a different URL structure to their existing website, which could be negatively impacting their SEO and affecting their efforts with analytics. 

As comScore estimates a third of all UK page views now come from smartphones and tablets, delivering a slick customer experience across all devices has become a massive competitive advantage for retailers.

To that end, I've been looking at the new responsive Cloggs website. 

By ensuring that all content dynamically adapts to the user’s device, the RWD solution delivers the best possible user experience. The solution gives further consideration to the speed of the device and its connection.

Chris Thomas, Manager Director, Cloggs stated:

It’s increasingly obvious how a range of mobile devices are changing the way people shop online – in fact almost half of our traffic comes from a mobile or tablet device.

Mobile browsing is often a customer’s first step when making a purchase, but a bad browsing experience can mean retailers losing customers at an early stage of the buying decision. Venda’s innovative RWD solution reduces this possibility and presents an opportunity for us to get ahead of the game, as we’re now one of a few top UK retailers that offer a responsive site.

We’re already seeing around a 30 per cent improvement in our mobile conversion rates and the new responsive site will really allow us to start accessing the mobile traffic that is growing every day.

Homepage

Desktop

The Cloggs site, before discussion of responsive design, hits a lot of best practice for retailers. Note the clear 'free uk delivery', 'free returns & exchanges', '10% student discount' and '98% rating on feefo' buttons with further information on clicking through.

The search bar and the contact us button are also prominently displayed. The carousel in the middle can be swiped on a tablet and is used to maximise exposure for offers, sales etc.

Mobile

On mobile, the home page is automatically rescaled. Note the new top menu, with an information button where 'log in', 'contact us' etc can be called out from the left, as shown below.

The search panel has been hidden away and the most important reminder to shoppers ('free uk delivery') remains in the middle. Cloggs has decided to keep this, as it's often shown to significantly increase conversion.

The menu from the desktop site has resized to a 'burger' menu.

Info slide out

Mobile

Here's the info slide-out I mentioned. Great to see contact info, both social and telephone, given prominence.

Category page

Desktop

Best practice yet again. Serious filtering action, dropdowns to change number of products in view. 'Sort' dropdown and 'refine' checkboxes are clear. All in all a good category page for men's trainers.

Mobile

On mobile, and here not all the features fit in one window, the 'refine' menu concertinas up and there are fewer products in the display.

Product page

Desktop

Mobile

The product page on mobile doesn't compromise on imagery, which is very compelling and should hopefully mean conversion is still high. It's good to see user feedback and feefo reviews are still included on the mobile site.

Category refine

Mobile

The 'refine' dropdown gives the standard checkbox.

Product page options

Mobile

This isn't the entire product page but a half mobile page. The buttons for sizing, add to basket etc are all suitably increased in size.

Additionally, the 'free delivery', 'free returns', 'free exchanges' and '110% price promise' incentives are all displayed succinctly at the bottom of the window.

Search bar

Mobile

On mobile the search bar is prominent when clicked.

Social and email

Desktop


Nicely done, including a simple nwesletter sign-up in conjunction with a social panel.

Mobile

On mobile this panel feels the same but is scaled up finger size.  Mobile is a platform for needs must, so it'll be interesting to see the rate of email sign-up on the smaller screen, but whatever the data, this form certainly makes it easy enough.

Enter billing address

Desktop

Mobile

Go to basket

Desktop


The basket pops in to the desktop site allowing you to click further. On the mobile site (see below) a slide-out gives the same effect.

Mobile

Basket

Desktop

Best practice yet again with the compelling tactic of using bright colours to highlight the checkout buttons.

Mobile

On mobile, the same tactic is employed, with bright CTAs and no important information hidden.

 

Checkout login

Mobile

Here you can see a nice touch with the menu showing how many steps the users has left until completion. This should aid conversion by helping to take away any uncertainty about how long is left in the checkout.

Desktop

Interestingly the desktop doesn't provide this useful step listing, though perhaps it could.

Checkout delivery options

Desktop

The colour scheme here is used very well to highlight which information the user is editing. prices for shipping are clear and there's the option of more info.

Mobile

This is just as clear on mobile.

Payment form

Desktop

Mobile

Ben Davis

Published 9 October, 2013 by Ben Davis @ Econsultancy

Ben Davis is a senior writer at Econsultancy. He lives in Manchester, England. You can contact him at ben.davis@econsultancy.com, follow at @herrhuld or connect via LinkedIn.

838 more posts from this author

Comments (7)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Eric Smith

A really nice example of effective responsive web design. I can't understand what is taking retailers so long to make a similar move to Cloggs and adopt a multi-device strategy.

My only criticism with the website is the size of those social icons, although their better being too big rather than too small.

almost 3 years ago

Avatar-blank-50x50

mike

Hi,

All technological discussion aside, This examples has much more to do with a proper usability study. What you really see here is how the brand through through how they want their site to display on mobile devices.

I really get responsive design but I really don't like having to load up a mobile version with so much java script that the terminal bog down and run slowely.

Yes to responsive design.. no to let the terminal do all the re configuration based upon java script. Soon we are going to hear a lot of stories as to why a responsive site does not load well or it just stops working while interacting with the site.

I personally like how Amazon does it. A proper re-implementation.

almost 3 years ago

Avatar-blank-50x50

Ashley Henderson, E-Commerce Executive at Hastings Direct

Love the new design, the blocks shown on desktop site which become more prominent on mobile work really well.

However the homepage carousel needs work. The first slide transitioned even before my desktop browser loaded the site!

Beside that, good job.

almost 3 years ago

Avatar-blank-50x50

Kayla

Really like this website and it translates well to mobile. It's frustrating trying to make a purchase on your mobile with a site that's not optimised whereas this wouldn't stop me from buying from my iPhone.

We're working on a new site design with a mobile version so this is a great example to get some ideas from, thanks!

almost 3 years ago

Avatar-blank-50x50

Paul

Shame your own site isn't responsive, it would of been easier to read this article

almost 3 years ago

Avatar-blank-50x50

Drupal site

Great job and very nice example. Most of our customers include responsive design as one of the main requirements.

almost 3 years ago

Lee Carpenter-Johnson

Lee Carpenter-Johnson, DIrector of Digital / E-Commerce at NCT Trading

A really good design and works nicely on all devices. I feel all brands that convert to responsive design should be applauded, whilst the technology is available, it is not always easy to launch in responsive. Responsive is a learning curve for many and so many brands have not even started to adopt. Hats off to the guys that are doing it and investing. From this example we already see Cloggs are increasing mobile conversion by 30% - Based on the turnover of the business and stats I'm sure that is a hefty increase.

Well done Cloggs.

over 2 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.