Deck1 export-141101063436-conversion-gate01

49
SALLY JENKINSON · @sjenkinson · The Web Is · 30th/31st October 2014 OUR responsibility The web is

description

test test test

Transcript of Deck1 export-141101063436-conversion-gate01

Page 1: Deck1 export-141101063436-conversion-gate01

SALLY JENKINSON · @sjenkinson · The Web Is · 30th/31st October 2014

OUR responsibilityThe web is

Page 2: Deck1 export-141101063436-conversion-gate01

Hello!SALLY JENKINSON

Freelance technical consultant !

@sjenkinson [email protected]

recordssoundthesame.com

Page 3: Deck1 export-141101063436-conversion-gate01
Page 4: Deck1 export-141101063436-conversion-gate01

https://www.flickr.com/photos/ramsd/10905624385

Page 5: Deck1 export-141101063436-conversion-gate01
Page 6: Deck1 export-141101063436-conversion-gate01
Page 7: Deck1 export-141101063436-conversion-gate01
Page 8: Deck1 export-141101063436-conversion-gate01
Page 9: Deck1 export-141101063436-conversion-gate01

the web is experiences

Page 10: Deck1 export-141101063436-conversion-gate01

?

Page 11: Deck1 export-141101063436-conversion-gate01

https://www.flickr.com/photos/58378435@N02/6833346648

Page 12: Deck1 export-141101063436-conversion-gate01

“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: Deck1 export-141101063436-conversion-gate01
Page 14: Deck1 export-141101063436-conversion-gate01

https://www.flickr.com/photos/joeshlabotnik/305410323

Page 15: Deck1 export-141101063436-conversion-gate01

the web is Evolving

Page 16: Deck1 export-141101063436-conversion-gate01
Page 17: Deck1 export-141101063436-conversion-gate01

fluid grid+

flexible images+

media queries

Page 18: Deck1 export-141101063436-conversion-gate01

Size isn’t everything(RWD > media queries > widths)

Ambient Light API

Page 19: Deck1 export-141101063436-conversion-gate01

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: Deck1 export-141101063436-conversion-gate01

+ + API

Page 21: Deck1 export-141101063436-conversion-gate01

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: Deck1 export-141101063436-conversion-gate01

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: Deck1 export-141101063436-conversion-gate01

@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: Deck1 export-141101063436-conversion-gate01

sallyjenkinson.co.uk/blog/2014/05/18/light-level-demo/

Page 25: Deck1 export-141101063436-conversion-gate01

Invisible requirements

Page 26: Deck1 export-141101063436-conversion-gate01

offlinefirst.org

Page 27: Deck1 export-141101063436-conversion-gate01
Page 28: Deck1 export-141101063436-conversion-gate01

https://www.flickr.com/photos/127834186@N05/15268499666/

Page 29: Deck1 export-141101063436-conversion-gate01

http://www.gehealthcare.com/promo/advseries/

Page 30: Deck1 export-141101063436-conversion-gate01

More than media queries

Page 31: Deck1 export-141101063436-conversion-gate01

BUT Wait!*

Page 32: Deck1 export-141101063436-conversion-gate01

attitudes are

http://huffduffer.com/adactio/167838

our responsibility

Page 33: Deck1 export-141101063436-conversion-gate01

<picture>

Page 34: Deck1 export-141101063436-conversion-gate01

https://www.flickr.com/photos/dullhunk/202872717

Page 35: Deck1 export-141101063436-conversion-gate01
Page 36: Deck1 export-141101063436-conversion-gate01

https://www.flickr.com/photos/gsfc/14990033062/in/photostream/

Page 37: Deck1 export-141101063436-conversion-gate01

https://www.flickr.com/photos/drdul/210641686

Page 38: Deck1 export-141101063436-conversion-gate01
Page 39: Deck1 export-141101063436-conversion-gate01

<the-web-is>

Page 40: Deck1 export-141101063436-conversion-gate01

The only way is ethics

Page 41: Deck1 export-141101063436-conversion-gate01
Page 42: Deck1 export-141101063436-conversion-gate01

“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: Deck1 export-141101063436-conversion-gate01

“ It’s not who I am underneath, but what I do that defines me. ”

- Batman

Page 44: Deck1 export-141101063436-conversion-gate01

Change is hard (but it’s also good)

Page 45: Deck1 export-141101063436-conversion-gate01

https://www.flickr.com/photos/superwebdeveloper/8251022476/

Page 46: Deck1 export-141101063436-conversion-gate01

Be excellent To each other

Page 47: Deck1 export-141101063436-conversion-gate01
Page 48: Deck1 export-141101063436-conversion-gate01

the web isour responsibility

Page 49: Deck1 export-141101063436-conversion-gate01

Thank youSally Jenkinson

recordssoundthesame.com

[email protected] · @sjenkinson