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
portfolio_YumiYasuda
Avatar for yumi yasuda yum0418
0
290
“ブロック”で作る、WordPress制作フロー変革のすすめ
Avatar for Koots koots2021
4
1.8k
タイミーでフィールドワークしたら、サービスデザインが始まった
Avatar for 太田賢一 kenichiota0711
1
1.7k
Liquid Iron
Avatar for Brynn McDucky P. mcduckyart
1
110
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
8
4k
Hatena Engineer Seminar #33 チームと開発するためのモック
Avatar for takuwolog takuwolog
0
340
AI動画生成ガチャ紹介
Avatar for Takatomo Torigoe piyo7
1
120
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
Avatar for Takahiro Hayashi taka_piya
0
1.2k
今日から意識できるアクセシビリティ
Avatar for fumiko fumiko
0
250
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
Avatar for 株式会社カミナシ kaminashi
2
1.7k
1920*1080pxに設定したケース / Google Slide Size Test
Avatar for Arthur arthur1
0
2.9k
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
Avatar for マズロー安達 maslow_akkun
0
120

Featured

See All Featured
Visualization
Avatar for Eitan Lees eitanlees
146
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
810
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
337
57k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.5k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
430
65k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.6k

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