![Page 1: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/1.jpg)
More than
Media QueriesSALLY JENKINSON · @sjenkinson · Responsive Day Out 2 · 27th June 2014
![Page 2: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/2.jpg)
Hello!
Tony Hisgett - https://www.flickr.com/photos/hisgett/5546030045/
![Page 3: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/3.jpg)
Responsive Planning
![Page 4: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/4.jpg)
![Page 5: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/5.jpg)
1. Process & workflow
![Page 6: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/6.jpg)
2. Features & DETAIL
![Page 7: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/7.jpg)
Responsivizer 8000
![Page 8: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/8.jpg)
3. invisible requirements
![Page 9: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/9.jpg)
Attitudes & Responsibility
![Page 10: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/10.jpg)
I Can Make - @icanmakehq
![Page 11: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/11.jpg)
twitter.com/aral/status/450983599911997440
“ Tech isn’t just about tech - the stuff you make can (and does) change the very character of the society we live in. ” !
- Aral Balkan, 2014
![Page 12: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/12.jpg)
- Batman, 2005
“ It’s not who I am underneath, but what I do that defines me. ”
![Page 13: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/13.jpg)
![Page 14: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/14.jpg)
Size isn’t everything(RWD > media queries > widths)
dev.w3.org/csswg/mediaqueries4/
![Page 15: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/15.jpg)
![Page 16: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/16.jpg)
+ + API
![Page 17: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/17.jpg)
DeviceLightEvent = ? lux
LightLevelEvent = dim | normal | bright
(Approximate levels of dim: < 50 lux, normal: 50 - 10000 lux, bright: > 10000 lux)
www.w3.org/TR/ambient-light/
Media query translation: washed
![Page 18: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/18.jpg)
sallyjenkinson.co.uk/blog/2014/05/18/light-level-demo/
![Page 19: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/19.jpg)
![Page 20: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/20.jpg)
Texas State Archives - https://www.flickr.com/photos/texasstatearchives/9079476324/in/set-72157634196756057, D-Tailor - http://d-tailor.deviantart.com/art/Howl-s-Moving-Castle-80916550
Responsive architecture
![Page 21: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/21.jpg)
Kenny Stoltz -https://www.flickr.com/photos/42901313@N00/226740290/
![Page 22: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/22.jpg)
Shelley Bernstein -https://www.flickr.com/photos/31484272@N00/7044075263/
![Page 23: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/23.jpg)
![Page 24: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/24.jpg)
Be responsible
![Page 25: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/25.jpg)
Narcissistic web design
![Page 26: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/26.jpg)
![Page 27: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/27.jpg)
Andreas Levers - https://www.flickr.com/photos/96dpi/3878544769/in/photostream/
![Page 28: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/28.jpg)
![Page 29: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/29.jpg)
![Page 30: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/30.jpg)
Your decisions are not isolated
Dean Terry - https://www.flickr.com/photos/16262447@N00/86988892/
![Page 31: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/31.jpg)
Change is hard (but it’s also good)
![Page 32: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/32.jpg)
Performance
Derek Bridges - https://www.flickr.com/photos/84949728@N00/4285019229
![Page 33: More Than Media Queries - Responsive Day Out 2](https://reader034.vdocuments.us/reader034/viewer/2022051608/53f8dca88d7f7253318b4903/html5/thumbnails/33.jpg)
AND finally…