responsive design: designing for the future in a multi-device world
DESCRIPTION
Mobile commerce is growing at a rate of 129% for some web retailers and as much as 185% for others. With only 1 of the top 50 UK retail sites being fully Responsive, retailers are not correctly addressing the mobile opportunity with robust mobile commerce resources, and stand to lose up to 20% or more in potential revenue in 2013*. Consumers are becoming even more demanding, and the diversity of devices browsing the web is expanding at a lightning fast pace (it’s no longer an i-world!). The need to build slick, user-friendly mCommerce sites – and quickly, is becoming ever more important. In this session Venda’s Chief Operating Officer, Damon Mannion, will co-present with Cloggs’ Managing Director, Chris Thomas, to demonstrate how Responsive Web Design has enabled the luxury shoe retailer to dynamically cater for all devices and screen resolutions from smartphones through to tablets and wide-screen desktops. As Venda’s very first Responsive site, Cloggs will offer valuable insight into the challenges and rewards of developing a fully optimised site.TRANSCRIPT
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Responsive DesignDesigning for the future in amulti-device world
Damon MannionVenda / [email protected]
Chris ThomasCloggs / [email protected]
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Why?What?How?
Success
Responsive Web Design
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
What Drove The Process
• A poor mobile experience
• A doubling of our mobile traffic
• Industry trends and indicators
• The Cloggs acquisition and re-branding
• The Management
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Responsive Web Design (RWD)
Why?What?How?
Success
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Mobile Changes EverythingLong ago people danced… now they video / click / share / tweet
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Mobile Changes Everything
• Nearly one-third of UK page views are from phones & tablets. Cloggs site, in September 2013, was close to 50% mobile traffic
• Tablets shipped surpassed desktops & notebooks this year, all within three years of their introduction
• 43% of UK shoppers use smartphones while on the move to compare prices and read reviews – there is no sales funnel
• One year ago, Walmart announced embracing showrooming, now 12% of its online sales are from in-storeTablet usage source: http://www.kpcb.com/insights/2013-internet-trendsPage views source: http://www.comscore.com/Insights/Presentations_and_Whitepapers/2013/2013_Europe_Digital_Future_in_FocusSmarkphone use: http://econsultancy.com/uk/reports/how-the-internet-can-save-the-high-streetWalmart & showrooming: https://www4.gsb.columbia.edu/filemgr?&file_id=7313935
…especially retail
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Tipping point reached in e-Retail, as mobile now accounts for all online growth
IMRG. September 2013
http://www.imrg.org/index.php?catalog=186
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Are We Serving our Mobile Customers?
Analysis of top 50 UK sites in August from IMRG - http://www.imrg.org/index.php?catalog=190
1 www.amazon.co.uk2 www.apple.com3 www.argos.co.uk4 www.amazon.com5 www.next.co.uk6 www.marksandspencer.com7 www.asos.com8 www.tesco.com9 www.debenhams.com
10 www.johnlewis.com11 www.netflix.com12 www.newlook.com13 www.thomson.co.uk14 www.lovefilm.com15 direct.tesco.com16 www.thetrainline.com17 www.diy.com18 direct.asda.com19 www.thomascook.com20 www.currys.co.uk21 www.easyjet.com22 www.ryanair.com23 www.riverisland.com24 www.topshop.com25 www.cineworld.co.uk
26 www.laterooms.com27 www.very.co.uk28 www.expedia.co.uk29 www.houseoffraser.co.uk30 www.lastminute.com31 www.halfords.com32 www.britishairways.com33 www.sportsdirect.com34 www.ikea.com35 www.homebase.co.uk36 www.boots.com37 www.asda.co.uk38 www.travelrepublic.co.uk39 www.ticketmaster.co.uk40 www.onthebeach.co.uk41 www.screwfix.com42 www.boohoo.com43 www.carphonewarehouse.com44 www.littlewoods.com45 www.odeon.co.uk46 www.qvcuk.com47 www.travelodge.co.uk48 www.myvue.com49 www.premierinn.com50 www.hm.com
Analysis of top 50 UK sites, by traffic, from IMRG’s analysis August 2013
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
No Mobile
1 www.amazon.co.uk2 www.apple.com3 www.argos.co.uk4 www.amazon.com5 www.next.co.uk6 www.marksandspencer.com7 www.asos.com8 www.tesco.com9 www.debenhams.com
10 www.johnlewis.com11 www.netflix.com12 www.newlook.com13 www.thomson.co.uk14 www.lovefilm.com15 direct.tesco.com16 www.thetrainline.com17 www.diy.com18 direct.asda.com19 www.thomascook.com20 www.currys.co.uk21 www.easyjet.com22 www.ryanair.com23 www.riverisland.com24 www.topshop.com25 www.cineworld.co.uk
26 www.laterooms.com27 www.very.co.uk28 www.expedia.co.uk29 www.houseoffraser.co.uk30 www.lastminute.com31 www.halfords.com32 www.britishairways.com33 www.sportsdirect.com34 www.ikea.com35 www.homebase.co.uk36 www.boots.com37 www.asda.co.uk38 www.travelrepublic.co.uk39 www.ticketmaster.co.uk40 www.onthebeach.co.uk41 www.screwfix.com42 www.boohoo.com43 www.carphonewarehouse.com44 www.littlewoods.com45 www.odeon.co.uk46 www.qvcuk.com47 www.travelodge.co.uk48 www.myvue.com49 www.premierinn.com50 www.hm.com
76%
24%
Mobile Site
Are We Serving our Mobile Customers?Not for 24%
Analysis of top 50 UK sites in August from IMRG - http://www.imrg.org/index.php?catalog=190
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
No Mobile
64% Mobile, different URLs
10% Mobile, same URLs
2% Responsive site
76%
24%
Mobile Site
Are We Serving our Mobile Customers?Only 12% have a best-practice mobile experience
Analysis of top 50 UK sites in August from IMRG - http://www.imrg.org/index.php?catalog=190
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Responsive Web Design
Why?What?How?
Success
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Repeat after me: mobile users will do anything and everything desktop users do, provided it’s presented in a usable way.
Brad Frost. March 2012
@brad_frost
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Mobile Options
Serve desktop site ‘do nothing’
Multiple sites, different URLs ‘m dot site’
Multiple sites, same URLs ‘RESS site’
Single site, same URLs ‘responsive site’
12 / top50
UK
32 / top50
UK
5 / top50
UK
1 / top50
UK
Alternatives for delivering a mobile experience
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Serve Desktop Site
http://store.apple.com/us/iphone/family/iphone/compare
Apple’s web site showcasing the new iPhone
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Mobile Options
Serve desktop site ‘do nothing’
Multiple sites, different URLs ‘m dot site’
Multiple sites, same URLs ‘RESS site’
Single site, same URLs ‘responsive site’
12 / top50
UK
32 / top50
UK
5 / top50
UK
1 / top50
UK
Alternatives for delivering a mobile experience
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Different URLs
http://www.amazon.com/gp/aw/d/B0073QQ7BU/ref=mp_s_a_1_1?qid=1381311890&sr=8-1&pi=AC_SX110_SY165
Sharing The Hoff on Amazon
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Mobile Options
Serve desktop site ‘do nothing’
Multiple sites, different URLs ‘m dot site’
Multiple sites, same URLs ‘RESS site’
Single site, same URLs ‘responsive site’
12 / top50
UK
32 / top50
UK
5 / top50
UK
1 / top50
UK
Alternatives for delivering a mobile experience
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Why Responsive Web Design
• Single site:
• Most cost-effective solution to build
• Quicker to deploy changes
• Simplified approach to merchandising & retail operations
• Responsive:
• Adapts to ‘inbetween devices’
• Future-proof scalable foundation for next devices (glasses, watches,
etc.)
• Single set of URLs:
• Best user experience when sharing links
• Maximises SEO authority
• Unified analytics
RWD only
RWD only
RWD & RESS
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Google recommends webmasters follow the industry best practice of using responsive web design
Building Mobile-Optimized WebsitesOverview of Google's recommendations
Google, December 2012
https://developers.google.com/webmasters/smartphone-sites/
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
What is Responsive Web Design?
• Media Queries – breakpoints where design layout changes:• Small (phone)
• Medium (tablet)
• Large (desktop)
• Flexible grids – ‘stretch’ the design inbetween breakpoints:
• Flexible media – adaptive optimisation for:• Touch / no touch
• Image resolution
• Use of the device (physical and functional)
• Device features
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Cloggs Home PagePhone to tablet
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Cloggs - CheckoutPhone to desktop
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Litmus source: https://litmus.com/blog/mobile-opens-hit-record-high-of-47Responsive email templates: http://internations.github.io/antwort/
47% mobile
32% desktop
21% webmail
Where your emails are opened
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Responsive Web Design
Why?What?How?
Success
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Successful RWD Projects
TeamDesign Process
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Design FocusBalance is key
BrandPerformance Customer
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Performance
• Mobile (radio) is slow – takes 2 seconds to establish a connection
• Performance is a design feature baked in from the start – simplicity delivers fastest site and best user experience
• Image weight is critical to performance (icon-fonts, sprites, SVG images and picturefill) – responsive images is subject in its own right
• All the usual web performance tips apply (e.g. minimise requests, gzip, minify/uglify, expiry headers, etags, image optimisation, etc.)
• Reminder that faster sites:• Gain higher authority in search engines
• Have higher conversion rates
Responsive image optimisation techniques: http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/Picturefill: https://github.com/scottjehl/picturefillGeneral web optimisation techniques: http://developer.yahoo.com/performance/rules.htmlSite speed and SEO: https://moz.com/blog/improving-search-rank-by-optimizing-your-time-to-first-byte
Performance is a design feature
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
• Optimise for your customers’ behaviour
• Fully support touch, keyboard and mouse
• Use drop-downs, defaults and pre-fill to minimise typing
• No flash
• Optimise checkout flow very carefully
• Make best use of space ‘above the fold’ (e.g. search, hero image, etc.)
• Make phone and tablet your primary devices for testing
Customer Experience – All DevicesFunctionality and usability
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
• All tap areas are big enough for ‘fat fingers’
• No overlay / pop-up windows (so image zoom is difficult)
• Design menus carefully, accordions are usual
• Make store locator prominent and use location services
• Use input types to assist typing
• Adhere to contextual conventions (‘fit’ with device)
Customer Experience – Small DevicesFunctionality and usability
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Input TypesTyping assistance
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Contextual Conventions‘Fit’ with the device
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Successful RWD Projects
TeamDesign Process
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Successful RWD Projects
Full Designs
Styleguide
WireframesTypography, colours, buttons, forms, etc.
Keep alive: http://www.cloggs.co.u
k/pcat/styleguide
Layout and page flow, includes less formal
‘sketches’
Exact design per device, used for key pages and repeating page areas (headers
and footers)
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Build – Page ElementsThink in elements or design patterns – discrete pieces of content
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Build – Approach
• Initially:• Build style guide and full designs for home page
• Agree which pages are fully designed and which are wireframes
• Build header/footer first and move into browser – this will take longer than you expect
• Ideally designers have own local copy of the site and work directly with CSS, amending ‘in browser’ – paper is not responsive, devices are
• Use real content as soon as possible (images, product, category, etc.) – lorum ipsum and placeholder images do not work
• Developers use design documents and all the above as the ‘theme’ for a page – not an exact science, so deliver daily to ensure alignment
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Build – Browsers
• The web is not be pixel-perfect:
• All recent browsers support responsive sites. For older browsers, based on browser share, recommend supporting IE8 (by fixing to desktop).
Browser compatibility: http://caniuse.com/css-mediaqueries
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Plan
Discovery & Definition
Content
Full Designs
Styleguide
Wireframes
Build
Live
Iterative Build
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Successful RWD Projects
TeamDesign Process
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Team
• Retailer / Designer / Developer – collaboration, communication and trust is critical
• Communication:• Daily internal scrum: designer, developer, PM and QA
• Daily call with retailer: designer, developer, PM
• Weekly status call with project team
• Monthly project board with senior stakeholders
• Tools:• Jira (Kanban) for tracking issues and change requests, full across all teams
• Venda design application for sharing designs, comments and approvals
Communication, communication, communication
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Successful RWD Projects
TeamDesign ProcessMobile usability,
customer behaviour, brand and
performance
Iterative build (agile), careful use of the different design
vehicles, think in page elements
Collaboration, communication and trust between the
retailer, the designer and the developer
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Why?What?How?
Success
Responsive Web Design
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Why Cloggs Chose Responsive
• Value for money (low cost of adoption)
• Already made a decision to redesign site & brand
• Better SEO benefits
• Total cost of ownership – maintenance & support
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Cloggs – Lessons and Tips
• Understand each touch point
• How will designs stack
• Loading time for graphics
• Clearly define your goals
• Analyse and optimise
• Ensure emails & links are acting correctly
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Cloggs – 6 Weeks On
Organic Tablet Traffic
• Organic traffic for tablet devices has doubled
• Average Load time on mobile / tablet devices decrease by an average 1.5 seconds
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Cloggs – 6 Weeks On
MobileConversion Rate
35.03%
TabletConversion Rate
66.51%
DesktopConversion Rate
25.27%
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Cloggs – Conclusion
• RWD is the right strategy for Cloggs
• Find the right Partner
• Mobile is the fastest growth area within eCommerce
For Cloggs RWD = Best Value for Money
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Responsive Web Design
• Your customers require a mobile-optimised experience
• The fastest and most cost-effective way of delivering mobile-optimisation is Responsive Web Design and it’s future-proof
• Key to success is “flexibility not specificity”:• Team – close collaborative team of developer, designer and
retailer
• Design – balance of performance, brand and customer
• Process – deliver daily, check for alignment, repeat
Delivering the future in a multi-device world
Document Classification: Public - Copyright © 2013 Venda Limited and its licensors. All Rights Reserved.
Visit: Venda at stand 7
Email: [email protected]
Call: 020 7070 7000
Follow: @vendauk
Responsive Web Design
Damon Mannion / COOVenda Ltd
@vendauk@damonmannion
+44 207 070 7000
venda.com/mobile
t
e
w
Chris Thomas / CEOCloggs Online Ltd
+44 121 322 5015
cloggs.co.uk
t
e
w