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
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
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
940
速く作れるかではなく、速く学べるか ― 学習ループを回すパイロットの途中報告
Avatar for Sho Nagata nagata03
0
500
Drawing for Animation
Avatar for Mandalyn Teo lynteo
2
300
なぜ、インサイトを貯めるのか？
Avatar for 田島佳穂 tajima_kaho
2
2.2k
設計と制作 意図を形に表す / Design and Making: Intent Made Form
Avatar for usagimaru usagimaru
3
1.9k
再設計される業務 - AIにより再設計される "デザインワークフロー" / AI Ops Lab #2 Redesigned orkflows
Avatar for kgsi kgsi
0
730
ISO 9241-171:2025っていうのがあってな
Avatar for Shoji Ohashi shosira
1
200
CULTURE DECK／Creative Director
Avatar for M-HAND,Inc. mhand01
0
1.3k
はじめての演奏会フライヤーデザイン
Avatar for Kaito Kikuchi chorkaichan
1
310
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
Avatar for ぽん designer_no_pon
1
1.6k
hicard_credential_202601
Avatar for hicard hicard
0
250
AIスライド生成を進化させるMDファイル
Avatar for 太田賢一 kenichiota0711
1
1.3k

Featured

See All Featured
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.5k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.2k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.2k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
210
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
150
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.3k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
170

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