Embed Size (px)
Citation preview
SALLY JENKINSON · @sjenkinson · The Web Is · 30th/31st October 2014
OUR responsibilityThe web is
Hello!SALLY JENKINSON
Freelance technical consultant !
@sjenkinson [email protected]
recordssoundthesame.com
the web is experiences
?
https://www.flickr.com/photos/58378435@N02/6833346648
“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/
https://www.flickr.com/photos/joeshlabotnik/305410323
the web is Evolving
fluid grid+
flexible images+
media queries
Size isn’t everything(RWD > media queries > widths)
Ambient Light API
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”
+ + 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
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
@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
sallyjenkinson.co.uk/blog/2014/05/18/light-level-demo/
Invisible requirements
offlinefirst.org
https://www.flickr.com/photos/127834186@N05/15268499666/
More than media queries
BUT Wait!*
attitudes are
http://huffduffer.com/adactio/167838
our responsibility
<picture>
https://www.flickr.com/photos/gsfc/14990033062/in/photostream/
<the-web-is>
The only way is ethics
“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
“ It’s not who I am underneath, but what I do that defines me. ”
- Batman
Change is hard (but it’s also good)
https://www.flickr.com/photos/superwebdeveloper/8251022476/
Be excellent To each other
the web isour responsibility
