Tweet
Tweet

Slide 1

Slide 1 text

RESPONSIVE WEB DESIGN codes + slides Tuesday, May 15, 12

Slide 2

Slide 2 text

@sayanee_ Tuesday, May 15, 12

Slide 3

Slide 3 text

RESPONSIVE WEB DESIGN Tuesday, May 15, 12

Slide 4

Slide 4 text

RESPONSIVE WEB DESIGN adaptive fluid flexible flowing Tuesday, May 15, 12

Slide 5

Slide 5 text

RESPONSIVE WEB DESIGN adaptive fluid flexible flowing device-agnostic optimised-viewing Tuesday, May 15, 12

Slide 6

Slide 6 text

EXAMPLES Media Queries Happy Cognition Simple Bits Responsive 2010 Duster Theme Shelf Foundry Theme Tileables Mr. Simon Colly Tuesday, May 15, 12

Slide 7

Slide 7 text

TOOLS Tuesday, May 15, 12

Slide 8

Slide 8 text

TOOLS Browser Tuesday, May 15, 12

Slide 9

Slide 9 text

TOOLS Browser Text Editor Tuesday, May 15, 12

Slide 10

Slide 10 text

TOOLS Browser Text Editor Simulator Tuesday, May 15, 12

Slide 11

Slide 11 text

TOOLS Browser Text Editor Simulator Tuesday, May 15, 12

Slide 12

Slide 12 text

TOOLS Browser Text Editor Simulator Coding Tuesday, May 15, 12

Slide 13

Slide 13 text

#1 fluid layout #2 media queries #3 flexible media Tuesday, May 15, 12

Slide 14

Slide 14 text

#1 fluid layout Tuesday, May 15, 12

Slide 15

Slide 15 text

#1 fluid layout 1280px Tuesday, May 15, 12

Slide 16

Slide 16 text

#1 fluid layout 1280px 960px Hola! Travel with me devices footer Tuesday, May 15, 12

Slide 17

Slide 17 text

#1 fluid layout 1280px 960px Hola! Travel with me 600px devices main footer Tuesday, May 15, 12

Slide 18

Slide 18 text

#1 fluid layout 1280px 960px Hola! Travel with me 600px 300px devices main sidebar footer Tuesday, May 15, 12

Slide 19

Slide 19 text

#1 fluid layout think in pixels percentages target / context = result Tuesday, May 15, 12

Slide 20

Slide 20 text

#1 fluid layout 1280px 960px Hola! Travel with me 600px 300px devices main sidebar footer Tuesday, May 15, 12

Slide 21

Slide 21 text

#1 fluid layout 1280px 960px Hola! Travel with me 600px 300px devices main sidebar footer /1280px = 75% / 960px= 62.5% /960px = 31.25% 960px / 960px = 100% 960px / 960px = 100% Tuesday, May 15, 12

Slide 22

Slide 22 text

#2 media queries min-width landscape 1024px portrait 768px 1280px landscape 960px portrait 640px four layouts 1200px 1024px 768px 600px Tuesday, May 15, 12

Slide 23

Slide 23 text

#2 media queries 1200px 1024px 768px 600px Tuesday, May 15, 12

Slide 24

Slide 24 text

#2 media queries 1200px 1024px 768px 600px @media screen and (max-width: ){} /* desktop */ in style.css : @media screen and (max-width: ){} /* iPad landscape */ @media screen and (max-width: ){} /* iPad portrait */ @media screen and (max-width: ){} /* iPhone */ Tuesday, May 15, 12

Slide 25

Slide 25 text

#2 media queries 1200px 1024px 768px 600px @media screen and (max-width: ){} /* desktop */ in style.css : @media screen and (max-width: ){} /* iPad landscape */ @media screen and (max-width: ){} /* iPad portrait */ @media screen and (max-width: ){} /* iPhone */ in index.html, inside : Tuesday, May 15, 12

Slide 26

Slide 26 text

#3 flexible media img, embed, object, video { max-width:100% } Tuesday, May 15, 12

Slide 27

Slide 27 text

#3 flexible media flexible heading using fittext.js Tuesday, May 15, 12

Slide 28

Slide 28 text

OTHER RESOURCES Blog posts: 1. Think Vitamin 2. A-List Apart 3. Smashing Magazine 4. Fluid Images 5. Web Designer Wall 6. CSS Tricks 7. Six Revisions 8. fittext.js Books: 1. by Ethan Marcotte Videos: 1. Nettuts Tuesday, May 15, 12

Slide 29

Slide 29 text

codes + slides Tuesday, May 15, 12

Slide 30

Slide 30 text

@sayanee_ Tuesday, May 15, 12