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 rich@kmp.co.uk