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

Intro to Responsive Design

Avatar for Dan Barber Dan Barber
August 16, 2012
Design
490
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
アイデアを加速させる！Firefly ボードで発想の幅を広げよう
Avatar for コネクリ connecre
1
380
Storyboard Assignment: Storyboard from Comic Strip
Avatar for Mandalyn Teo lynteo
3
260
AI時代に求められるUXデザインのアプローチ
Avatar for xtone xtone
0
3k
hicard_credential_202601
Avatar for hicard hicard
0
220
2026年の勢い / Momentum for 2026
Avatar for bebe bebe
0
420
タイル紹介サイト「タイルだもんで」
Avatar for しま calpin
0
130
TUNAG BOOK 2024
Avatar for 株式会社スタメン stmn
PRO
0
1.5k
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
800
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
Avatar for mewmo mewmo
0
220
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
2
28k
AI時代、デザイナーの価値はどこに？
Avatar for Ryotaro Takahashi tararira
2
1.1k
CULTURE DECK／Frontend Engineer
Avatar for M-HAND,Inc. mhand01
0
1.2k

Featured

See All Featured
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
730
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
2
7.2k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
380
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
260
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k

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