Responsive Design - What you need

© 2013. All rights reserved.

Responsive Design: What you need to know

Justus WildeStrategy Director, [email protected] / @justuswilde

mailto:[email protected]

© 2013. All rights reserved.2

• eCommerce consultancy

• Est 1999 ~60 team

• Demandware partner

• Proposition: Sell More


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


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“

Google





Technically speaking


#1 Media Queries

9

320 x 480

480 x 320

768 x 1024

1024 x 768

Anything larger


#2 Fluid Grids


#2 Fluid Grids

Source:https://openframework.stanford.edu/features



Broad Browser Support

Source: http://caniuse.com/css-mediaqueries


Design & Usability Considerations


Device Agnostic

15 Photo Source: http://thecodezombie.co.uk/


Adopt a Agile Approch

16

User Research

Content Strategy

Sketch

Wireframe

Visual Design

Prototype

Test

Source: Ron Kattera


Mobile First

17


Content Inventory & Prioritisation

18 Source:http://www.slideshare.net/pkattera/design-process-for-responsive-web-design


HTML5 Input Types

19 Source:http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/


Retina Images

20 Source: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/



Avoid Sliders

22


Use Price Range Dropdown

23


Swipe to Rotate Images

24


Designer meet Developer

25 Photo Source:http://webdesignledger.com/wp-content/uploads/2012/08/15-adham-dannaway-designer-coder-portfolio.jpg


Learning: Frameworks Save Time!

26

Twitter Bootstrap saved

38%

http://twitter.github.io/bootstrap/




What does it mean


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


Early Results – Conversion Rates

29

134% up

165% up

165% up

195% up

Compared to previous m. site


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/




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

http://alistapart.com/article/responsive-web-design

http://alistapart.com/article/responsive-web-design

http://mobilewebbestpractices.com/strategy/know-when-to-make-a-seperate-mobile-site/

http://mobilewebbestpractices.com/strategy/know-when-to-make-a-seperate-mobile-site/

http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/




Great Implementations

35

www.indochino.com www.suitsupply.com

www.nixon.com www.burton.com


15% Off @ Sportscraft.com.au

36

Enter code “AMBLIQUE” during checkout (April 2013)


Thank You!

Justus WildeStrategy Director

[email protected] / @justuswilde

mailto:[email protected]

Technology

Responsive Design - What you need