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
480

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
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.3k
Yahoo!フリマ：生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
490
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
Avatar for Saiko.T _psyc0_
0
310
“ブロック”で作る、WordPress制作フロー変革のすすめ
Avatar for Koots koots2021
4
2k
7 Core Values of Round-L
Avatar for Round-L wired888
0
2.1k
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
Avatar for Yu Morita securecat
5
1.7k
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
Avatar for ため tame
0
260
1920*1080pxに設定したケース / Google Slide Size Test
Avatar for Arthur arthur1
0
3.4k
ランドマークが光る！季節を彩るナビ体験 - Mobility Night #3 -
Avatar for tetsuya kitauji kitau
0
120
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう！
Avatar for コネクリ connecre
1
130
CMS管理画面のアクセシビリティ
Avatar for Rikiya Ihara / magi magi1125
8
2.5k
Character Experience AI 〜 AIキャラクターのつくりかた 〜
Avatar for SmartBank smartbank
1
330

Featured

See All Featured
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.1k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
237
140k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
30
9.7k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
460k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
352
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
56
6.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k

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