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 pracitce 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
No hay comentarios:
Publicar un comentario