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