Tao Te Ching

Nowadays

• Different Platform:Windows,Mac,Linux,iOS,Android,WP 7,WebOS,Chrome OS...
• Plenty of devices
• Multiple resolutions
• Landscape & portrait
• Smart devices increasing quickly.
• Cloud Computing,browser is the future,iOS5 take Nitro engine to web app

Responsive Web Design

• Introducted by Ethan Marcotte at a List Apart
• No more sub domains
• No more iPhone-special page
• One page for all devices

How to do

• Media query
• Fluid grid:using percentage length
• Flex box

Showcase

Showcase

Showcase

Showcase

Showcase

Pros

• Less working
• No more device-special sub-domain
• Adaptive many kinds of devices

Cons

• Bandwidth limitation
• Small memory & slow CPU
• Download useless resources
• Image size

Tricks

• Design for mobile first,pc as an extend
• Use a fluid grid
• Modular
• No iframe
• Fluid img: 100% width or max-width,so does videos
• <pre> white-space:pre-wrap

Tools:responsive wireframes

Tools

• Responsive Design Testing
• Resize My Browser
• Media Query Bookmarklet
• 320 and Up
• responsive images using css3