responsive web design
DESCRIPTION
I gave a presentation about responsive web design in training course in iAgent Lab in NTU.TRANSCRIPT
Responsive Web Design
@janetyc
Janet Huang2011/08/03
mobile sitestandard site
Responsive Web Designcontext-aware web design
Think Vitamin
Hicksdesign
http://thinkvitamin.com/
http://hicksdesign.co.uk/
Flexible grid
Flexible image
Media queries
+
+
= Responsive web
http://net.tutsplus.com/tutorials/html-css-techniques/responsive-web-design-a-visual-guide/
content sidebar
banner
header
container
content sidebar
banner
header
container
fixed layout
1. Flexible grid
proportional thinking
target / context = result
content sidebar
banner
header
1200px
900px 280px
container
900px/1200px = 75%
280px/1200px = 23.3333%
900px/16px = 56.25emor
or280px/16px = 17.5em
px % or em
default font size
2. Flexible images
img { max-width: 100%; }
embed, object, video { max-width: 100%; }
or
.feature { overflow: hidden; } img
.feature
#issue in IE6: max-width can’t be used in IE6
img, video, object { width: 100%; }v
3. media queries
@media screen and (max-device-width: 480px) { ... }
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />
How?
@import url("shetland.css") screen and (max-device-width: 480px);
in html...
in css... media type media query
Media feature
widthheightdevice-widthdevice-heightorientationaspect-ratio
device-aspect-ratiocolorcolor-indexmonochromeresolutionscangrid
css-mediaqueries-jshttp://code.google.com/p/css3-mediaqueries-js/
browser compatibility
v.s.
#issue in viewpoint
<meta name="viewport" content="width=device-width; initial-scale=1.0"/>
browser
device-width
widthviewpoint...
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.tutsplus.com/tutorials/html-css-techniques/responsive-web-design-a-visual-guide/
• http://mediaqueri.es/
• HTML5
• http://www.html5rocks.com