Responsive Web Design       Janet Huang        2011/08/03                     @janetyc
mobile site              standard site
Responsive Web Design    context-aware web design
Think Vitamin   http://thinkvitamin.com/Hicksdesign   http://hicksdesign.co.uk/
Flexible grid     +Flexible image   =   Responsive web     +Media queries
http://net.tutsplus.com/tutorials/html-css-techniques/responsive-web-design-a-visual-guide/
header                      banner            content   sidebarcontainer
header                      banner            content   sidebarcontainer
fixed layout
1. Flexible grid
proportional thinking
target / context = result
px            % or em 1200px    900px/1200px = 75%                                                           header       ...
2. Flexible images
img { max-width: 100%; }embed, object, video { max-width: 100%; }or                                   .feature.feature { o...
#issue in IE6: max-width can’t be used in IE6  v img, video, object { width: 100%; }
3. media queries
How?in html... <link rel="stylesheet" type="text/css" media="screen and     (max-device-width: 480px)" href="shetland.css"...
Media feature      width           device-aspect-ratio      height          color      device-width    color-index      de...
css-mediaqueries-js                          http://code.google.com/p/css3-mediaqueries-js/browser compatibility
#issue in viewpoint                      v.s.
viewpoint...                width                         device-width               browser      <meta name="viewport" co...
Demo & Practice
Get the book!
Tools• Opera Mobile Emulator• HTML5 Boilerplate• Modernizr
Reference• Responsive web design •   http://www.alistapart.com/articles/responsive-web-     design/ •   http://net.tutsplu...
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Upcoming SlideShare
Loading in …5
×

Responsive web design

2,738 views

Published on

I gave a presentation about responsive web design in training course in iAgent Lab in NTU.

Published in: Technology, Design

Responsive web design

  1. 1. Responsive Web Design Janet Huang 2011/08/03 @janetyc
  2. 2. mobile site standard site
  3. 3. Responsive Web Design context-aware web design
  4. 4. Think Vitamin http://thinkvitamin.com/Hicksdesign http://hicksdesign.co.uk/
  5. 5. Flexible grid +Flexible image = Responsive web +Media queries
  6. 6. http://net.tutsplus.com/tutorials/html-css-techniques/responsive-web-design-a-visual-guide/
  7. 7. header banner content sidebarcontainer
  8. 8. header banner content sidebarcontainer
  9. 9. fixed layout
  10. 10. 1. Flexible grid
  11. 11. proportional thinking
  12. 12. target / context = result
  13. 13. px % or em 1200px 900px/1200px = 75% header or 900px/16px = 56.25em banner 900px 280px 280px/1200px = 23.3333% or default font size 280px/16px = 17.5em content sidebarcontainer
  14. 14. 2. Flexible images
  15. 15. img { max-width: 100%; }embed, object, video { max-width: 100%; }or .feature.feature { overflow: hidden; } img
  16. 16. #issue in IE6: max-width can’t be used in IE6 v img, video, object { width: 100%; }
  17. 17. 3. media queries
  18. 18. How?in html... <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />in css... media type media query @media screen and (max-device-width: 480px) { ... } @import url("shetland.css") screen and (max-device-width: 480px);
  19. 19. Media feature width device-aspect-ratio height color device-width color-index device-height monochrome orientation resolution aspect-ratio scan grid
  20. 20. css-mediaqueries-js http://code.google.com/p/css3-mediaqueries-js/browser compatibility
  21. 21. #issue in viewpoint v.s.
  22. 22. viewpoint... width device-width browser <meta name="viewport" content="width=device- width; initial-scale=1.0"/>
  23. 23. Demo & Practice
  24. 24. Get the book!
  25. 25. Tools• Opera Mobile Emulator• HTML5 Boilerplate• Modernizr
  26. 26. Reference• Responsive web design • http://www.alistapart.com/articles/responsive-web- design/ • http://net.tutsplus.com/tutorials/html-css- techniques/responsive-web-design-a-visual-guide/ • http://mediaqueri.es/• HTML5 • http://www.html5rocks.com

×