Upload
sigma-uk
View
128
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
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]