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
丸井グループが取り組むエンタープライズアジャイルと プロダクトマネージャーの役割
muture
3
1.4k
私たちが取り組んできたアクセシビリティと これから取り組んでいくアクセシビリティについて
securecat
1
310
Mitra Manual
nnidhz
0
180
0→1でデザイナーは何とむきあうのか? / 0→1 Meetup 〜多様な0→1フェーズにおけるデザイナーの働き方〜 / Yasuhiro Yokota
yasuhiroyokota
1
470
アフォーダンスとシグニファイア
ryokanakai
0
250
デザインスプリントを活かすチームの在り方
mixi_design
PRO
1
680
Baby Bear Genius
yvonnehsuanho
PRO
0
630
インターフェースのユーザビリティ概論および調査手法について
readymadegogo
0
160
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
350
MLP_Cleanup_Olga
olgastoryboard
0
120
デザインレビューをできていなかったコムデチームが、 自分たちが続けられるレビューの仕組みをつくった話
tanasho
0
730
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
12
3.4k
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
326
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Writing Fast Ruby
sferik
623
60k
Producing Creativity
orderedlist
PRO
340
39k
Designing for Performance
lara
604
68k
Building a Scalable Design System with Sketch
lauravandoore
459
32k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
We Have a Design System, Now What?
morganepeng
48
7.1k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
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