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
720
Rails API
83f7b66c4dee7effbb3717027f99282b?s=48 sayanee
5
430
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
520

Other Decks in Technology

See All in Technology
AWS ChatbotでEC2インスタンスを 起動できるようにした
Eb5a213a0a76afa872249a05444c78c1?s=48 iwamot
0
120
AWSの基礎を学ぼうで学んだ9種類のDBを勝手にふりかえる
6395e3c01eccba987502884a2e40b381?s=48 98lerr
2
720
ISUCON で使えるツールを作った
Cb17938137021ead2656d0fe58b7c7b1?s=48 shotakitazawa
0
350
次期LTSに備えよ！AOS 6.1 HCI Core 編
A4d5b3aae2e67f31b513c88c726514c2?s=48 smzksts
0
170
一人から始めるプロダクトSRE / How to start SRE in a product team, all by yourself
12a5cec7a54018170b1a009731acf477?s=48 vtryo
4
2.4k
組織でPower Virtual Agentsを導入するために知っておきたいこと
C0c0e8e4d7f83912cb1b1a0699df82a5?s=48 miyakemito
0
1.6k
LINE WORKS API 2.0について
1f7f0085220d6e48e5bdbf9b199b847c?s=48 mmclsntr
0
110
#BabylonJS5 の祭ツイートまとめ Let's take a look at what people create with the latest #BabylonJS5
617bd4a28ec6cbc877c752a1b4e29e58?s=48 chomado
0
790
Oracle Database Technology Night #55 Oracle Autonomous Database 再入門
140494d272a4d89883a94fdfdb29dea2?s=48 oracle4engineer
PRO
1
120
Google Cloud Updates 2022/04/01 - 2022/04/15
609308e6510e41133d30460eef1ccd36?s=48 no24oka
1
110
2022年度ロボットフロンティア第1回
114d1b33c50cdc86c4c641682190407f?s=48 ryuichiueda
0
140
プルリク作ったらデプロイされる仕組み on ECS / SRE NEXT 2022
2537ce662eb08182e617ec7944981437?s=48 carta_engineering
1
120

Featured

See All Featured
Six Lessons from altMBA
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
14
1.3k
Building Better People: How to give real-time feedback that sticks.
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
343
17k
Fontdeck: Realign not Redesign
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
73
4.1k
jQuery: Nuts, Bolts and Bling
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
56
6.4k
From Idea to $5000 a Month in 5 Months
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
372
44k
Optimizing for Happiness
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
365
63k
Atom: Resistance is Futile
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
255
20k
Writing Fast Ruby
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
57k
How to name files
0a4f62e90c976eeb44d33add75cca5af?s=48 jennybc
39
58k
WebSockets: Embracing the real-time Web
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
57
5k
Designing for humans not robots
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
241
23k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
268
11k

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