This document discusses responsive web design techniques including flexible grids, flexible images using max-width, and media queries. A flexible grid uses relative units like percentages and em instead of pixels to resize and reflow content depending on screen size. Flexible images are made responsive using max-width: 100% so they scale down but not up. Media queries allow applying different CSS styles depending on common device breakpoints like mobile versus desktop.

1. Responsive Web Design
Janet Huang
2011/08/03
@janetyc

4. mobile site
standard site

5. Responsive Web Design
context-aware web design

6. Think Vitamin http://thinkvitamin.com/
Hicksdesign http://hicksdesign.co.uk/

7. Flexible grid
+
Flexible image = Responsive web
+
Media queries

8. http://net.tutsplus.com/tutorials/html-css-techniques/responsive-web-design-a-visual-guide/

9. header
banner
content sidebar
container

10. header
banner
content sidebar
container

11. fixed layout

12. 1. Flexible grid

13. proportional thinking

14. target / context = result

15. 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 sidebar
container

16. 2. Flexible images

17. img { max-width: 100%; }
embed, object, video { max-width: 100%; }
or
.feature
.feature { overflow: hidden; } img

18. #issue in IE6: max-width can’t be used in IE6
v img, video, object { width: 100%; }

19. 3. media queries

20. 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);

21. Media feature
width device-aspect-ratio
height color
device-width color-index
device-height monochrome
orientation resolution
aspect-ratio scan
grid

23. css-mediaqueries-js
http://code.google.com/p/css3-mediaqueries-js/
browser compatibility

24. #issue in viewpoint
v.s.

25. viewpoint... width
device-width
browser
<meta name="viewport" content="width=device-
width; initial-scale=1.0"/>

28. Demo & Practice

29. Get the book!

30. Tools
• Opera Mobile Emulator
• HTML5 Boilerplate
• Modernizr

31. 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