Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bringing Environmental Design to the Web


Published on

Visit for more information!

Published in: Technology

Bringing Environmental Design to the Web

  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?
  6. What we’re going over• How we build experiences from Mobile to RWD• Env. Design principles & implementation• Moving forward with Env. Design
  7. Crafting from mobile to responsive design UX
  8. Environmental Design is NOT ...“Responsive Design +”
  9. Environmental Design Responsive Mobile Design
  10. “mobile” “responsive design”Buzzworthiness “environmental design” “dog” Length of word/phrase
  11. Mobile ->
  12. Not the web.
  13. Mobile -><-RWD
  14. Problems solved
  15. Challenges exposed
  17. 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>
  18. Mobile -><-RWD Environmental Design
  19. Environmental Design breaking free from the browser
  20. Env. Design Principles• The real world exists.• You can’t control it.
  21. Static vs. DynamicDesign Conditions
  23. Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-)
  24. Boot2Gecko
  25. API Desktop Android FF B2G Idle Yes Yes Yes Vibrate (W3C) No plans Yes YesAmbient Light (W3C) No plans Yes Yes Proximity (W3C) No plans Yes Yes Battery (W3C) Yes Yes YesMobile Connection No plans No plans Yes Network No plans Yes Not yetInformation (W3C)
  26. Bandwidthif(  navigator.mozConnection.bandwidth  >=  3  ){  ...  }
  27. Batteryif(  navigator.battery.level  >  .25  ){  ...  }
  28. Illustration  by:  Kevin  Cornell  &  A  List  Apart
  29. Ambient Lightwindow.addEventListener(‘devicelight’,  function(e)  {        //  function},  true);
  30. Vibrate intervalnavigator.vibrate([50,  100,  150]); vibration #1 length (ms) vibration #2 length
  31. Moving how we can push the limits forward
  32. Affecting Design?
  33. The Manage / timwright12 / js-asset-management
  34. The Manage Libraryif( Manage.connection === “good” ) { ... }if( Manage.battery === “good” ) { ... }if( Manage.pixelRatio === “good” ) { ... }
  35. CREEPY!
  36. Dear Tim,You’re kind of an asshole.Sincerely,The HTML5 Meetup
  37. What we just went over.• How we craft experiences from Mobile to RWD• Env. Design principles & implementation• Moving forward with Env. Design
  38. More Information•••• design-with-the-device-api• console.log(navigator);
  39. Fresh Tilled Labs• HTML & CSS• JavaScript• Responsive Design• Prototyping in Fireworks• UX & Product Design• Typography & Grids• Mobile Web Mastery
  40. Fresh Tilled
  41. Learning JavaScriptAmazonBarnes & NobleSafari Books ...most places, really.informIT.comWRIGHT2740
  42. Questions / Comments?
  43. @csskarma