Combining context and HTML5 for a better user experience

A talk from Camp Digital 2014 (http://campdigital.wearesigma.com) on how we can use HTML5 APIs to determine more about a users context and in turn provide a better user experience for them.

A video of this talk is also available at https://www.youtube.com/watch?v=YTt60-Jx9Q4&feature=youtu.be

Transcript

1. COMBINING CONTEXT AND HTML5 FOR A BETTER USER EXPERIENCE Camp Digital 2014 @rich_clark
2. Who’ve we got?
5. http://platform.html5.org
6. https://www.mozilla.org/en-US/firefox/os/
7. User on the go
8. Mobile user •  Google research?
9. Context
10. Device
12. http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
13. Our context(s) drives device choice “"
14. Input/Output
15. Responsive design
16. http://www.columbian.com/news/2013/dec/30/fitness-bands-are-great-for-aspiring-health-nuts/
17. http://www.flickr.com/photos/nest/6264860247/
18. APIs
19. http://shinydemos.com/photo-booth/
20. http://webdesign.maratz.com/lab/responsivetypography/simple/
21. http://www.raymondcamden.com/index.cfm/2012/4/6/Face-detection-with-getUserMedia
23. Orientation Camera & Microphone Web Storage Vibration File API
24. Location
30. Geolocation
31. Time
33. http://www.bbc.co.uk/blogs/internet/posts/digital_olympics_reach_stream_stats
35. •  Anticipatory shipping http://www.flickr.com/photos/fugutabetai/3244225116/
36. Notifications Alarm Time/Clock
37. Environment
41. Ambient light Proximty Network Battery AppCache/ Offline
42. Multiple Devices
43. http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem
44. http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem
45. http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem
46. http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem
47. Device Location Time Environment Multiscreen
48. Reading - Context •  http://www.cennydd.co.uk/2013/designing-with-context •  http://uxmag.com/articles/designing-for-context-the- multiscreen-ecosystem •  http://alistapart.com/article/environmental-design-with- the-device-api (Read comments too as parts of the article are incorrect). •  http://www.creativebloq.com/web-design/beyond- responsive-design-discover-context-driven-design-8134226 •  http://www.fastcolabs.com/3016702/why-the-next-big- thing-in-computing-is-conversation
49. Reading – APIs – Google is your friend here though •  https://hacks.mozilla.org/2011/08/introducing-webapi/ •  https://wiki.mozilla.org/WebAPI •  https://developer.mozilla.org/en-US/docs/WebAPI •  http://www.w3.org/2009/dap/ •  https://hacks.mozilla.org/2012/01/mozilla-joins-the-w3c-dap-webapi-progress/ •  https://developer.mozilla.org/en-US/docs/Web/API/DeviceLightEvent •  http://www.html5rocks.com/en/tutorials/pagevisibility/intro/ (We didn’t talk about this one!) •  https://hacks.mozilla.org/2013/04/ambient-light-events-and-javascript-detection/ •  http://www.slideshare.net/jamesgpearce/mobile-device-apis •  https://hacks.mozilla.org/2013/06/the-proximity-api/ •  http://html5doctor.com/finding-your-position-with-geolocation/ •  http://www.html5rocks.com/en/tutorials/webperformance/usertiming/
50. Thanks! @rich_clark rich@kmp.co.uk