27. Breaking out the the device
Environmental Design on the Web @csskarma
28. Environmental Design, 2 main principles
1. The real world exists.
2. You can’t control it (not even project managers).
Environmental Design on the Web @csskarma
29. The WebAPI & Boot2Gecko
Environmental Design on the Web @csskarma
30. API Desktop Android FF B2G
Idle Yes Yes Yes
Vibrate (W3C) No plans Yes Yes
Ambient Light (W3C) No plans Yes Yes
Proximity (W3C) No plans Yes Yes
Battery (W3C) Yes Yes Yes
Mobile Connection No plans No plans Yes
Network
No plans Yes Not yet
Information (W3C)
Environmental Design on the Web @csskarma
31. Idle API
navigator.addIdleObserver({
time:
4
(in
seconds),
onidle:
function
()
{
//
you
are
boring
},
onactive:
function
()
{
//
you
are
awesome
again!
}
});
Environmental Design on the Web @csskarma
32. Vibration API
interval
navigator.vibrate([50,
100,
150]);
vibration #1 length
(ms) vibration #2 length
Environmental Design on the Web @csskarma
33. Ambient Light Sensor API
window.addEventListener(‘devicelight’,
function(e)
{
console.log(e.value);
},
true);
Environmental Design on the Web @csskarma
34. Proximity Sensor API
window.addEventListener(‘deviceproximity’,
function(e)
{
if
(e.value
>
e.min
&&
e.value
<
e.max)
{
alert(‘object
is
‘
+
e.value
+
’cm
away!’);
}
},
true);
Environmental Design on the Web @csskarma
35. Focus: Battery & Connection
Environmental Design on the Web @csskarma
36. navigator.battery.
charging
(true/false)
chargingTime
(seconds)
dischargingTime
(seconds)
level
(0-‐10)
Events
chargingchange
chargingtimechange
dischargingchangechange
levelchange
Environmental Design on the Web @csskarma
45. credit.com/blog
useful ads? what?
Environmental Design on the Web @csskarma
46. What we went over.
Journey from mobile to responsive.
Responsive problems & solutions.
Responding to an environment.
Getting some help with the future.
Environmental Design on the Web @csskarma
47. Where to find more information.
w3.org/2006/webapi
mozilla.org/b2g
wiki.mozilla.org/WebAPI
dougturner.wordpress.com/2012/03/26/device-light-sensor/
arewemobileyet.com (“are we mobile yet” .com)
console.log(navigator);
Environmental Design on the Web @csskarma
52. Contact ‘n’ Stuff.
E-mail: tim.wright@freshtilledsoil.com
Twitter: @csskarma
Slides: csskarma.com/enviro-design
General awesomeness: freshtilledsoil.com/blog
Credits.
Font: Helvetica Neue
Vectors: The Noun Project
Environmental Design on the Web @csskarma