Responsive Web Design

Transcript

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

2. @sayanee_ Tuesday, May 15, 12

3. RESPONSIVE WEB DESIGN Tuesday, May 15, 12

4. RESPONSIVE WEB DESIGN adaptive fluid flexible flowing Tuesday, May 15,

   12

5. RESPONSIVE WEB DESIGN adaptive fluid flexible flowing device-agnostic optimised-viewing Tuesday,

   May 15, 12

6. EXAMPLES Media Queries Happy Cognition Simple Bits Responsive 2010 Duster

   Theme Shelf Foundry Theme Tileables Mr. Simon Colly Tuesday, May 15, 12

7. TOOLS Tuesday, May 15, 12

8. TOOLS Browser Tuesday, May 15, 12

9. TOOLS Browser Text Editor Tuesday, May 15, 12

10. TOOLS Browser Text Editor Simulator Tuesday, May 15, 12

11. TOOLS Browser Text Editor Simulator Tuesday, May 15, 12

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

13. #1 fluid layout #2 media queries #3 flexible media Tuesday,

    May 15, 12

14. #1 fluid layout Tuesday, May 15, 12

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

16. #1 fluid layout 1280px 960px Hola! Travel with me devices

    footer Tuesday, May 15, 12

17. #1 fluid layout 1280px 960px Hola! Travel with me 600px

    devices main footer Tuesday, May 15, 12

18. #1 fluid layout 1280px 960px Hola! Travel with me 600px

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

19. #1 fluid layout think in pixels percentages target / context

    = result Tuesday, May 15, 12

20. #1 fluid layout 1280px 960px Hola! Travel with me 600px

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

21. #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

22. #2 media queries min-width landscape 1024px portrait 768px 1280px landscape

    960px portrait 640px four layouts 1200px 1024px 768px 600px Tuesday, May 15, 12

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

    12

24. #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

25. #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

26. #3 flexible media img, embed, object, video { max-width:100% }

    Tuesday, May 15, 12

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

    12

28. 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

29. codes + slides Tuesday, May 15, 12

30. @sayanee_ Tuesday, May 15, 12