the web is our responsibility
TRANSCRIPT
![Page 1: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/1.jpg)
SALLY JENKINSON · @sjenkinson · The Web Is · 30th/31st October 2014
OUR responsibilityThe web is
![Page 2: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/2.jpg)
Hello!SALLY JENKINSON
Freelance technical consultant !
@sjenkinson [email protected]
recordssoundthesame.com
![Page 3: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/3.jpg)
![Page 5: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/5.jpg)
![Page 6: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/6.jpg)
![Page 7: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/7.jpg)
![Page 8: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/8.jpg)
![Page 9: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/9.jpg)
the web is experiences
![Page 10: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/10.jpg)
?
![Page 11: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/11.jpg)
https://www.flickr.com/photos/58378435@N02/6833346648
![Page 12: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/12.jpg)
“We don’t have a UX Team. If the problem
with your service is that the servers are slow
and the UX Team can’t change that, then
they aren’t in control of the user experience
and they shouldn’t be called the user
experience team.”
https://gds.blog.gov.uk/2014/07/18/whats-the-design-process-at-gds/
![Page 13: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/13.jpg)
![Page 14: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/14.jpg)
https://www.flickr.com/photos/joeshlabotnik/305410323
![Page 15: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/15.jpg)
the web is Evolving
![Page 16: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/16.jpg)
![Page 17: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/17.jpg)
fluid grid+
flexible images+
media queries
![Page 18: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/18.jpg)
Size isn’t everything(RWD > media queries > widths)
Ambient Light API
![Page 19: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/19.jpg)
dev.w3.org/csswg/mediaqueries4/
Scripting
pointer
hover
light-level
“used to query whether scripting languages, such as JavaScript, are supported on the
current document”
“used to query about the presence and accuracy of a pointing device such as a mouse”
“used to query the user’s ability to hover over elements on the page”
![Page 20: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/20.jpg)
+ + API
![Page 21: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/21.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 22: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/22.jpg)
window.addEventListener('devicelight', function(e) {! var lux;! lux = e.value;!!
if (lux < 50) {! //Change things for dim light! }! if (lux >= 50 && lux <= 10000) {! //Change things for normal light! }! if (lux > 10000) {! //Change things for bright light! }!});
Device Light
![Page 23: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/23.jpg)
@media (light-level: dim) {! /*Change things for dim light*/!}!@media (light-level: normal) {! /*Change things for normal light*/!}!@media (light-level: washed) {! /*Change things for bright light*/!}
light-level media query
![Page 24: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/24.jpg)
sallyjenkinson.co.uk/blog/2014/05/18/light-level-demo/
![Page 25: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/25.jpg)
Invisible requirements
![Page 26: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/26.jpg)
offlinefirst.org
![Page 27: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/27.jpg)
![Page 28: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/28.jpg)
https://www.flickr.com/photos/127834186@N05/15268499666/
![Page 30: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/30.jpg)
More than media queries
![Page 31: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/31.jpg)
BUT Wait!*
![Page 32: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/32.jpg)
attitudes are
http://huffduffer.com/adactio/167838
our responsibility
![Page 33: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/33.jpg)
<picture>
![Page 35: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/35.jpg)
![Page 36: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/36.jpg)
https://www.flickr.com/photos/gsfc/14990033062/in/photostream/
![Page 38: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/38.jpg)
![Page 39: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/39.jpg)
<the-web-is>
![Page 40: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/40.jpg)
The only way is ethics
![Page 41: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/41.jpg)
![Page 42: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/42.jpg)
“A Dark Pattern is a type of user interface that appears to have been carefully crafted
to trick users into doing things, such as buying insurance with their purchase or
signing up for recurring bills.”
- darkpatterns.org
![Page 43: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/43.jpg)
“ It’s not who I am underneath, but what I do that defines me. ”
- Batman
![Page 44: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/44.jpg)
Change is hard (but it’s also good)
![Page 45: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/45.jpg)
https://www.flickr.com/photos/superwebdeveloper/8251022476/
![Page 46: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/46.jpg)
Be excellent To each other
![Page 47: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/47.jpg)
![Page 48: The Web Is Our Responsibility](https://reader038.vdocuments.us/reader038/viewer/2022110204/55d578efbb61ebae2f8b45f5/html5/thumbnails/48.jpg)
the web isour responsibility