Bringing Environmental    esign to the Web
Hi, I’m Tim from Fresh Tilled Soil,and I crafted this experience just for you.
Fresh Tilled Soil is UI/UX.
WTF is Experience Design?
WTF is Environmental Design?
What we’re going over• How we build experiences from Mobile to RWD• Env. Design principles & implementation• Moving forwar...
Crafting from mobile to responsive design          UX
Environmental Design      is NOT ...“Responsive Design +”
Environmental Design     Responsive                  Mobile     Design
“mobile”                                               “responsive design”Buzzworthiness                                  ...
Mobile ->
Not the web.
Mobile -><-RWD
Problems solved
Challenges exposed
THE COMMUNITY  RESPONDS!
Picturefill<data-­‐picture	  data-­‐alt=”dogs”>    <div	  data-­‐src=”sm.png”></div>    <div	  data-­‐	  src=”lg.png”	  da...
Mobile -><-RWD        Environmental        Design
Environmental Design      breaking free from the browser
Env. Design Principles• The real world exists.• You can’t control it.
Static vs. DynamicDesign Conditions
dowebsitesneedtolookexactlythesameineverybrowser.com
Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-)
Boot2Gecko
API            Desktop    Android FF   B2G       Idle             Yes         Yes        Yes   Vibrate (W3C)      No plans...
Bandwidthif(	  navigator.mozConnection.bandwidth	  >=	  3	  ){	  ...	  }
Batteryif(	  navigator.battery.level	  >	  .25	  ){	  ...	  }
Illustration	  by:	  Kevin	  Cornell	  &	  A	  List	  Apart
Ambient Lightwindow.addEventListener(‘devicelight’,	  function(e)	  {	  	  	  	  //	  function},	  true);
Vibrate                          intervalnavigator.vibrate([50,	  100,	  150]);           vibration #1 length (ms)   vibra...
Moving how we can push the limits       forward
Affecting Design?
The Manage Librarygithub.com / timwright12 / js-asset-management
The Manage Libraryif( Manage.connection === “good” ) { ... }if( Manage.battery === “good” )    { ... }if( Manage.pixelRati...
CREEPY!
Dear Tim,You’re kind of an asshole.Sincerely,The HTML5 Meetup
What we just went over.• How we craft experiences from Mobile to RWD• Env. Design principles & implementation• Moving forw...
More Information• w3.org/2006/webapi• mozilla.org/b2g• arewemobileyet.com• http://alistapart.com/article/environmental-  d...
Fresh Tilled Labs• HTML & CSS• JavaScript• Responsive Design• Prototyping in Fireworks• UX & Product Design• Typography & ...
Fresh Tilled PodcastWeb:freshtilledsoil.com/thedirtTwitter:@thedirtshow@freshtilledsoil
Learning JavaScriptAmazonBarnes & NobleSafari Books  ...most places, really.informIT.comWRIGHT2740
Questions / Comments?
@csskarma
Bringing Environmental Design to the Web
Bringing Environmental Design to the Web
Bringing Environmental Design to the Web
Bringing Environmental Design to the Web
Bringing Environmental Design to the Web
Bringing Environmental Design to the Web
Bringing Environmental Design to the Web
Bringing Environmental Design to the Web
Bringing Environmental Design to the Web
Upcoming SlideShare
Loading in …5
×

Bringing Environmental Design to the Web

7,204 views

Published on

Visit freshtilledsoil.com for more information!

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,204
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
17
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

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. DynamicDesign Conditions
  22. dowebsitesneedtolookexactlythesameineverybrowser.com
  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 Librarygithub.com / 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• 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 PodcastWeb:freshtilledsoil.com/thedirtTwitter:@thedirtshow@freshtilledsoil
  41. Learning JavaScriptAmazonBarnes & NobleSafari Books ...most places, really.informIT.comWRIGHT2740
  42. Questions / Comments?
  43. @csskarma

×