Responsive Design for the Web
- 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
- 4. The Situation Monday, September 27, 2010
- 5. The Situation Desktop Print 16:9 4:3 Mobile Kindle HD iPad Television Projectors Game Consoles Automobiles Monday, September 27, 2010
- 6. CSS 2.1 all screen print projector handheld Monday, September 27, 2010
- 7. CSS 2.1 all screen print projector handheld Monday, September 27, 2010
- 8. CSS 2.1 all screen print projector handheld <link rel="stylesheet" href="screen.css" media="screen"> <link rel="stylesheet" href="print.css" media="print"> Monday, September 27, 2010
- 9. CSS 2.1 all screen print projector handheld <link rel="stylesheet" href="screen.css" media="screen"> <link rel="stylesheet" href="print.css" media="print"> @media screen { ... } @media print { ... } 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
- 16. 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
- 22. Resources • http://www.alistapart.com/articles/responsive-web-design/ • http://jeffcroft.com/blog/2010/aug/06/responsive-web-design-and-mobile-context/ • http://www.w3.org/TR/css3-mediaqueries • http://www.quirksmode.org/blog/archives/2010/08/combining_media.html • http://lessframework.com/ Monday, September 27, 2010