Responsive Design

239
-1

Published on

A simplified introduction to the concept of Responsive Design.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
239
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×