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

Responsive Web Design

Avatar for Sayanee Sayanee
May 15, 2012
Technology
310
3

Responsive Web Design

Avatar for Sayanee

Sayanee

May 15, 2012

More Decks by Sayanee

See All by Sayanee
Podcasting with Jekyll
Avatar for Sayanee sayanee
1
1k
Rails API
Avatar for Sayanee sayanee
5
570
Learning with Open Source
Avatar for Sayanee sayanee
3
330
ECMAScript 6 - part 1
Avatar for Sayanee sayanee
3
430
ECMAScript 6 - part 2
Avatar for Sayanee sayanee
1
300
Minimalist Designer behind the curious Developer
Avatar for Sayanee sayanee
8
450
Responsive Web Design for Beginners
Avatar for Sayanee sayanee
9
990
Travel to Balkans + Hungary
Avatar for Sayanee sayanee
2
240
Styling with SASS
Avatar for Sayanee sayanee
9
660

Other Decks in Technology

See All in Technology
サイバー捜査員研修（後半）
Avatar for Nomizo Nomizo nomizone
1
810
Agent 時代の Kaggle 展望 / kaggle-in-the-agentic-era
Avatar for Shotaro Ishihara upura
1
680
DatadogのBits Chatが開発組織にもたらしたもの / What Bits Chat Has Brought Us
Avatar for SMS tech sms_tech
1
130
個人OSSが、机の上から世界に広がるまでの話
Avatar for Shinya Saita shinyasaita
1
370
Webアクセシビリティ入門 2026
Avatar for Recruit recruitengineers
PRO
3
460
Forza Horizon 6 のテレメトリ機能で 自動運転に使えそうな学習データを集める話
Avatar for henjin0 henjin0
0
150
変化の早いClaude Codeを 書籍に落とし込む
Avatar for Oikon oikon48
7
1.3k
Issue設計から始める仕様駆動開発 / 20260731 Mizuki Hirata
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
150
事業価値と Engineering 2026年度版
Avatar for Recruit recruitengineers
PRO
45
22k
侵入は突然に 〜 IoTマルウェアと悪用される家庭の機器 ～ / When Intrusion Strikes: IoT Malware and the Abuse of Home Devices
Avatar for NTT docomo Business nttcom
0
1.6k
もう一度考える SRE チームの作り方・育て方 / Rethinking SRE #1: Building and Growing SRE Teams
Avatar for rrreeeyyy rrreeeyyy
6
1k
AI ネイティブな組織に Gemini Enterprise Agent Platform がなぜ必要なのか
Avatar for Asei Sugiyama asei
1
190

Featured

See All Featured
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
240
It's Worth the Effort
Avatar for 3n 3n
188
29k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
360
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
280
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
470
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
400
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
270
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
610
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
1k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
3
1.1k

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