COMBINING CONTEXT AND HTML5 FOR A BETTER USER EXPERIENCE Camp Digital 2014 @rich_clark
Jan 27, 2015
COMBINING CONTEXT AND HTML5 FOR A BETTER
USER EXPERIENCE Camp Digital 2014
@rich_clark
Who’ve we got?
http://platform.html5.org
https://www.mozilla.org/en-US/firefox/os/
User on the go
Mobile user
• Google research?
Context
Device
http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
Our context(s) drives device choice “"
Input/Output
Responsive design
http://www.columbian.com/news/2013/dec/30/fitness-bands-are-great-for-aspiring-health-nuts/
http://www.flickr.com/photos/nest/6264860247/
APIs
http://shinydemos.com/photo-booth/
http://webdesign.maratz.com/lab/responsivetypography/simple/
http://www.raymondcamden.com/index.cfm/2012/4/6/Face-detection-with-getUserMedia
Orientation Camera &
Microphone Web
Storage
Vibration File API
Location
Geolocation
Time
http://www.bbc.co.uk/blogs/internet/posts/digital_olympics_reach_stream_stats
• Anticipatory shipping
http://www.flickr.com/photos/fugutabetai/3244225116/
Notifications Alarm Time/Clock
Environment
Ambient light
Proximty Network
Battery AppCache/
Offline
Multiple Devices
http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem
http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem
http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem
http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem
Device Location Time
Environment Multiscreen
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
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/
Thanks!
@rich_clark [email protected]