Responsive Web Design

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

@sayanee_ Tuesday, May 15, 12

RESPONSIVE WEB DESIGN Tuesday, May 15, 12

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

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

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

TOOLS Tuesday, May 15, 12

TOOLS Browser Tuesday, May 15, 12

TOOLS Browser Text Editor Tuesday, May 15, 12

TOOLS Browser Text Editor Simulator Tuesday, May 15, 12

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

#1 ﬂuid layout #2 media queries #3 ﬂexible media Tuesday,
May 15, 12

#1 ﬂuid layout Tuesday, May 15, 12

#1 ﬂuid layout 1280px Tuesday, May 15, 12

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

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

300px devices main sidebar footer Tuesday, May 15, 12

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

300px devices main sidebar footer Tuesday, May 15, 12

300px devices main sidebar footer /1280px = 75% / 960px= 62.5% /960px = 31.25% 960px / 960px = 100% 960px / 960px = 100% Tuesday, May 15, 12

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

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

#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

#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 <head> : <meta name="viewport" content="width = device-width" /> Tuesday, May 15, 12

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

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

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. ﬁttext.js Books: 1. by Ethan Marcotte Videos: 1. Nettuts Tuesday, May 15, 12

codes + slides Tuesday, May 15, 12

@sayanee_ Tuesday, May 15, 12

Responsive Web Design

Responsive Web Design

Sayanee

More Decks by Sayanee

Other Decks in Technology

Featured

Transcript