1. Responsive
Web Design
Jon Buda
Monday, September 27, 2010
2. Follow Along...
http://jonbuda.com/refresh/responsive/
Monday, September 27, 2010
3. “
The control which designers know in the print
medium, and often desire in the web medium, is
simply a function of the limitation of the printed
page. We should embrace the fact that the web
doesn’t have the same constraints, and design for
this flexibility. But first, we must ‘accept the ebb and
flow of things.’
- John Allsopp via A Dao of Web Design
Monday, September 27, 2010
10. CSS3 - Media Features
width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid
Monday, September 27, 2010
11. CSS3 - Media Features
width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid
Monday, September 27, 2010
12. Syntax
@media screen and (min-width: 400px) { … }
@media all and (orientation:landscape) { … }
@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (color), projection and (color) { … }
@media print and (min-resolution: 300dpi) { … }
Monday, September 27, 2010
13. Example #1
Starting with a fluid layout.
Percentage-based widths.
Monday, September 27, 2010
14. Example #2
Apply some extra scaling for wide viewports
@media (max-width: 800px) {...}
@media (min-width: 1300px) {...}
@media (min-width: 1600px) {...}
Monday, September 27, 2010
15. Example #3
Targeting mobile and small viewports
@media (max-width: 480px) {...}
@media (max-width: 480px) and (orientation: landscape) {...}
@media (min-resolution: 300dpi) {...}
Monday, September 27, 2010
17. Browser Support
Safari 3+
Chrome
Firefox 3.5+
Opera 7+
IE9
Opera Mobile
Mobile WebKit (iPhone, iPad, iPod Touch, newer Blackberries, Android)
Monday, September 27, 2010
18. But what about IE 6,7, and 8!?
css3-mediaqueries.js
http://code.google.com/p/css3-mediaqueries-js/
JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test
and apply CSS3 Media Queries.
Monday, September 27, 2010
19. “
‘Responsive Web Design’ is way
cool — but I rarely want to serve
the same content to devices with
different sized screens. It ignores
context.
- Jeff Croft via jeffcroft.com
Monday, September 27, 2010
20. “
‘Responsive Web Design’ is way
cool — but I rarely want to serve
the same content to devices with
different sized screens. It ignores
context.
- Jeff Croft via jeffcroft.com
Monday, September 27, 2010
21. Questions?
Jon Buda
@jonbuda
http://jonbuda.com
Monday, September 27, 2010
