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

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
4
480

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
Tweet

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
「自分の仕事はどこまで？」と問い続けたら。デザイナーの「視座」を考える
Avatar for Takeru Mukai mukai_takeru
0
310
UI/UX & Web Design Portfolio 2025｜Madoka Kumagai
Avatar for Madoka madoka_portfolio
2
160
体験負債を資産に変える組織的アプローチ
Avatar for hikarutakase hikarutakase
0
630
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
Avatar for mewmo mewmo
PRO
0
170
絵や写真から学ぶ、要素がもたらす副作用
Avatar for keigo kspace
0
100
【pmconf2025】PdMの頭の中を見える化する体験構造図
Avatar for Shigeyuki Kameda kamechi7222222
1
2k
これからの「Webデザイン」の話をしよう～デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値～
Avatar for ミヤケアツシ ds35mm
0
570
mount_company_profile
Avatar for mount inc. mount_inc
0
5.2k
図じゃなく言語で描く - Common Ground for Design AI Operations.
Avatar for Kazuki Ikeda kazukiikeda
1
690
コンテンツ作成者の体験を設計する
Avatar for Chiaki Okamoto chiilog
0
110
2026年、デザイナーはなにに賭ける？
Avatar for Kazuhiro Tobita 0b1tk
0
510
Shaolin_Showdown
Avatar for Sol Metts solmetts
0
330

Featured

See All Featured
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
117
110k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
9.3k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.4k
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.4k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
220
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
750

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