Visit freshtilledsoil.com for more information!

1. Bringing Environmental
esign to the Web

2. Hi, I’m Tim from Fresh Tilled Soil,
and I crafted this experience just for you.

3. Fresh Tilled Soil is UI/UX.

4. WTF is Experience Design?

5. WTF is Environmental Design?

7. What we’re going over
• How we build experiences from Mobile to RWD
• Env. Design principles & implementation
• Moving forward with Env. Design

8. Crafting from mobile to responsive design
UX

9. Environmental Design
is NOT ...
“Responsive Design +”

10. Environmental Design
Responsive
Mobile
Design

11. “mobile”
“responsive design”
Buzzworthiness
“environmental design”
“dog”
Length of word/phrase

12. Mobile ->

13. Not the web.

16. Mobile ->
<-RWD

17. Problems solved

18. Challenges exposed

19. THE COMMUNITY
RESPONDS!

20. Picturefill
<data-­‐picture
data-­‐alt=”dogs”>
<div
data-­‐src=”sm.png”></div>
<div
data-­‐
src=”lg.png”
data-­‐media=”(min-­‐width:
800px)”></div>
<noscript>
<img
src=”sm.png”
alt=”dogs”>
</noscript>
</div>

22. Mobile ->
<-RWD
Environmental
Design

23. Environmental Design
breaking free from the browser

24. Env. Design Principles
• The real world exists.
• You can’t control it.

25. Static vs. Dynamic
Design Conditions

26. dowebsitesneedtolookexactlythesameineverybrowser.com

27. Aspect ratio
Height/Width
Orientation
Resolution (dpi)
Touch enabled (-moz-)

29. Boot2Gecko

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)

32. Bandwidth
if(
navigator.mozConnection.bandwidth
>=
3
){
...
}

34. Battery
if(
navigator.battery.level
>
.25
){
...
}

35. Illustration
by:
Kevin
Cornell
&
A
List
Apart

36. Ambient Light
window.addEventListener(‘devicelight’,
function(e)
{
//
function
},
true);

37. Vibrate
interval
navigator.vibrate([50,
100,
150]);
vibration #1 length (ms) vibration #2 length

38. Moving how we can push the limits
forward

39. Affecting Design?

40. The Manage Library
github.com / timwright12 / js-asset-management

41. The Manage Library
if( Manage.connection === “good” ) { ... }
if( Manage.battery === “good” ) { ... }
if( Manage.pixelRatio === “good” ) { ... }

43. CREEPY!

44. Dear Tim,
You’re kind of an asshole.
Sincerely,
The HTML5 Meetup

45. What we just went over.
• How we craft experiences from Mobile to RWD
• Env. Design principles & implementation
• Moving forward with Env. Design

46. More Information
• w3.org/2006/webapi
• mozilla.org/b2g
• arewemobileyet.com
• http://alistapart.com/article/environmental-
design-with-the-device-api
• console.log(navigator);

48. Fresh Tilled Labs
• HTML & CSS
• JavaScript
• Responsive Design
• Prototyping in Fireworks
• UX & Product Design
• Typography & Grids
• Mobile Web Mastery

49. Fresh Tilled Podcast
Web:
freshtilledsoil.com/thedirt
Twitter:
@thedirtshow
@freshtilledsoil

50. Learning JavaScript
Amazon
Barnes & Noble
Safari Books
...most places, really.
informIT.com
WRIGHT2740

51. Questions / Comments?

52. @csskarma