1. Intro to RESPONSIVE DESIGN

2. Why?

3. What? http://mediaqueri.es/

4. How? 3 part process  Fluid Grid System  Responsive Images  Media Queries

5. Fluid Grid System  NO PIXELS!  Use Percentages

6. Fluid Grid System

9. Target % Context = Result 300px % 960px = 31.25%

10. Responsive Images THESE ARE NOT RESPONSIVE IMAGES

11. Responsive Images THESE ARE RESPONSIVE IMAGES

12. Responsive Images  Set max-width = 100% in the CSS

13. Media Queries

16. Last Ingredient  Need to set the viewport.

17. Learn More? Ethan Marcotte: Responsive Web DesignEthan Marcotte: Responsive Web Design

18. Learn.ShayHowe.com