Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Intro to Responsive Design
Search
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.
Dan Barber
August 16, 2012
Tweet
Share
More Decks by Dan Barber
See All by Dan Barber
Design Eye for the Developer Guy
danbarber
21
19k
Other Decks in Design
See All in Design
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
120
Kid Cowboy 103
marilutwin
0
280
アクセシビリティに取り組むメリット
magi1125
1
220
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
1.4k
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.9k
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
330
DC Style Redesign
mcduckyart
0
140
UXとUIの違いを自分の言葉で表現する: UX DAYS TOKYO
mizunashi_mana
0
210
Selección de proyectos PORTFOLIO 16/25
alvaroromero
0
100
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
680
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
210
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
A Modern Web Designer's Workflow
chriscoyier
695
190k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Music & Morning Musume
bryan
46
6.7k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Transcript
Introduction to Responsive Design
Why Responsive?
None
Best Viewed at 1024x768
None
Flexible Grid
960px 140px 20px
max-width: 960px 14.5833...% 2.0833...%
Flexible Media
img { max-width: 100%; }
img, embed, object, video { max-width: 100%; }
Media Queries
@media screen and (min-width: 680px) { ... }
@media only screen and (min-device-pixel-ratio: 2) { ... }
<meta name=”viewport” content=”initial-scale=1.0, width=device-width” />
Showcase
None
None
None
None
Fin