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
Installing and Running decksh/pdfdeck
Avatar for Anthony Starks ajstarks
1
920
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
Avatar for Aki spring_aki
1
280
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
Avatar for Yu Morita securecat
0
180
アプリ360onWeb使い方と裏ワザ？紹介！
Avatar for ikejun360 ikejun360
1
450
これからの「Webデザイン」の話をしよう～デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値～
Avatar for ミヤケアツシ ds35mm
0
500
新卒の目から見たサイボウズのデザイン組織
Avatar for 小林諒大 ryota5884
0
300
Figmaレクチャー会Part1 基本のき編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
0
190
文化のデザイン - Soft Impact of Design
Avatar for Atsushi Homma atsushihomma
0
120
SAMSUL KAMAR ABDUL RAHMAN
Avatar for SAMSUL RAHMAN samsulrahman32
0
210
そのUIコンポーネント、これから先も使えますか？―Headless UI,Open UI,グローバルデザインシステム
Avatar for sakito sakito
2
2.5k
Vibe Coding デザインシステム
Avatar for poteboy poteboy
3
1.6k
The Spring Festival
Avatar for Jisun jisun
0
140

Featured

See All Featured
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.1k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
52
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
58
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.2k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
1
170
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
370
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.2k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
1
36
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
74
5k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k

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