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
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 なつ iflection
0
240
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
6
3.3k
クライアントワークにおける UXリサーチの実践
Avatar for Kozo Taira kozotaira
0
670
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
Avatar for Yu Morita securecat
5
1.4k
問いの変遷
Avatar for なつ iflection
0
130
250131_product meetup
Avatar for Motoko Ishida motokoishida
0
200
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
Avatar for Aki spring_aki
4
270
CIRCULAR ECONOMY + SERVICES
Avatar for John Manoochehri jmanooch
0
110
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP！】
Avatar for viviON Design vivion
0
660
Haley's adventure chase
Avatar for Ivette Molina ivettetwin
0
210
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ！
Avatar for Akiko Kurono cremacrema
7
5.6k
“使いやすい”が生産性を変える！業務を効率化するためのUX/UI設計ポイント
Avatar for NCDC ncdc
2
370

Featured

See All Featured
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
32
5.9k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.2k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
Navigating Team Friction
Avatar for Lara Hogan lara
186
15k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.8k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.4k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k

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