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
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
8
4.6k
Cyber Heart Online Book
Avatar for Hannah hjnasby
0
180
sachi_y_portfolio
Avatar for Sachi sachi337
0
530
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4.1k
企画を動かすデザイナーの思考！「広げて絞る」アプローチ。
Avatar for Hikida Kan hikidakan
0
160
#Dubois Challenge 2025: Economics
Avatar for Anthony Starks ajstarks
1
170
街・都市という眼差し。まちづくりにおける規範と実践
Avatar for S.SAKAMON sakamon
0
130
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
890k
“ブロック”で作る、WordPress制作フロー変革のすすめ
Avatar for Koots koots2021
4
1.9k
新しいデザインの難しさ（公開版） / Difficulties in the New Design (public ver.)
Avatar for usagimaru usagimaru
1
890
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
Avatar for Andrew Shapiro ashapiro
0
400
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
Avatar for Tomoya AZUMA t_east
1
1.3k

Featured

See All Featured
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
930
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
850
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
272
27k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
3
620
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
It's Worth the Effort
Avatar for 3n 3n
187
28k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k

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