Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Intro to Responsive Design

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Dan Barber Dan Barber
August 16, 2012
Design
500
4

Intro to Responsive Design

An introduction to responsive design, what it is, why it exists and how to implement it.

Avatar for Dan Barber

Dan Barber

August 16, 2012

More Decks by Dan Barber

See All by Dan Barber
Design Eye for the Developer Guy
Avatar for Dan Barber danbarber
21
19k

Other Decks in Design

See All in Design
noteらしさを織り込むハーネスエンジニアリング
Avatar for uto usui uto
0
1.9k
The ISO 25964 standard on Information and documentation — Thesauri and interoperability with other vocabularies
Avatar for AccessInnovations accessinnovations
0
190
Jun Wei | Information Design & Presentation Portfolio
Avatar for Wong Jun Wei wjw100788
PRO
0
130
AI-Slopなデザインを生まないためのデザインプロセス戦略
Avatar for takanorip takanorip
10
6k
少人数チームで_使われるプロダクトにたどり着くための_デザインハーネス.pdf
Avatar for NishaMe nishame
1
1.5k
染み出し好きの、 染み出しコントロール論
Avatar for Takeru Mukai mukai_takeru
0
470
PLATEAUで白い街を作る
Avatar for aikautau aikautau
0
200
エンジニアがAI活用してスライドデザインできる世界が来たよ！
Avatar for 甲斐 甲 kaikou
1
490
SERVICE PAMPHLET
Avatar for M-HAND,Inc. mhand01
0
3.1k
Figmaを使わなくなった私が、最近していること
Avatar for めーら/Miki mela_dayo
0
100
図面資産×AI 眠れる資産を起こす挑戦
Avatar for 青野正寛 aonomasahiro
0
260
ポートフォリオ_あやの
Avatar for ayano ngyenmazt1412
0
1.8k

Featured

See All Featured
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
3
15k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
370
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
560
Side Projects
Avatar for Sacha Greif sachag
456
43k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.6k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
310
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
340
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
68
58k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
620
HDC tutorial
Avatar for Michiel Stock michielstock
2
920
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
380
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.9k

Transcript

  1. Introduction to Responsive Design

  2. Why Responsive?

  3. None

  4. Best Viewed at 1024x768

  5. None

  6. Flexible Grid

  7. 960px 140px 20px

  8. max-width: 960px 14.5833...% 2.0833...%

  9. Flexible Media

  10. img { max-width: 100%; }

  11. img, embed, object, video { max-width: 100%; }

  12. Media Queries

  13. @media screen and (min-width: 680px) { ... }

  14. @media only screen and (min-device-pixel-ratio: 2) { ... }

  15. <meta name=”viewport” content=”initial-scale=1.0, width=device-width” />

  16. Showcase

  17. None
  18. None
  19. None
  20. None

  21. Fin