Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to Responsive Design

35f038911d27b705a68cd3b1af328f2f?s=47 Dan Barber
August 16, 2012
Design
4
410

Intro to Responsive Design

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

35f038911d27b705a68cd3b1af328f2f?s=128

Dan Barber

August 16, 2012
Tweet

More Decks by Dan Barber

See All by Dan Barber
35f038911d27b705a68cd3b1af328f2f?s=48 danbarber
21
18k

Other Decks in Design

See All in Design
8037cccadb02628e07c3c70fbfec60b3?s=48 mauricioangulo
0
150
8c6f287c2e6a8b5eb3adf59001fa0ebc?s=48 johattori
0
230
Eb3f099a0ad1b2f8ff9180432ab10d72?s=48 mollysart
0
300
2dd96d0fb363cbdc029639bf0e8452a9?s=48 vincentwu
PRO
0
100
4bbdbff7cb43463ff6b8b90f9fc10b7e?s=48 mashusha
1
220
1a972dee9628f0b1f77d5d8ed164ca1f?s=48 danielblake
0
210
Ca5ba581cade0686426c6bff21a45482?s=48 joelmayer
0
410
Eb3f099a0ad1b2f8ff9180432ab10d72?s=48 mollysart
0
200
03dff56224e9e90d9ced07926baad02c?s=48 vhm
0
160
Ee71ee7ce3939d42a3f13f958396ed3c?s=48 misty_marsden
PRO
0
510
372b0d6ab90110521a5d3aa09f736abc?s=48 seathinner
2
190
859e8975e599ea0d6d9e84eb9e35bdb6?s=48 3mp
1
120

Featured

See All Featured
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
237
10k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
242
21k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
27
2.1k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
20
760
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
206
6.9k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
32
3.5k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
258
36k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
2
550
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
195
15k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
28
970
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
10
1.7k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
494
110k

Transcript

  1. Introduction to Responsive Design

  2. Why Responsive?

  3. None

  4. Best Viewed at 1024x768

  5. None

  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

  17. None
  18. None
  19. None
  20. None

  21. Fin