© 2013. All rights reserved.
Responsive Design: What you need to know
Justus WildeStrategy Director, [email protected] / @justuswilde
© 2013. All rights reserved.2
• eCommerce consultancy
• Est 1999 ~60 team
• Demandware partner
• Proposition: Sell More
© 2013. All rights reserved.
What is Responsive Design?
“Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices”
Wikipedia
© 2013. All rights reserved.
What is Responsive Design?
“Sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device“
© 2013. All rights reserved.5
© 2013. All rights reserved.6
© 2013. All rights reserved.7
© 2013. All rights reserved.
Technically speaking
© 2013. All rights reserved.
#1 Media Queries
9
320 x 480
480 x 320
768 x 1024
1024 x 768
Anything larger
© 2013. All rights reserved.
#2 Fluid Grids
© 2013. All rights reserved.
#2 Fluid Grids
Source:https://openframework.stanford.edu/features
© 2013. All rights reserved.12
© 2013. All rights reserved.
Broad Browser Support
Source: http://caniuse.com/css-mediaqueries
© 2013. All rights reserved.
Design & Usability Considerations
© 2013. All rights reserved.
Device Agnostic
15 Photo Source: http://thecodezombie.co.uk/
© 2013. All rights reserved.
Adopt a Agile Approch
16
User Research
Content Strategy
Sketch
Wireframe
Visual Design
Prototype
Test
Source: Ron Kattera
© 2013. All rights reserved.
Mobile First
17
© 2013. All rights reserved.
Content Inventory & Prioritisation
18 Source:http://www.slideshare.net/pkattera/design-process-for-responsive-web-design
© 2013. All rights reserved.
HTML5 Input Types
19 Source:http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/
© 2013. All rights reserved.
Retina Images
20 Source: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/
© 2013. All rights reserved.21
© 2013. All rights reserved.
Avoid Sliders
22
© 2013. All rights reserved.
Use Price Range Dropdown
23
© 2013. All rights reserved.
Swipe to Rotate Images
24
© 2013. All rights reserved.
Designer meet Developer
25 Photo Source:http://webdesignledger.com/wp-content/uploads/2012/08/15-adham-dannaway-designer-coder-portfolio.jpg
© 2013. All rights reserved.
Learning: Frameworks Save Time!
26
Twitter Bootstrap saved
38%
http://twitter.github.io/bootstrap/
© 2013. All rights reserved.
What does it mean
© 2013. All rights reserved.
The Verdict
28
PROS
- one link
- one cart
- improved SEO
- one codebase
- control over font size
- consistent user experience
- integrated analytics
- it's not just about the device
CONS
-large image downloads
-design limitations
-cross browser compatibilities
-image resize issues
© 2013. All rights reserved.
Early Results – Conversion Rates
29
134% up
165% up
165% up
195% up
Compared to previous m. site
© 2013. All rights reserved.
Other Published Case Studies
30
Revenue from all devices increased by 42.4%.
The conversion rate improved by 13.6%.
The conversion rate for iPhone increased by 71.9%.
Source: http://econsultancy.com/au/blog/62260-five-brands-that-reaped-rewards-after-adopting-responsive-design
http://econsultancy.com/au/blog/62260-five-brands-that-reaped-rewards-after-adopting-responsive-design
© 2013. All rights reserved.31Photo Source: http://bradfrostweb.com/blog/post/this-is-the-web/
© 2013. All rights reserved.32Photo Source: http://bradfrostweb.com/blog/post/this-is-the-web/
© 2013. All rights reserved.33Photo Source: http://bradfrostweb.com/blog/post/this-is-the-web/
© 2013. All rights reserved.
http://alistapart.com/article/responsive-web-design http://mobilewebbestpractices.com/strategy/know-when-to-make-a-seperate-mobile-site/ http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presi
dential-smackdown/
Resources
34
© 2013. All rights reserved.
Great Implementations
35
www.indochino.com www.suitsupply.com
www.nixon.com www.burton.com
© 2013. All rights reserved.
15% Off @ Sportscraft.com.au
36
Enter code “AMBLIQUE” during checkout (April 2013)
© 2013. All rights reserved.
Thank You!
Justus WildeStrategy Director
[email protected] / @justuswilde