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
ClaudeCodeでマーケターの課題を解決する
Avatar for 太田賢一 kenichiota0711
4
4.6k
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
580
セブンデックス プロジェクト事例 / innovation Scenes
Avatar for セブンデックス sevendex
1
170
Shaolin_Showdown
Avatar for Sol Metts solmetts
0
350
maki setoguchi
Avatar for Maki / Web Designer maki_setoguchi
0
710
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
Avatar for payatsun payatsusan213
0
230
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
Avatar for Yu Morita securecat
0
220
Franks Myth
Avatar for George Frank Hayford-Taylor gfht1
2
440
Drawing for Animation
Avatar for Mandalyn Teo lynteo
2
220
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
Avatar for Hiroki Nagasawa pixyzehn
0
150
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
Avatar for 株式会社ルート root_recruit
0
400
OSO2025-マサカリと太陽：伝え方の情報デザイン
Avatar for majimasachi majimasachi
0
730

Featured

See All Featured
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
150
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
140
New Earth Scene 8
Avatar for Sydney Stone popppiees
1
1.7k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
140
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
75
HDC tutorial
Avatar for Michiel Stock michielstock
1
510
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
73

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