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

Responsive Web Design

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

Responsive Web Design

83f7b66c4dee7effbb3717027f99282b?s=128

Sayanee

May 15, 2012
Tweet

More Decks by Sayanee

See All by Sayanee
Podcasting with Jekyll
83f7b66c4dee7effbb3717027f99282b?s=48 sayanee
2
730
Rails API
83f7b66c4dee7effbb3717027f99282b?s=48 sayanee
5
440
Learning with Open Source
83f7b66c4dee7effbb3717027f99282b?s=48 sayanee
3
280
ECMAScript 6 - part 1
83f7b66c4dee7effbb3717027f99282b?s=48 sayanee
3
340
ECMAScript 6 - part 2
83f7b66c4dee7effbb3717027f99282b?s=48 sayanee
1
230
Minimalist Designer behind the curious Developer
83f7b66c4dee7effbb3717027f99282b?s=48 sayanee
8
340
Responsive Web Design for Beginners
83f7b66c4dee7effbb3717027f99282b?s=48 sayanee
9
900
Travel to Balkans + Hungary
83f7b66c4dee7effbb3717027f99282b?s=48 sayanee
2
180
Styling with SASS
83f7b66c4dee7effbb3717027f99282b?s=48 sayanee
9
530

Other Decks in Technology

See All in Technology
2022年度新卒技術研修「フロントエンド」講義
094e424062f60b011a0d0b294fbc17e4?s=48 excitejp
PRO
0
330
SI企業が「アジャイル推し」になったら 幸せになれますか？/Can SI company be happy if it becomes “Agile stan” ?
7977a0896e60587b2690550891be2ea7?s=48 chinmo
1
1k
データチームの境界を考える
69152062a049e39ff6c00d36d2919650?s=48 yummydum
0
170
音のような言葉 〜ちゃちゃっとチャットで楽しむちょっとしたコツ〜 / words like sounds
8db3c91c8b3d3e5686f62fbf43c303dd?s=48 satoryu
1
1.3k
覗いてみよう！現場のスクラムチーム
1f0222f7251c3c48f4a8e5103cc64346?s=48 tkredman
0
930
公式版Scratchやtoio DoでIoT（ブラウザ上でのJavaScript実行で） / ビジュアルプログラミングIoTLT vol.11
Cd931bc05e7cee46b9a950a63e47ba4c?s=48 you
0
150
2022年度新卒技術研修「エンジニアマインド」講義
094e424062f60b011a0d0b294fbc17e4?s=48 excitejp
PRO
0
330
ソフトウェアライセンス 2022 / Software License 2022
A97eee01397705443a72a48ce29d3e19?s=48 cybozuinsideout
PRO
1
810
雑な攻撃からELBを守る一工夫 ＋おまけ / Know-how to protect servers from miscellaneous attacks
8e8410eb785755ae2cb485f85dbab6e8?s=48 hiroga
0
210
CADDi AI LabにおけるマネージドなMLOps
620c94b3affc3376c62540a64ce7ba36?s=48 vaaaaanquish
2
1.4k
2022年度新卒技術研修「DNS」講義
094e424062f60b011a0d0b294fbc17e4?s=48 excitejp
PRO
0
330
Data in Google I/O - IO Extended GDG Seoul
3bd69093dbe39b14603242b96cfbd7c6?s=48 kennethanceyer
0
150

Featured

See All Featured
VelocityConf: Rendering Performance Case Studies
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
316
22k
Art, The Web, and Tiny UX
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
280
17k
Art Directing for the Web. Five minutes with CSS Template Areas
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
196
9.4k
Stop Working from a Prison Cell
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
261
17k
Streamline your AJAX requests with AmplifyJS and jQuery
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
126
8.5k
We Have a Design System, Now What?
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
35
2.9k
It's Worth the Effort
Ba530e786553390f3fb271848485681c?s=48 3n
172
25k
Making the Leap to Tech Lead
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
113
7.4k
Dealing with People You Can't Stand - Big Design 2015
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
351
21k
Creatively Recalculating Your Daily Design Routine
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
207
10k
Principles of Awesome APIs and How to Build Them.
B47b288784fda77a94aeb234ca743c24?s=48 keavy
113
15k
Java REST API Framework Comparison - PWX 2021
72a2082c6a4dd79ad68befb3db911616?s=48 mraible
PRO
11
4.7k

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