Responsive design presentation given at Inaugural ShopTalk Meetup in Auckland. 14th August 2013 by Justus Wilde.

1. © 2013. All rights reserved.

2. © 2013. All rights reserved.
Mobile Utilisation
2

3. © 2013. All rights reserved.
Quiz
3
Desktop
Mobile
Tablet
April 2012
April 2013
21% mobile 37% mobile
How much in July 2013?

4. © 2013. All rights reserved.
Quiz
4
Desktop
Mobile
Tablet
April 2012
April 2013
21% mobile 37% mobile
How much in July 2013?
42%

5. © 2013. All rights reserved.
In July 2012 the Sportscraft website was
accessed by 104 unique mobile devices.
What was that number in July 2013?
a) 163 b) 298 c) 412
Quiz
5

6. © 2013. All rights reserved.
In July 2012 a the Sportscraft website
was accessed by 104 unique mobile
devices.
What was that number in July 2013?
a) 163 b) 298 c) 412
Quiz
6

7. © 2013. All rights reserved.
Responsive Design: What you need to know

8. © 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“
Google

9. © 2013. All rights reserved.9

10. © 2013. All rights reserved.10

11. © 2013. All rights reserved.11

12. © 2013. All rights reserved.
Technically speaking

13. © 2013. All rights reserved.
Media Queries
13
320 x 480
480 x 320
768 x 1024
1024 x 768
Anything larger

14. © 2013. All rights reserved.
#2 Fluid Grids

15. © 2013. All rights reserved.
#2 Fluid Grids

16. © 2013. All rights reserved.16

17. © 2013. All rights reserved.
Broad Browser Support
Source: http://caniuse.com/css-mediaqueries

18. © 2013. All rights reserved.
Design Considerations

19. © 2013. All rights reserved.
Device Agnostic
19 Photo Source: http://thecodezombie.co.uk/

20. © 2013. All rights reserved.
Mobile First
20

21. © 2013. All rights reserved.
Adopt a different approch
21
User
Research
Content
Strategy
Sketch
Wireframe
Visual
Design
Prototype
Test
Source: Ron Kattera

22. © 2013. All rights reserved.
Content Inventory & Prioritisation
22 Source:http://www.slideshare.net/pkattera/design-process-for-responsive-web-design

23. © 2013. All rights reserved.
Retina Images
23 Source: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/

24. © 2013. All rights reserved.24

25. © 2013. All rights reserved.
HTML5 Input Types
25 Source:http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/

26. © 2013. All rights reserved.
HTML5 Input Types
26 Source: http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/

27. © 2013. All rights reserved.
Avoid Sliders
27

28. © 2013. All rights reserved.
Use Price Range Dropdown
28

29. © 2013. All rights reserved.
Swipe to rotate images
29

30. © 2013. All rights reserved.
Navigation Considerations
30 Source: http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/

31. © 2013. All rights reserved.
Designer meet Developer
31

32. © 2013. All rights reserved.
What does it mean

33. © 2013. All rights reserved.
The Verdict
33
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

34. © 2013. All rights reserved.
Results on case study
34
54% up
37% up
~7% up

35. © 2013. All rights reserved.
Other Published Results
35

36. © 2013. All rights reserved.36

37. © 2013. All rights reserved.37

38. © 2013. All rights reserved.38

39. © 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-
presidential-smackdown/
Resources
39

40. © 2013. All rights reserved.
Great Implementations
40
www.indochino.com www.suitsupply.com
www.nixon.com www.burton.com

41. © 2013. All rights reserved.
My Details
Justus Wilde
Strategy Director
jw@amblique.com / @justuswilde

42. © 2013. All rights reserved.
“Selling across the ditch &
beyond”
Wed 13th Nov 2013
Same venue & time
RSVP on meetup.com/shoptalk-
nz
Next Meetup
42