Pro Yearly is on sale from $80 to $50! »

Combining context and HTML5 for a better user experience

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

90fbce3924bb9b26f23f6f4d5ceeaf6e?s=128

richclark

March 27, 2014
Tweet

Transcript

  1. COMBINING CONTEXT AND HTML5 FOR A BETTER USER EXPERIENCE Camp

    Digital 2014 @rich_clark
  2. Who’ve we got?

  3. None
  4. None
  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

  11. None
  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

  22. None
  23. Orientation Camera & Microphone Web Storage Vibration File API

  24. Location

  25. None
  26. None
  27. None
  28. None
  29. None
  30. Geolocation

  31. Time

  32. None
  33. http://www.bbc.co.uk/blogs/internet/posts/digital_olympics_reach_stream_stats

  34. None
  35. •  Anticipatory shipping http://www.flickr.com/photos/fugutabetai/3244225116/

  36. Notifications Alarm Time/Clock

  37. Environment

  38. None
  39. None
  40. None
  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