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

Responsive Web Design

Derek Johnson
December 08, 2015
Technology
0
36

Responsive Web Design

A presentation I gave at work about RWD. Where it came from, what it is and some things we have learnt in the past few years about it.

Derek Johnson

December 08, 2015
Tweet

More Decks by Derek Johnson

See All by Derek Johnson
Git branching strategy
derekjohnson
0
82
Git basics
derekjohnson
1
54
Responsive images have landed
derekjohnson
2
130
How modern web design works
derekjohnson
0
420

Other Decks in Technology

See All in Technology
The Rise of LLMOps
asei
7
1.7k
個人でもIAM Identity Centerを使おう!(アクセス管理編)
ryder472
4
230
Engineer Career Talk
lycorp_recruit_jp
0
190
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
130
いざ、BSC討伐の旅
nikinusu
2
780
OS 標準のデザインシステムを超えて - より柔軟な Flutter テーマ管理 | FlutterKaigi 2024
ronnnnn
0
190
SREが投資するAIOps ~ペアーズにおけるLLM for Developerへの取り組み~
takumiogawa
1
420
BLADE: An Attempt to Automate Penetration Testing Using Autonomous AI Agents
bbrbbq
0
320
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
5
480
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
310
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
130

Featured

See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Typedesign – Prime Four
hannesfritz
40
2.4k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Done Done
chrislema
181
16k
Music & Morning Musume
bryan
46
6.2k
Optimizing for Happiness
mojombo
376
70k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Building Applications with DynamoDB
mza
90
6.1k

Transcript

  1. Responsive Web Design

  2. It’s about access

  3. Abandon control [The Sage]...accepts the ebb and flow of things,

    Nurtures them, but does not own them. Tao Te Ching; 2 Abstraction via John Allsopp

  4. Sages…work with myriad things but do not control, they create

    but do not possess, they act but do not presume.
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None

  12. User agents

  13. Be formless, shapeless, like water. You put water into a

    cup, it becomes the cup. You put water into a bottle it becomes the bottle. You put it in a teapot, it becomes the teapot.
  14. None

  15. What is responsive web design? • Flexible grid • Flexible

    media • Media queries
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None

  22. The first media query is no media query

  23. None

  24. Content not devices

  25. None

  26. Input is unpredictable

  27. A couple of don’ts Don’t display: none in small viewports

    Don’t use browser sniffing

  28. Photo credits • https://upload.wikimedia.org/wikipedia/commons/0/06/ Refreshable_Braille_display.jpg • https://flic.kr/p/zrNaAJ by Jeffrey Zeldman

    • https://upload.wikimedia.org/wikipedia/commons/b/bf/ Morris_dancing_at_Berwick_St_John_-_geograph.org.uk_- _903611.jpg • http://lookatmyfuckingredtrousers.blogspot.co.uk/