Intro to Responsive Design

An introduction to responsive design, what it is, why it exists and how to implement it.

Transcript

1. Introduction to Responsive Design
2. Why Responsive?
4. Best Viewed at 1024x768
6. Flexible Grid
7. 960px 140px 20px
8. max-width: 960px 14.5833...% 2.0833...%
9. Flexible Media
10. img { max-width: 100%; }
11. img, embed, object, video { max-width: 100%; }
12. Media Queries
13. @media screen and (min-width: 680px) { ... }
14. @media only screen and (min-device-pixel-ratio: 2) { ... }
15. <meta name=”viewport” content=”initial-scale=1.0, width=device-width” />
16. Showcase
21. Fin