Inaugural Shoptalk Auckland - Responsive Design

437
-1

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
437
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)
  • 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

    ×