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
510
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
このスロップ時代に良きデザインをつくるには？ / good-design-in-the-slop-era
Avatar for こぎそ / Shinichi Kogiso kgsi
1
1.1k
MUUUUU.ORG 協賛バナーのご案内
Avatar for クオートワークス quoitworks999
0
480
エンジニア経験0のデザイナーが アプリを0からリリースまで 作ってみる
Avatar for 都村　美帆 abokadotyann
2
420
[Unity] VAT×VFX Graphがいま個人的にアツイという話
Avatar for sakiama sakiyama
0
130
工房としてのAI ── デザイナー、作家、ビルダー
Avatar for hiranotomoki hiranotomoki
0
540
染み出し好きの、 染み出しコントロール論
Avatar for Takeru Mukai mukai_takeru
0
510
Rondo 1 Minute Short Storyboard
Avatar for Rachel Poon rezaline
0
120
Jun Wei Portfolio 2026
Avatar for Wong Jun Wei wjw100788
PRO
1
370
分散するデザイン組織をつなぐ　デザインミートアップの取り組み/nikkei-tech-talk49
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
1
370
プレゼンスライド作成で意識していること
Avatar for きみちゃん kimichan
0
150
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
Avatar for ChiemiTaki chiemitaki
1
490
デザインツールを開く前に その画面は誰に何と言わせたい？受託UIデザイナーが顧客解像度を高める 「打ち合わせの場での確かめ方」
Avatar for @Garyuten garyuten
1
280

Featured

See All Featured
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
530
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
10k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
699
190k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.3k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
560
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
10
2.4k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
810
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
950
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
28k

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