Responsive Web Design

83f7b66c4dee7effbb3717027f99282b?s=47 Sayanee
May 15, 2012
Technology
3
190

Responsive Web Design

83f7b66c4dee7effbb3717027f99282b?s=128

Sayanee

May 15, 2012
Tweet

Want more?

83f7b66c4dee7effbb3717027f99282b?s=48 sayanee
2
560
83f7b66c4dee7effbb3717027f99282b?s=48 sayanee
5
390
83f7b66c4dee7effbb3717027f99282b?s=48 sayanee
3
270
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
1
140
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
1
67
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
68
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
4
130
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
3
150
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
2
220
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
2
410
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
110
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
200

Transcript

  1. 1.

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

  2. 2.

    @sayanee_ Tuesday, May 15, 12

  3. 3.

    RESPONSIVE WEB DESIGN Tuesday, May 15, 12

  4. 4.

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

    12
  5. 5.

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

    May 15, 12
  6. 6.

    EXAMPLES Media Queries Happy Cognition Simple Bits Responsive 2010 Duster

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

    TOOLS Tuesday, May 15, 12

  8. 8.

    TOOLS Browser Tuesday, May 15, 12

  9. 9.

    TOOLS Browser Text Editor Tuesday, May 15, 12

  10. 10.

    TOOLS Browser Text Editor Simulator Tuesday, May 15, 12

  11. 11.

    TOOLS Browser Text Editor Simulator Tuesday, May 15, 12

  12. 12.

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

  13. 13.

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

    May 15, 12
  14. 14.

    #1 fluid layout Tuesday, May 15, 12

  15. 15.

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

  16. 16.

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

    footer Tuesday, May 15, 12
  17. 17.

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

    devices main footer Tuesday, May 15, 12
  18. 18.

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

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

    #1 fluid layout think in pixels percentages target / context

    = result Tuesday, May 15, 12
  20. 20.

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

    300px devices main sidebar footer Tuesday, May 15, 12
  21. 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. 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. 23.

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

    12
  24. 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. 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. 26.

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

    Tuesday, May 15, 12
  27. 27.

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

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

    codes + slides Tuesday, May 15, 12

  30. 30.

    @sayanee_ Tuesday, May 15, 12