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

Responsive Web Design

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
320
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
650

Other Decks in Technology

See All in Technology
AI駆動開発を通して感じた、 AI時代のデザイナーの役割変化
Avatar for WHIsaiyo whisaiyo
4
2.3k
マルチアカウント環境での コーディングエージェントを使った障害調査が大変なので AIエージェントにReadOnly権限を付与してみた / ReadOnly AI Agents for Multi-Account AWS Incident Response
Avatar for Takashi Yamaguchi yamaguchitk333
2
120
2026年6月23日 Syncable Tech + Start Python Club にて
Avatar for Kimikazu Kato hamukazu
0
140
いまさら聞けない「仕様駆動開発入門」 〜AI活用時代の開発プロセスを考える〜
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
2
160
FPGAの開発コンペでZephyrを使ってみた
Avatar for misoji engineer iotengineer22
0
150
秘密度ラベル初心者が第1歩でつまづかないための「設計・運用」ポイント
Avatar for seafay seafay
PRO
0
330
【セミナー資料】Claude Code をセキュアに使うための考え方と設定の勘どころ / Claude Code Webinar 20260616
Avatar for MasahiroKawahara masahirokawahara
2
430
Flow 不死：AI 時代 DevOps 的不變本質
Avatar for Cheng-Wei Chen cheng_wei_chen
2
360
Kiro Ambassador を目指す話
Avatar for Kazuki Adachi k_adachi_01
0
110
現場のトークンマネジメント
Avatar for dak2 dak2
0
140
現地で盛り上がった WWDC26 Keynote
Avatar for ZOZO Developers zozotech
PRO
1
270
Kubernetesにおける学習基盤とLLMOpsの概要
Avatar for ry ry
1
330

Featured

See All Featured
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
300
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
370
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
3.7M
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
600
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.9k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.2k

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