Responsive Design
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Responsive Design

  • 290 views
Uploaded on

A simplified introduction to the concept of Responsive Design.

A simplified introduction to the concept of Responsive Design.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
290
On Slideshare
290
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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