Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Responsive Web Design

Avatar for Philip Davis Philip Davis
June 21, 2014
Design
430
0

Responsive Web Design

Talk given at the Mobility Community of Practice

Avatar for Philip Davis

Philip Davis

June 21, 2014

More Decks by Philip Davis

See All by Philip Davis
Introduction to D3.js
Avatar for Philip Davis philipcdavis
0
430

Other Decks in Design

See All in Design
2026/8/20　Polaris15周年イベント 『共創の場をつくる』 〜 誰もが『心地よく暮らし、心地よくはたらく』ことを選択できる社会へ 〜 関係性から地域をつくりなおす共創の土壌づくり 〜リビングラボの事例を通じて〜
Avatar for Kimura Atsunobu a2k
0
110
デザインレビューを「他者へのおすそわけ」に再定義し、たのしい場にする試み
Avatar for Beeworks Marketing Design webnaut
0
110
From Desktop to Spatial Interfaces UX Design Implications of Evolving Interaction Paradigms
Avatar for h.crane hcrane
0
120
作品が生まれ続けるコミュニティデザイン ― 研究室でも会社でもないサードプレイス ― / designship26-iwaken
Avatar for Kenta Iwasaki iwaken71
0
170
Figmaを使わなくなった私が、最近していること
Avatar for めーら/Miki mela_dayo
0
120
Jun Wei | Information Design & Presentation Portfolio
Avatar for Wong Jun Wei wjw100788
PRO
0
160
「惜しいデザイン」 を生み出さないための AIレビューループ
Avatar for Kazuhiro Tobita 0b1tk
3
4.7k
StartDesignEngineering
Avatar for uchiyama886 uchiyama886
1
150
開閉UIのアニメーション設計
Avatar for hiro hiro0218
2
1.1k
泥臭く語るUIデザイン会｜ホワイトボードチャレンジ【RAMEN TECH 2026】
Avatar for @Garyuten garyuten
1
180
工房としてのAI ── デザイナー、作家、ビルダー
Avatar for hiranotomoki hiranotomoki
0
530
Jun Wei Portfolio 2026
Avatar for Wong Jun Wei wjw100788
PRO
1
360

Featured

See All Featured
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
1
400
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.9k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.4k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
41k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
2
410
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
800
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
3
16k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7.2k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
400

Transcript

  1. RESPONSIVE 
 WEB 
 DESIGN PHILIP DAVIS AUGUST 2013

  2. THE STATIC WEB

  3. The recent web THE CURRENT WEB Image by brad frost

  4. DEFINITION “An approach that delivers elegant visual experiences regardless of

    the size of the user’s display and the limitations or capabilities of the device” - Jeffrey Zeldman

  5. LET’S TAKE A LOOK

  6. NOT RESPONSIVE Native Application Adaptive Design Fluid Layouts

  7. THIS IS BAD

  8. KEY BENEFITS 1. Accessibility

  9. KEY BENEFITS 2. Content is King

  10. KEY BENEFITS 3. Less Maintenance

  11. HOW DOES IT WORK? Media Queries Flexible Grids Flexible Elements

  12. MEDIA QUERIES @media (max-width: 700px) { ... } Essentially, an

    “if” statement Mobile First @media (min-width: 40em) { ... }

  13. FLEXIBLE GRIDS

  14. FLEXIBLE ELEMENTS • Images • Which responsive images solution should

    you use? • Navigation • responsive-nav.com • Further Resources • Responsive Patterns

  15. FRAMEWORKS