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
84
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
複雑性の高いオブジェクト編集に向き合う: プラガブルなReactフォーム設計
righttouch
PRO
0
110
あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of
tomoki10
0
460
20241220_S3 tablesの使い方を検証してみた
handy
4
400
KubeCon NA 2024 Recap: How to Move from Ingress to Gateway API with Minimal Hassle
ysakotch
0
200
開発生産性向上！ 育成を「改善」と捉えるエンジニア育成戦略
shoota
2
350
Turing × atmaCup #18 - 1st Place Solution
hakubishin3
0
480
podman_update_2024-12
orimanabu
1
270
小学3年生夏休みの自由研究「夏休みに Copilot で遊んでみた」
taichinakamura
0
150
10個のフィルタをAXI4-Streamでつなげてみた
marsee101
0
170
バクラクのドキュメント解析技術と実データにおける課題 / layerx-ccc-winter-2024
shimacos
2
1.1k
MLOps の現場から
asei
6
640
Fanstaの１年を大解剖！ 一人SREはどこまでできるのか！？
syossan27
2
170

Featured

See All Featured
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Thoughts on Productivity
jonyablonski
67
4.4k
GraphQLとの向き合い方2022年版
quramy
44
13k
The Invisible Side of Design
smashingmag
298
50k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
Docker and Python
trallard
42
3.1k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k

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/