Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to Responsive Design

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
890
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
Avatar for MIXI DESIGN mixi_design
PRO
1
180
Shaolin_Showdown
Avatar for Sol Metts solmetts
0
290
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
Avatar for 弁護士ドットコム bengo4com
1
1.4k
結びながら、ひらく - にじむ境界のデザイン
Avatar for Hiroki Tani hilokifigma
3
1.3k
OSO2025-マサカリと太陽：伝え方の情報デザイン
Avatar for majimasachi majimasachi
0
670
チームをデザイン対象にする / Design for your team
Avatar for 株式会社カミナシ kaminashi
1
520
デザイナーが主導権を握る、AI協業の本音と実践
Avatar for satosio satosio
7
2.7k
maki setoguchi
Avatar for Maki / Web Designer maki_setoguchi
0
660
【サイバーエージェント】Creative Switch 会社説明資料
Avatar for 【CyberAgent】クリエイター新卒採用 cyberagent_creators
0
5.1k
新規AIプロダクトで、事前に知るべきだった3つの壁 〜医療AIを1年間作って、従来の開発が通用しなかった話〜 / Three Walls in Building AI Products
Avatar for Takuya Shikichi shikichee
2
3.2k
第18回サイゼミ
Avatar for LW lw
1
3.3k

Featured

See All Featured
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
120
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
34k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.4k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
1.9k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.7k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
64
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
640
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
64
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.3k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k

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