SlideShare a Scribd company logo
1 of 34
Download to read offline
More than
Media QueriesSALLY JENKINSON · @sjenkinson · Responsive Day Out 2 · 27th June 2014
Hello!
Tony Hisgett - https://www.flickr.com/photos/hisgett/5546030045/
Responsive
Planning
1. Process & workflow
2. Features & DETAIL
Responsivizer
8000
3. invisible requirements
Attitudes &
Responsibility
I Can Make - @icanmakehq
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
- Batman, 2005
“ It’s not who I am underneath, but
what I do that defines me. ”
Size isn’t everything
(RWD > media queries > widths)
dev.w3.org/csswg/mediaqueries4/
+ + API
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
sallyjenkinson.co.uk/blog/2014/05/18/light-level-demo/
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
Kenny Stoltz -https://www.flickr.com/photos/42901313@N00/226740290/
Shelley Bernstein -https://www.flickr.com/photos/31484272@N00/7044075263/
Be responsible
Narcissistic
web design
Andreas Levers - https://www.flickr.com/photos/96dpi/3878544769/in/photostream/
Your decisions are not isolated
Dean Terry - https://www.flickr.com/photos/16262447@N00/86988892/
Change is hard
(but it’s also good)
Performance
Derek Bridges - https://www.flickr.com/photos/84949728@N00/4285019229
AND finally…
Thank you
Sally Jenkinson
www.recordssoundthesame.com
sally@recordssoundthesame.com · @sjenkinson

More Related Content

More from Sally Lait

More from Sally Lait (17)

Changing the world with the web
Changing the world with the webChanging the world with the web
Changing the world with the web
 
Making the leap from execution to strategy
Making the leap from execution to strategyMaking the leap from execution to strategy
Making the leap from execution to strategy
 
Websites are a symptom, not the cause - DXN May 2017
Websites are a symptom, not the cause - DXN May 2017Websites are a symptom, not the cause - DXN May 2017
Websites are a symptom, not the cause - DXN May 2017
 
Websites are a symptom, not the cause
Websites are a symptom, not the causeWebsites are a symptom, not the cause
Websites are a symptom, not the cause
 
All these moments will be lost in time: the web, the future, and us
All these moments will be lost in time: the web, the future, and usAll these moments will be lost in time: the web, the future, and us
All these moments will be lost in time: the web, the future, and us
 
Working with the web and the future
Working with the web and the futureWorking with the web and the future
Working with the web and the future
 
All these moments will be lost in time: the web, the future, and us
All these moments will be lost in time: the web, the future, and usAll these moments will be lost in time: the web, the future, and us
All these moments will be lost in time: the web, the future, and us
 
An introduction to open data
An introduction to open dataAn introduction to open data
An introduction to open data
 
An introduction to open data
An introduction to open dataAn introduction to open data
An introduction to open data
 
All these moments will be lost in time: the web, the future, and us
All these moments will be lost in time: the web, the future, and usAll these moments will be lost in time: the web, the future, and us
All these moments will be lost in time: the web, the future, and us
 
Open Data: Open Your Mind
Open Data: Open Your MindOpen Data: Open Your Mind
Open Data: Open Your Mind
 
An introduction to open data
An introduction to open dataAn introduction to open data
An introduction to open data
 
Choosing the "right" CMS (and other things)
Choosing the "right" CMS (and other things)Choosing the "right" CMS (and other things)
Choosing the "right" CMS (and other things)
 
Choosing the "right" CMS
Choosing the "right" CMSChoosing the "right" CMS
Choosing the "right" CMS
 
With great power comes great (development) responsibility
With great power comes great (development) responsibilityWith great power comes great (development) responsibility
With great power comes great (development) responsibility
 
Mini hacks, big difference
Mini hacks, big differenceMini hacks, big difference
Mini hacks, big difference
 
HTML5 - Create The Web London
HTML5 - Create The Web LondonHTML5 - Create The Web London
HTML5 - Create The Web London
 

Recently uploaded

一比一原版(NYU毕业证书)美国纽约大学毕业证如何办理
一比一原版(NYU毕业证书)美国纽约大学毕业证如何办理一比一原版(NYU毕业证书)美国纽约大学毕业证如何办理
一比一原版(NYU毕业证书)美国纽约大学毕业证如何办理
Fir
 
一比一原版(Princeton毕业证书)普林斯顿大学毕业证如何办理
一比一原版(Princeton毕业证书)普林斯顿大学毕业证如何办理一比一原版(Princeton毕业证书)普林斯顿大学毕业证如何办理
一比一原版(Princeton毕业证书)普林斯顿大学毕业证如何办理
C
 
一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理
一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理
一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理
B
 
原版定制(Management毕业证书)新加坡管理大学毕业证原件一模一样
原版定制(Management毕业证书)新加坡管理大学毕业证原件一模一样原版定制(Management毕业证书)新加坡管理大学毕业证原件一模一样
原版定制(Management毕业证书)新加坡管理大学毕业证原件一模一样
asdafd
 
一比一定制(Dundee毕业证书)英国邓迪大学毕业证学位证书
一比一定制(Dundee毕业证书)英国邓迪大学毕业证学位证书一比一定制(Dundee毕业证书)英国邓迪大学毕业证学位证书
一比一定制(Dundee毕业证书)英国邓迪大学毕业证学位证书
gfhdsfr
 
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
Fir
 
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
Fi
 
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
Fi
 
一比一原版(PSU毕业证书)美国宾州州立大学毕业证如何办理
一比一原版(PSU毕业证书)美国宾州州立大学毕业证如何办理一比一原版(PSU毕业证书)美国宾州州立大学毕业证如何办理
一比一原版(PSU毕业证书)美国宾州州立大学毕业证如何办理
Fir
 
原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样
原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样
原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样
rgdasda
 
一比一定制波士顿学院毕业证学位证书
一比一定制波士顿学院毕业证学位证书一比一定制波士顿学院毕业证学位证书
一比一定制波士顿学院毕业证学位证书
A
 
原版定制(爱大毕业证书)英国爱丁堡大学毕业证原件一模一样
原版定制(爱大毕业证书)英国爱丁堡大学毕业证原件一模一样原版定制(爱大毕业证书)英国爱丁堡大学毕业证原件一模一样
原版定制(爱大毕业证书)英国爱丁堡大学毕业证原件一模一样
gfhdsfr
 
一比一原版英国萨赛克斯大学毕业证如何办理
一比一原版英国萨赛克斯大学毕业证如何办理一比一原版英国萨赛克斯大学毕业证如何办理
一比一原版英国萨赛克斯大学毕业证如何办理
SDSA
 
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
B
 

Recently uploaded (20)

一比一原版(NYU毕业证书)美国纽约大学毕业证如何办理
一比一原版(NYU毕业证书)美国纽约大学毕业证如何办理一比一原版(NYU毕业证书)美国纽约大学毕业证如何办理
一比一原版(NYU毕业证书)美国纽约大学毕业证如何办理
 
Premier Mobile App Development Agency in USA.pdf
Premier Mobile App Development Agency in USA.pdfPremier Mobile App Development Agency in USA.pdf
Premier Mobile App Development Agency in USA.pdf
 
一比一原版(Princeton毕业证书)普林斯顿大学毕业证如何办理
一比一原版(Princeton毕业证书)普林斯顿大学毕业证如何办理一比一原版(Princeton毕业证书)普林斯顿大学毕业证如何办理
一比一原版(Princeton毕业证书)普林斯顿大学毕业证如何办理
 
一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理
一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理
一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理
 
原版定制(Management毕业证书)新加坡管理大学毕业证原件一模一样
原版定制(Management毕业证书)新加坡管理大学毕业证原件一模一样原版定制(Management毕业证书)新加坡管理大学毕业证原件一模一样
原版定制(Management毕业证书)新加坡管理大学毕业证原件一模一样
 
一比一定制(Dundee毕业证书)英国邓迪大学毕业证学位证书
一比一定制(Dundee毕业证书)英国邓迪大学毕业证学位证书一比一定制(Dundee毕业证书)英国邓迪大学毕业证学位证书
一比一定制(Dundee毕业证书)英国邓迪大学毕业证学位证书
 
The Rise of Subscription-Based Digital Services.pdf
The Rise of Subscription-Based Digital Services.pdfThe Rise of Subscription-Based Digital Services.pdf
The Rise of Subscription-Based Digital Services.pdf
 
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
 
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
 
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
 
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
 
一比一原版(PSU毕业证书)美国宾州州立大学毕业证如何办理
一比一原版(PSU毕业证书)美国宾州州立大学毕业证如何办理一比一原版(PSU毕业证书)美国宾州州立大学毕业证如何办理
一比一原版(PSU毕业证书)美国宾州州立大学毕业证如何办理
 
原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样
原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样
原版定制(PSU毕业证书)美国宾州州立大学毕业证原件一模一样
 
一比一定制波士顿学院毕业证学位证书
一比一定制波士顿学院毕业证学位证书一比一定制波士顿学院毕业证学位证书
一比一定制波士顿学院毕业证学位证书
 
原版定制(爱大毕业证书)英国爱丁堡大学毕业证原件一模一样
原版定制(爱大毕业证书)英国爱丁堡大学毕业证原件一模一样原版定制(爱大毕业证书)英国爱丁堡大学毕业证原件一模一样
原版定制(爱大毕业证书)英国爱丁堡大学毕业证原件一模一样
 
一比一原版英国萨赛克斯大学毕业证如何办理
一比一原版英国萨赛克斯大学毕业证如何办理一比一原版英国萨赛克斯大学毕业证如何办理
一比一原版英国萨赛克斯大学毕业证如何办理
 
GOOGLE Io 2024 At takes center stage.pdf
GOOGLE Io 2024 At takes center stage.pdfGOOGLE Io 2024 At takes center stage.pdf
GOOGLE Io 2024 At takes center stage.pdf
 
AI Generated 3D Models | AI 3D Model Generator
AI Generated 3D Models | AI 3D Model GeneratorAI Generated 3D Models | AI 3D Model Generator
AI Generated 3D Models | AI 3D Model Generator
 
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
一比一定制(Temasek毕业证书)新加坡淡马锡理工学院毕业证学位证书
 
Free scottie t shirts Free scottie t shirts
Free scottie t shirts Free scottie t shirtsFree scottie t shirts Free scottie t shirts
Free scottie t shirts Free scottie t shirts
 

More Than Media Queries - Responsive Day Out 2