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
480
4

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

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
Spacemarket Brand Guide
Avatar for Spacemarket spacemarket
2
420
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
600
AI時代、デザイナーの価値はどこに？
Avatar for Ryotaro Takahashi tararira
1
990
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
6
1k
Figma MCPを活用するためのデザインハンドブック
Avatar for viviON Design vivion
7
15k
デザインを信じていますか
Avatar for sekig(ojiee) sekiguchiy
1
1.1k
AI時代に必要な アイデアの形
Avatar for ux-man uxman
0
150
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
Avatar for Hiroki Nagasawa pixyzehn
0
160
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
Avatar for Yu Morita securecat
1
420
チームをデザイン対象にする / Design for your team
Avatar for 株式会社カミナシ kaminashi
1
1k
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
200
つくり方を変えていく | change-how-we-build
Avatar for mottox2 mottox2
2
990

Featured

See All Featured
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.7k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.1k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
11k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
160
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
250
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
94
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.2k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
170
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8k

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