Successfully reported this slideshow.

Bringing Environmental Design to the Web

9

Share

Upcoming SlideShare
Stop Motion Animation
Stop Motion Animation
Loading in …3
×
1 of 52
1 of 52

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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
  16. THE COMMUNITY RESPONDS!
  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. Dynamic Design Conditions
  22. dowebsitesneedtolookexactlythesameineverybrowser.com
  23. Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-)
  24. Boot2Gecko
  25. 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)
  26. Bandwidth if(  navigator.mozConnection.bandwidth  >=  3  ){  ...  }
  27. Battery if(  navigator.battery.level  >  .25  ){  ...  }
  28. Illustration  by:  Kevin  Cornell  &  A  List  Apart
  29. Ambient Light window.addEventListener(‘devicelight’,  function(e)  {        //  function },  true);
  30. Vibrate interval navigator.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 Library github.com / timwright12 / js-asset-management
  34. The Manage Library if( 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 • w3.org/2006/webapi • mozilla.org/b2g • arewemobileyet.com • http://alistapart.com/article/environmental- 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 Podcast Web: freshtilledsoil.com/thedirt Twitter: @thedirtshow @freshtilledsoil
  41. Learning JavaScript Amazon Barnes & Noble Safari Books ...most places, really. informIT.com WRIGHT2740
  42. Questions / Comments?
  43. @csskarma

×