Responsive Design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Responsive Design

on

  • 270 views

A simplified introduction to the concept of Responsive Design.

A simplified introduction to the concept of Responsive Design.

Statistics

Views

Total Views
270
Views on SlideShare
270
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Design Presentation Transcript

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