© 2013. All rights reserved.
© 2013. All rights reserved.
Mobile Utilisation
2
© 2013. All rights reserved.
Quiz
3
Desktop
Mobile
Tablet
April 2012
April 2013
21% mobile 37% mobile
How much in July 201...
© 2013. All rights reserved.
Quiz
4
Desktop
Mobile
Tablet
April 2012
April 2013
21% mobile 37% mobile
How much in July 201...
© 2013. All rights reserved.
In July 2012 the Sportscraft website was
accessed by 104 unique mobile devices.
What was that...
© 2013. All rights reserved.
In July 2012 a the Sportscraft website
was accessed by 104 unique mobile
devices.
What was th...
© 2013. All rights reserved.
Responsive Design: What you need to know
© 2013. All rights reserved.
What is Responsive Design?
“Sites that serve all devices on the same
set of URLs, with each U...
© 2013. All rights reserved.9
© 2013. All rights reserved.10
© 2013. All rights reserved.11
© 2013. All rights reserved.
Technically speaking
© 2013. All rights reserved.
Media Queries
13
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
© 2013. All rights reserved.16
© 2013. All rights reserved.
Broad Browser Support
Source: http://caniuse.com/css-mediaqueries
© 2013. All rights reserved.
Design Considerations
© 2013. All rights reserved.
Device Agnostic
19 Photo Source: http://thecodezombie.co.uk/
© 2013. All rights reserved.
Mobile First
20
© 2013. All rights reserved.
Adopt a different approch
21
User
Research
Content
Strategy
Sketch
Wireframe
Visual
Design
Pr...
© 2013. All rights reserved.
Content Inventory & Prioritisation
22 Source:http://www.slideshare.net/pkattera/design-proces...
© 2013. All rights reserved.
Retina Images
23 Source: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/
© 2013. All rights reserved.24
© 2013. All rights reserved.
HTML5 Input Types
25 Source:http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobi...
© 2013. All rights reserved.
HTML5 Input Types
26 Source: http://mobile.smashingmagazine.com/2013/05/29/the-state-of-respo...
© 2013. All rights reserved.
Avoid Sliders
27
© 2013. All rights reserved.
Use Price Range Dropdown
28
© 2013. All rights reserved.
Swipe to rotate images
29
© 2013. All rights reserved.
Navigation Considerations
30 Source: http://mobile.smashingmagazine.com/2013/05/29/the-state-...
© 2013. All rights reserved.
Designer meet Developer
31
© 2013. All rights reserved.
What does it mean
© 2013. All rights reserved.
The Verdict
33
PROS
- one link
- one cart
- improved SEO
- one codebase
- control over font s...
© 2013. All rights reserved.
Results on case study
34
54% up
37% up
~7% up
© 2013. All rights reserved.
Other Published Results
35
© 2013. All rights reserved.36
© 2013. All rights reserved.37
© 2013. All rights reserved.38
© 2013. All rights reserved.
 http://alistapart.com/article/responsive-web-design
 http://mobilewebbestpractices.com/str...
© 2013. All rights reserved.
Great Implementations
40
www.indochino.com www.suitsupply.com
www.nixon.com www.burton.com
© 2013. All rights reserved.
My Details
Justus Wilde
Strategy Director
jw@amblique.com / @justuswilde
© 2013. All rights reserved.
“Selling across the ditch &
beyond”
Wed 13th Nov 2013
Same venue & time
RSVP on meetup.com/sh...
Upcoming SlideShare
Loading in...5
×

Inaugural Shoptalk Auckland - Responsive Design

380

Published on

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

Published in: Business, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
380
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • “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“
  • Devs & designers need to work much more closely togetherSet business/client expectations early
  • CONS-large image downloads-design limitations (i.e. more rearrangement)-different devices, varying objectives-cross browser compatibilities-image resize issues (sometimes resizing images can be problematic)
  • Transcript of "Inaugural Shoptalk Auckland - Responsive Design"

    1. 1. © 2013. All rights reserved.
    2. 2. © 2013. All rights reserved. Mobile Utilisation 2
    3. 3. © 2013. All rights reserved. Quiz 3 Desktop Mobile Tablet April 2012 April 2013 21% mobile 37% mobile How much in July 2013?
    4. 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. 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. 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. 7. © 2013. All rights reserved. Responsive Design: What you need to know
    8. 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. 9. © 2013. All rights reserved.9
    10. 10. © 2013. All rights reserved.10
    11. 11. © 2013. All rights reserved.11
    12. 12. © 2013. All rights reserved. Technically speaking
    13. 13. © 2013. All rights reserved. Media Queries 13 320 x 480 480 x 320 768 x 1024 1024 x 768 Anything larger
    14. 14. © 2013. All rights reserved. #2 Fluid Grids
    15. 15. © 2013. All rights reserved. #2 Fluid Grids
    16. 16. © 2013. All rights reserved.16
    17. 17. © 2013. All rights reserved. Broad Browser Support Source: http://caniuse.com/css-mediaqueries
    18. 18. © 2013. All rights reserved. Design Considerations
    19. 19. © 2013. All rights reserved. Device Agnostic 19 Photo Source: http://thecodezombie.co.uk/
    20. 20. © 2013. All rights reserved. Mobile First 20
    21. 21. © 2013. All rights reserved. Adopt a different approch 21 User Research Content Strategy Sketch Wireframe Visual Design Prototype Test Source: Ron Kattera
    22. 22. © 2013. All rights reserved. Content Inventory & Prioritisation 22 Source:http://www.slideshare.net/pkattera/design-process-for-responsive-web-design
    23. 23. © 2013. All rights reserved. Retina Images 23 Source: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/
    24. 24. © 2013. All rights reserved.24
    25. 25. © 2013. All rights reserved. HTML5 Input Types 25 Source:http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/
    26. 26. © 2013. All rights reserved. HTML5 Input Types 26 Source: http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/
    27. 27. © 2013. All rights reserved. Avoid Sliders 27
    28. 28. © 2013. All rights reserved. Use Price Range Dropdown 28
    29. 29. © 2013. All rights reserved. Swipe to rotate images 29
    30. 30. © 2013. All rights reserved. Navigation Considerations 30 Source: http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/
    31. 31. © 2013. All rights reserved. Designer meet Developer 31
    32. 32. © 2013. All rights reserved. What does it mean
    33. 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. 34. © 2013. All rights reserved. Results on case study 34 54% up 37% up ~7% up
    35. 35. © 2013. All rights reserved. Other Published Results 35
    36. 36. © 2013. All rights reserved.36
    37. 37. © 2013. All rights reserved.37
    38. 38. © 2013. All rights reserved.38
    39. 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. 40. © 2013. All rights reserved. Great Implementations 40 www.indochino.com www.suitsupply.com www.nixon.com www.burton.com
    41. 41. © 2013. All rights reserved. My Details Justus Wilde Strategy Director jw@amblique.com / @justuswilde
    42. 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

    ×