In this session we'll look at some HTML5 techniques and APIs, such as Geolocation and see how they can benefit us right now. We won't get code heavy but will show practical examples of where we can implement these techniques in the wild whether you're a marketer, designer or developer. We'll then look at what's coming soon to a browser near you to see where else we can take advantage of these new elements, attributes and APIs.

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