Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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
アクセシビリティ推進を続けられるようにするヒント - Accessibility Conference CHIBA 2025
Avatar for uto usui uto
0
130
DESIGNEAST 2025 A-3
Avatar for Shigeru Kobayashi _kotobuki_
0
120
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
520
佐藤千晶｜ポートフォリオ
Avatar for 佐藤千晶 chimi_chia
0
430
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
Avatar for Muture muture
PRO
0
360
これからの「Webデザイン」の話をしよう～デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値～
Avatar for ミヤケアツシ ds35mm
0
470
新卒の目から見たサイボウズのデザイン組織
Avatar for 小林諒大 ryota5884
0
280
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
Avatar for 株式会社ルート root_recruit
0
330
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
220
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
1
25k
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
Avatar for Aki spring_aki
1
250
OJTで学んだ 「心を動かす」ファシリテーション
Avatar for さき saki822
1
190

Featured

See All Featured
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
6.7k
It's Worth the Effort
Avatar for 3n 3n
187
29k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
31
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
350
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
58
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
200
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
1
210
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
24
3.8k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
0
97
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.4k

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