1Responsive Web DesignDrupalcamp Copenhagen, September 25th 2011
2The What
Current grid/layoutthinking and theory isbased on the notion ofthere being a page towork in from. There isno page.        ...
4What it really isPRINT DESIGN     WEB DESIGN           RESPONSIVE 214 x 110mm    1024 x 768px 4-farve        Window, Mac,...
5The How
6What you need §  Fluid Grid §  Flexible Images/Media §  Media Queries
7From fixed grid to fluid grid12 cols x 80px = The classic 960px grid§  960px = 100%§  80px = (80 / 960) * 100 = 8.33333...
8Flexible Images/Media                                         Image:                                         •  140px wid...
9Media QueriesCSS:@media screen and (max-width: 1024px){   !.cols04 img{float:left;max-width:43.75%;margin:3.125%}!}!!!!@m...
10The Show
11The Tips
12Tips Fluid Grids §  Remember: It’s relative to the parent element §  Beware of subpixel rendering Flexible Images/Medi...
13The Links
14The LinksThe article: http://www.alistapart.com/articles/responsive-web-design/The book: http://www.abookapart.com/produ...
15The Who
16Kim Johannesen §    Head of Design, Peytz & Co §    http://peytz.dk §    @peytz / @peytzdesign §    kjo@peytz.dk § ...
The End
Upcoming SlideShare
Loading in …5
×

Responsive Web Design - Drupal Camp CPH

1,414 views
1,314 views

Published on

A lightning talk! Link to the demo: http://demo.peytz.dk/design/guardian-responsive

Published in: Design, Technology, Business
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,414
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Responsive Web Design - Drupal Camp CPH

  1. 1. 1Responsive Web DesignDrupalcamp Copenhagen, September 25th 2011
  2. 2. 2The What
  3. 3. Current grid/layoutthinking and theory isbased on the notion ofthere being a page towork in from. There isno page. Mark Boulton
  4. 4. 4What it really isPRINT DESIGN WEB DESIGN RESPONSIVE 214 x 110mm 1024 x 768px 4-farve Window, Mac, Linux ? CMYK IE, Safari, Firefox
  5. 5. 5The How
  6. 6. 6What you need §  Fluid Grid §  Flexible Images/Media §  Media Queries
  7. 7. 7From fixed grid to fluid grid12 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. 8Flexible 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. 9Media QueriesCSS:@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. 10The Show
  11. 11. 11The Tips
  12. 12. 12Tips 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. 13The Links
  14. 14. 14The LinksThe article: http://www.alistapart.com/articles/responsive-web-design/The book: http://www.abookapart.com/products/responsive-web-designThe tweets: @beep @rwd @adactio @markboulton
  15. 15. 15The Who
  16. 16. 16Kim Johannesen §  Head of Design, Peytz & Co §  http://peytz.dk §  @peytz / @peytzdesign §  kjo@peytz.dk §  http://kimblim.dk §  @therealkimblim / @overflowhidden
  17. 17. The End

×