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
Drawing for Animation
Avatar for Mandalyn Teo lynteo
2
300
The Art of Caring
Avatar for Klemens klemens
0
350
Of Ordination and Rebellion exploration sketches
Avatar for Rachel Poon rezaline
0
140
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
Avatar for kumano ayumi kumanoayumi
6
1.2k
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
3
29k
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
Avatar for ChiemiTaki chiemitaki
1
130
【pmconf2025】PdMの頭の中を見える化する体験構造図
Avatar for Shigeyuki Kameda kamechi7222222
1
2.4k
20260215独立行政法人科学技術振興機構(JST) 社会技術研究開発センター(RISTEX)ケアが根づく社会システム _公開シンポジウム
Avatar for Kimura Atsunobu a2k
1
210
つくり方を変えていく | change-how-we-build
Avatar for mottox2 mottox2
2
1.3k
CULTURE DECK／Frontend Engineer
Avatar for M-HAND,Inc. mhand01
0
1.3k
Connpass-Xperia_Camera_App_by_HCD.pdf
Avatar for ソニー株式会社 sony
1
660
hicard_credential_202601
Avatar for hicard hicard
0
250

Featured

See All Featured
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.4k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
13k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
590
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
54k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
220
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
490
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
300
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.1k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k

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