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
470

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 Andrew Shapiro ashapiro
0
320
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
Avatar for Yu Morita securecat
4
1.3k
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
Avatar for r.aoki u_ri_ta
2
190
藤本佳子・ポートフォリオ・2025/01
Avatar for よし yoshi_designer
1
5.2k
オリジナルのデザイン地図を作ってみた！〜OpenMapTilesとMaputnikを活用した地図スタイル〜
Avatar for Hajime Kato hjmkth
1
490
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ！
Avatar for Akiko Kurono cremacrema
7
5.4k
aya_murakami_portfolio
Avatar for aya ayakaimi1101
0
1.7k
Masked shaman-Storyboard 2025
Avatar for ashley ashley0521
0
280
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP！】
Avatar for viviON Design vivion
0
550
RAKSUL_DESIGN_DECK_20250319
Avatar for RAKSUL raksulrecruiting
0
230
sachi_y_portfolio
Avatar for Sachi sachi337
0
170
DC Style Redesign
Avatar for Brynn McDucky P. mcduckyart
0
100

Featured

See All Featured
Embracing the Ebb and Flow
Avatar for Simon Collison colly
85
4.7k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
13k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
268
20k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
21k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
693
190k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.7k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
35
2.7k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
19
1.2k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
41
2.3k

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