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

Responsive Web Design

Avatar for Sayanee Sayanee
May 15, 2012
Technology
3
280

Responsive Web Design

Avatar for Sayanee

Sayanee

May 15, 2012
Tweet

More Decks by Sayanee

See All by Sayanee
Podcasting with Jekyll
Avatar for Sayanee sayanee
1
960
Rails API
Avatar for Sayanee sayanee
5
520
Learning with Open Source
Avatar for Sayanee sayanee
3
300
ECMAScript 6 - part 1
Avatar for Sayanee sayanee
3
390
ECMAScript 6 - part 2
Avatar for Sayanee sayanee
1
270
Minimalist Designer behind the curious Developer
Avatar for Sayanee sayanee
8
410
Responsive Web Design for Beginners
Avatar for Sayanee sayanee
9
950
Travel to Balkans + Hungary
Avatar for Sayanee sayanee
2
220
Styling with SASS
Avatar for Sayanee sayanee
9
610

Other Decks in Technology

See All in Technology
バクラクのモノレポにおける AI Coding のための環境整備と {Roo,Claude} Code活用事例 / AI Coding in Bakuraku's Monorepo: Environment Setup & Case Studies with {Roo, Claude} Code
Avatar for upamune / Yu SERIZAWA upamune
7
2.9k
上長や社内ステークホルダーに対する解像度を上げて、より良い補完関係を築く方法 / How-to-increase-resolution-and-build-better-complementary-relationships-with-your-bosses-and-internal-stakeholders
Avatar for MADOX madoxten
3
540
おれのAI活用の現状とこれから
Avatar for TsukasaSekiguchi tsukasagr
0
120
CSSの最新トレンド Ver.2025
Avatar for tonkotsuboy_com tonkotsuboy_com
11
4k
libsyncrpcってなに？
Avatar for uhyo uhyo
0
250
Text-to-SQLの評価データセットを作って最新LLMモデルの性能評価をしてみた
Avatar for Gota gotalab555
3
570
All About Sansan – for New Global Engineers
Avatar for Sansan, Inc. sansan33
PRO
1
1.2k
CSSDay, Amsterdam
Avatar for bruce lawson brucel
0
280
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
4
12k
Java 30周年記念! Javaの30年をふりかえる
Avatar for Yuichi.Sakuraba skrb
4
2.7k
kintone開発組織のDevOpsへの移り変わりと実践
Avatar for Shin'ya Ueoka ueokande
1
280
大手企業のAIツール導入の壁を越えて：サイバーエージェントのCursor活用戦略
Avatar for Gunther Brunner gunta
34
18k

Featured

See All Featured
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.5k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
172
14k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
22
3.5k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.3k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
13k

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