Responsive Design
Jan 27, 2015
A simplified introduction to the concept of Responsive Design.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
How We Design(ed)
Oh Yeah, Mobile!
http://wtfmobileweb.com/post/54912647443/
What Do We Do?
What’s the problem?
http://wtfmobileweb.com/post/55600401786/
http://wtfmobileweb.com/post/54793886495/
What Do We Do Instead?
Responsive Design
How Does It Work?
Responsive Websites Have...
• Flexible Content
Responsive Websites Have...
• Flexible Content
• Dynamic Design
Responsive Websites Have...
Flexible Content
img { max-width: 100%;}
Dynamic Design
/* styles for all screen widths go here */
@media screen and (max-width: 700px) { /* browsers 700px and smaller get these styles */}
New Mobile Devices Per Day
http://www.lukew.com/ff/entry.asp?1728
New Mobile Devices Per Day
http://www.lukew.com/ff/entry.asp?1728
2011 2012
1,450,000
New Mobile Devices Per Day
http://www.lukew.com/ff/entry.asp?1728
2011 2012
1,450,000
3,600,000
Worldwide Mobile
http://www.lukew.com/ff/entry.asp?1644
• Over 1 billion smartphones worldwide.
Worldwide Mobile
http://www.lukew.com/ff/entry.asp?1644
• Over 1 billion smartphones worldwide.
• 16 years to reach 1 billion.
Worldwide Mobile
http://www.lukew.com/ff/entry.asp?1644
• Over 1 billion smartphones worldwide.
• 16 years to reach 1 billion.
• Estimated 3 years to reach 2 billion.
Worldwide Mobile
http://www.lukew.com/ff/entry.asp?1644
• 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.
Worldwide Mobile
http://www.lukew.com/ff/entry.asp?1644
/* styles for all screen widths go here */
@media screen and (max-width: 700px) { /* browsers 700px and smaller get these styles */}
/* styles for all screen widths go here */
@media screen and (min-width: 1005px) { /* browsers 1005px and wider get these styles */}
/* styles for all screen widths go here */
@media screen and (min-width: 1005px) { /* browsers 1005px and wider get these styles */}
/* 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 */}
Technical Considerations
• Bandwidth
Technical Considerations
• Bandwidth
• Context
Technical Considerations
• Bandwidth
• Context
• Images - https://github.com/scottjehl/picturefill
Technical Considerations
• Bandwidth
• Context
• Images - https://github.com/scottjehl/picturefill
• Maintenance
Technical Considerations
The Future
Further Reading
Further Reading
• http://mediaqueri.es/
• http://alistapart.com/
Further Reading
• http://mediaqueri.es/
• http://alistapart.com/
• http://www.lukew.com/ff/
Further Reading
• http://mediaqueri.es/
• http://alistapart.com/
• http://www.lukew.com/ff/
• http://aneventapart.com/
Questions
Related Documents
