Combining context and HTML5 for a better user experience

860 views

Published on

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.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
860
On SlideShare
0
From Embeds
0
Number of Embeds
85
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Combining context and HTML5 for a better user experience

  1. 1. COMBINING CONTEXT AND HTML5 FOR A BETTER USER EXPERIENCE Camp Digital 2014 @rich_clark
  2. 2. Who’ve we got?
  3. 3. http://platform.html5.org
  4. 4. https://www.mozilla.org/en-US/firefox/os/
  5. 5. User on the go
  6. 6. Mobile user •  Google research?
  7. 7. Context
  8. 8. Device
  9. 9. http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
  10. 10. Our context(s) drives device choice “"
  11. 11. Input/Output
  12. 12. Responsive design
  13. 13. http://www.columbian.com/news/2013/dec/30/fitness-bands-are-great-for-aspiring-health-nuts/
  14. 14. http://www.flickr.com/photos/nest/6264860247/
  15. 15. APIs
  16. 16. http://shinydemos.com/photo-booth/
  17. 17. http://webdesign.maratz.com/lab/responsivetypography/simple/
  18. 18. http://www.raymondcamden.com/index.cfm/2012/4/6/Face-detection-with-getUserMedia
  19. 19. Orientation Camera & Microphone Web Storage Vibration File API
  20. 20. Location
  21. 21. Geolocation
  22. 22. Time
  23. 23. http://www.bbc.co.uk/blogs/internet/posts/digital_olympics_reach_stream_stats
  24. 24. •  Anticipatory shipping http://www.flickr.com/photos/fugutabetai/3244225116/
  25. 25. Notifications Alarm Time/Clock
  26. 26. Environment
  27. 27. Ambient light Proximty Network Battery AppCache/ Offline
  28. 28. Multiple Devices
  29. 29. http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem
  30. 30. http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem
  31. 31. http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem
  32. 32. http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem
  33. 33. Device Location Time Environment Multiscreen
  34. 34. 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
  35. 35. 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/
  36. 36. Thanks! @rich_clark rich@kmp.co.uk

×