Tim Wright gave a presentation on environmental design on the web. He discussed the evolution from native apps to responsive design and challenges related to asset management. He outlined upcoming web APIs that will allow accessing device sensors and characteristics. To fully embrace environmental design, he said browsers need to adapt to the real world instead of trying to control it.

1. Environmental Design
on the Web.
Tim Wright, @csskarma

2. I’m Tim from Fresh Tilled Soil,
and I crafted this experience just for you.
Environmental Design on the Web @csskarma

3. 8 years of User Experience Design.

4. What we’re going over.
Where we came from.
Where we are.
Where we’re going.
What we need to get here.
Environmental Design on the Web @csskarma

5. Where did we come from?
Environmental Design on the Web @csskarma

6. Native Apps vs. Mobile Web
Environmental Design on the Web @csskarma

7. Discoveries.
Environmental Design on the Web @csskarma

8. Browsers will always be
behind devices.
Environmental Design on the Web @csskarma

9. Environmental Design on the Web @csskarma

10. This isn’t the Web
Environmental Design on the Web @csskarma

11. Environmental Design on the Web @csskarma

12. I <3 Responsive Design
Environmental Design on the Web @csskarma

13. Where are we?

14. API / Data Source
iOS Android Web
Environmental Design on the Web @csskarma

15. Web
Mobile Web Responsive
Design
Environmental Design on the Web @csskarma

16. Problems that Responsive Design
addressed :)
Environmental Design on the Web @csskarma

17. Problems that Responsive Design
exposed :(
Environmental Design on the Web @csskarma

18. Environmental Design on the Web @csskarma

19. Asset Management
Environmental Design on the Web @csskarma

20. <picture
alt=”tired
dogs”>
<source
src=”small.png”>
<source
src=”medium.png”
media=”(min-­‐width:
400px)”>
<source
src=”large.png”
media=”(min-­‐width:
800px)”>
<img
src=”small.png”
alt=”tired
dogs”>
</picture>
Environmental Design on the Web @csskarma

21. Environmental Design on the Web @csskarma

22. Ways to responsibly craft a user
experience
Environmental Design on the Web @csskarma

23. Environmental Design on the Web @csskarma

24. Where are we going?

25. What does responsive design really
target?
Environmental Design on the Web @csskarma

26. Aspect ratio
Height/Width
Orientation
Resolution (dpi)
Touch enabled (-moz-)
Environmental Design on the Web @csskarma

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

37. <noscript>
Environmental Design on the Web @csskarma

38. Embracing chaos in the browser.
Environmental Design on the Web @csskarma

39. What do we need to get there?

40. Environmental Design on the Web @csskarma

41. CREEPY!

42. Blah, blah, blah
Environmental Design on the Web @csskarma

43. Environmental Design on the Web @csskarma

44. Always
Remember
User
Experience

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

48. Environmental Design on the Web @csskarma

49. A Fresh Tilled Podcast.
Web:
freshtilledsoil.com/thedirt
Twitter:
@thedirtshow
@freshtilledsoil
Environmental Design on the Web @csskarma

50. I wrote a book.
Amazon
Barnes & Noble
Safari Books
...most places, really.
informIT.com
WRIGHT2740
Environmental Design on the Web @csskarma

51. Questions or Comments?
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