Responsive Web Design - Drupal Camp CPH
5 likes602 views
This document discusses responsive web design. It begins by explaining that current grid/layout thinking is based on pages, but with responsive design there is no page. It then discusses how responsive design works by using fluid grids, flexible images and media, and media queries to adapt the layout based on screen size. It provides examples of how to implement a fluid grid and make images flexible. Finally, it gives some tips for responsive design such as using relative sizing and media queries to define breakpoints for different screen widths.
Responsive Web Design - Drupal Camp CPH
- 1. 1 Responsive Web Design Drupalcamp Copenhagen, September 25th 2011
- 2. 2 The What
- 3. Current grid/layout thinking and theory is based on the notion of there being a page to work in from. There is no page. Mark Boulton
- 4. 4 What it really is PRINT DESIGN WEB DESIGN RESPONSIVE 214 x 110mm 1024 x 768px 4-farve Window, Mac, Linux ? CMYK IE, Safari, Firefox
- 5. 5 The How
- 6. 6 What you need § Fluid Grid § Flexible Images/Media § Media Queries
- 7. 7 From fixed grid to fluid grid 12 cols x 80px = The classic 960px grid § 960px = 100% § 80px = (80 / 960) * 100 = 8.33333333% CSS: .cols12{width:100%}! .cols01{float:left;width:8.33333333%}! .cols02{float:left;width:16.66666666%}! .. And so on ..
- 8. 8 Flexible Images/Media Image: • 140px wide – 10px margin • But within a 4 column (320px) section § 320px = 100% § 140px = (140 / 320) * 100 = 43.75% § 10px = (10 / 320) * 100 = 3.125% CSS: .cols04 img{float:left;max-width:43.75%;margin:3.125%}!
- 9. 9 Media Queries CSS: @media screen and (max-width: 1024px){ !.cols04 img{float:left;max-width: 43.75%;margin:3.125%}! }! ! ! ! @media screen and (min-width: 1024px){ !.cols04 img{float:none;max-width: 93.75%;margin:3.125%}! }! ! HTML: <meta name="viewport" content="width=device- width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />! ! !
- 10. 10 The Show
- 11. 11 The Tips
- 12. 12 Tips Fluid Grids § Remember: It’s relative to the parent element § Beware of subpixel rendering Flexible Images/Media § Use AlphaImageLoader to improve image quality in IE-browsers § Use fitvids.js for flexible video § Serve different image sizes dependent on resolution Media Queries § Go mobile content first § Define your breakpoints early on and don’t overdo it § IE6-8? Use respond.js (or don’t bother) § Remember your <meta viewport ..> tag
- 13. 13 The Links
- 14. 14 The Links The article: http://www.alistapart.com/articles/responsive-web-design/ The book: http://www.abookapart.com/products/responsive-web-design The tweets: @beep @rwd @adactio @markboulton
- 15. 15 The Who
- 16. 16 Kim Johannesen § Head of Design, Peytz & Co § http://peytz.dk § @peytz / @peytzdesign § kjo@peytz.dk § http://kimblim.dk § @therealkimblim / @overflowhidden
- 17. The End