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
470
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
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
500
太田博三(@usagisan2020)
otanet
0
200
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
2
940
Tableau曲線表現講座(2024.11.21)
cielo1985
0
170
portfolio
amitnk
1
160
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
120
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
300
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
240
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
180
202409_会社概要資料_Englishver.pdf
zakkerooni
0
210
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
400
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1k
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Statistics for Hackers
jakevdp
796
220k
Producing Creativity
orderedlist
PRO
341
39k
A better future with KSS
kneath
238
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
440
Building Better People: How to give real-time feedback that sticks.
wjessup
365
19k
Code Reviewing Like a Champion
maltzj
520
39k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
28
900
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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