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
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
2
2k
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.1k
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
210
新しいemoji😄のアイデアをUnicodeが募集中‼️🏃♀️💨💨💨傾向を学んでみんな提案しよう💪
oguemon
2
690
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
490
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
2
570
Credence
lratmansunu
0
460
portfolio
amitnk
1
130
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
350
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.1k
トップデザインチームが描く、 2030年に活躍するデザイナー
hiranotomoki
2
2.4k
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
14
6.2k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
The Cost Of JavaScript in 2023
addyosmani
45
6.7k
Building Applications with DynamoDB
mza
90
6.1k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Designing for Performance
lara
604
68k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Optimizing for Happiness
mojombo
376
70k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Six Lessons from altMBA
skipperchong
27
3.5k
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