1. With great power comes
great (development) responsibility
SALLY JENKINSON · @sjenkinson · From the Front · 18th September 2014

2. Hello!
SALLY JENKINSON
@sjenkinson
sally@recordssoundthesame.com
www.recordssoundthesame.com

3. THE three laws

4. 1. A robot may not injure a human being or, through
inaction, allow a human being to come to harm.
2. A robot must obey the orders given to it by human beings,
except where such orders would conflict with the First Law.
3. A robot must protect its own existence as long as such
protection does not conflict with the First or Second Law.
Three Laws of Robotics

5. ?

6. 1. technology is
experiences

10. technology
experiences

11. “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/

12. User experience is
not just visual
User experience is affected
by our implementations.

13. 46%
of online shoppers cite checkout speed as the
number one factor that determines whether
or not they will return to a site.
http://blog.radware.com/applicationdelivery/applicationaccelerationoptimization/2014/01/55-web-performance-stats-youll-want-to-know/

15. FRONT-end
performance

16. test
your experiences

17. evolve
your thinking

18. Modified from http://commons.wikimedia.org/wiki/File:Human_evolution.svg. Devices from icomoon.io

19. 2. be MORE
responsive

20. fluid grid
+
flexible images
+
media queries

21. Size isn’t everything
(RWD > media queries > widths)
dev.w3.org/csswg/mediaqueries4/

22. “used to query whether scripting languages, such as JavaScript, are supported on the
dev.w3.org/csswg/mediaqueries4/
Scripting
current document”
pointer
hover
light-level
“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”

23. + + API

24. DeviceLightEvent = ? lux
LightLevelEvent = dim | normal | bright
Media query translation: washed
(Approximate levels of dim: < 50 lux, normal: 50 - 10000 lux, bright: > 10000 lux)
www.w3.org/TR/ambient-light/

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

26. Invisible
requirements

27. offlinefirst.org

29. …

30. Responsive architecture
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

31. Kenny Stoltz -https://www.flickr.com/photos/42901313@N00/226740290/

32. Shelley Bernstein -https://www.flickr.com/photos/31484272@N00/7044075263/

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

34. More than
media queries

35. BUT Wait!

36. http://huffduffer.com/adactio/167838

37. …

38. 3. BE responsive
RESPONSIBLE

40. Narcissistic
web design

42. RESPONSIBLE
WEB DESIGN

45. “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

46. 1. A robot may not injure a human being or, through
inaction, allow a human being to come to harm.
2. A robot must obey the orders given to it by human beings,
except where such orders would conflict with the First Law.
3. A robot must protect its own existence as long as such
protection does not conflict with the First or Second Law.
Three Laws of Robotics

47. Change is hard
(but it’s also good)

48. “I have a champagne taste
on a beer budget.”
- Clients From Hell, 2013
http://clientsfromhell.net/post/68277799025/i-have-a-champagne-taste-on-a-beer-budget

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

50. I Can Make - @icanmakehq

51. 1. technology IS experiences
–
–
2. be more responsive
3. BE responsive RESPONSIBLE

52. Thank you
Sally Jenkinson
www.recordssoundthesame.com
sally@recordssoundthesame.com · @sjenkinson