Tweet
Tweet

Slide 1

Slide 1 text

Introduction to Responsive Design

Slide 2

Slide 2 text

Why Responsive?

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Best Viewed at 1024x768

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Flexible Grid

Slide 7

Slide 7 text

960px 140px 20px

Slide 8

Slide 8 text

max-width: 960px 14.5833...% 2.0833...%

Slide 9

Slide 9 text

Flexible Media

Slide 10

Slide 10 text

img { max-width: 100%; }

Slide 11

Slide 11 text

img, embed, object, video { max-width: 100%; }

Slide 12

Slide 12 text

Media Queries

Slide 13

Slide 13 text

@media screen and (min-width: 680px) { ... }

Slide 14

Slide 14 text

@media only screen and (min-device-pixel-ratio: 2) { ... }

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Showcase

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Fin