What does "Responsive Web Design" mean?

• Designing for multiple device resolutions (computer screens, phones, tablets, tvs, etc.)

The technique:

1. Detect device resolution with CSS3 Media Queries
   
   
2. Write resolution specific CSS
   
   
3. Use fluid grids and images for all other resolutions
   
   

Media Query example

This CSS rule only applies to small screens

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

This manages viewport zoom on WebKit browsers

<meta name="viewport" content="width=960px; user-scalable=1;">

• W3C Spec
• Media Queries for Standard Devices

Examples:

• mediaqueri.es
• CSS-tricks
• 10 Beautiful examples of responsive Web design

Non-examples of responsive design:

Using browser detection to serve a completely different code base.

• Twitter
• Facebook
• Gmail
• LinkedIn

Responsive Design vs. Web App vs. Native App?

• Responsive = unified code base
• Web App = more robust
• Native = more performant

• Based on business needs
• More design, dev, and testing = $$$