Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Design

400 views

Published on

A simplified introduction to the concept of Responsive Design.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Responsive Design

  1. 1. Responsive Design Joel Boonstra joel@agathongroup.com @jboonstra
  2. 2. How We Design(ed)
  3. 3. Oh Yeah, Mobile!
  4. 4. http://wtfmobileweb.com/post/54912647443/
  5. 5. What Do We Do?
  6. 6. What’s the problem?
  7. 7. http://wtfmobileweb.com/post/55600401786/
  8. 8. http://wtfmobileweb.com/post/54793886495/
  9. 9. What Do We Do Instead?
  10. 10. Responsive Design
  11. 11. How Does It Work?
  12. 12. Responsive Websites Have...
  13. 13. Responsive Websites Have... • Flexible Content
  14. 14. Responsive Websites Have... • Flexible Content • Dynamic Design
  15. 15. Flexible Content
  16. 16. img { max-width: 100%; }
  17. 17. Dynamic Design
  18. 18. /* styles for all screen widths go here */ @media screen and (max-width: 700px) { /* browsers 700px and smaller get these styles */ }
  19. 19. New Mobile Devices Per Day http://www.lukew.com/ff/entry.asp?1728
  20. 20. New Mobile Devices Per Day 1,450,000 2011 2012 http://www.lukew.com/ff/entry.asp?1728
  21. 21. New Mobile Devices Per Day 3,600,000 1,450,000 2011 2012 http://www.lukew.com/ff/entry.asp?1728
  22. 22. Worldwide Mobile http://www.lukew.com/ff/entry.asp?1644
  23. 23. Worldwide Mobile • Over 1 billion smartphones worldwide. http://www.lukew.com/ff/entry.asp?1644
  24. 24. Worldwide Mobile • • Over 1 billion smartphones worldwide. 16 years to reach 1 billion. http://www.lukew.com/ff/entry.asp?1644
  25. 25. Worldwide Mobile • • • Over 1 billion smartphones worldwide. 16 years to reach 1 billion. Estimated 3 years to reach 2 billion. http://www.lukew.com/ff/entry.asp?1644
  26. 26. Worldwide Mobile • • • • Over 1 billion smartphones worldwide. 16 years to reach 1 billion. Estimated 3 years to reach 2 billion. 46% of the population has at least one active mobile device. http://www.lukew.com/ff/entry.asp?1644
  27. 27. /* styles for all screen widths go here */ @media screen and (max-width: 700px) { /* browsers 700px and smaller get these styles */ }
  28. 28. /* styles for all screen widths go here */ @media screen and (min-width: 1005px) { /* browsers 1005px and wider get these styles */ }
  29. 29. /* styles for all screen widths go here */ @media screen and (min-width: 1005px) { /* browsers 1005px and wider get these styles */ }
  30. 30. /* styles for all screen widths go here */ @media screen and (min-width: 1005px) { /* browsers 1005px and wider get these styles */ } @media screen and (min-width: 1200px) { /* browsers 1200px and wider get these styles */ }
  31. 31. Technical Considerations
  32. 32. Technical Considerations • Bandwidth
  33. 33. Technical Considerations • • Bandwidth Context
  34. 34. Technical Considerations • • • Bandwidth Context Images - https://github.com/scottjehl/ picturefill
  35. 35. Technical Considerations • • • Bandwidth • Maintenance Context Images - https://github.com/scottjehl/ picturefill
  36. 36. The Future
  37. 37. Further Reading
  38. 38. Further Reading • http://mediaqueri.es/
  39. 39. Further Reading • • http://mediaqueri.es/ http://alistapart.com/
  40. 40. Further Reading • • • http://mediaqueri.es/ http://alistapart.com/ http://www.lukew.com/ff/
  41. 41. Further Reading • • • • http://mediaqueri.es/ http://alistapart.com/ http://www.lukew.com/ff/ http://aneventapart.com/
  42. 42. Questions
  43. 43. Thanks! Joel Boonstra joel@agathongroup.com @jboonstra

×