Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Design

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

Responsive Web Design

83f7b66c4dee7effbb3717027f99282b?s=128

Sayanee

May 15, 2012
Tweet

More Decks by Sayanee

See All by Sayanee
83f7b66c4dee7effbb3717027f99282b?s=48 sayanee
2
610
83f7b66c4dee7effbb3717027f99282b?s=48 sayanee
5
390
83f7b66c4dee7effbb3717027f99282b?s=48 sayanee
3
270
83f7b66c4dee7effbb3717027f99282b?s=48 sayanee
3
300
83f7b66c4dee7effbb3717027f99282b?s=48 sayanee
1
190
83f7b66c4dee7effbb3717027f99282b?s=48 sayanee
8
300
83f7b66c4dee7effbb3717027f99282b?s=48 sayanee
9
860
83f7b66c4dee7effbb3717027f99282b?s=48 sayanee
2
170
83f7b66c4dee7effbb3717027f99282b?s=48 sayanee
9
480

Other Decks in Technology

See All in Technology
6ca465019a72647f8a6ee0347686fcd3?s=48 kataokatsuki
2
230
8065fe5a0d33908c6f71c5ae28939dcd?s=48 ayatokura
0
230
9b2600a82821673d9d0f03cc6f7bc56e?s=48 kloudleinc
0
680
23f4d5d797a91b6d17d627b90b5a42d9?s=48 kentaro
2
210
652359244199b2b5108a5e09c027e0da?s=48 ykanazawa
0
310
0d29d155ce5c5a93ed46363626da3ea7?s=48 ocise
0
110
439d941a6e41920af9bf4d5bd5f97e3a?s=48 nghialv
2
240
7cd783377515bdf8207062840b7b2f4e?s=48 soracom
0
800
94870c02836167043f37f05ae1032690?s=48 tatsy
0
100
525442fc70ca92f82ae503f826956137?s=48 finengine
0
130
4ab9c4c8dec50dc08b89981e23e111f2?s=48 katsumataryo
3
810
85da685d91fda190e2e3162d0de248a4?s=48 recruitengineers
0
220

Featured

See All Featured
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
8
590
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
93
3.1k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
116
7.2k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
52
2.9k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
502
36k
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
10
540
5f50f94346fbcb23706f0707169317a4?s=48 aarron
258
36k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
115
10k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
119
16k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
3
650
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
628
47k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k

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