Environmental Design                            on the Web.   Environmental Design on the Web        Tim Wright, @csskarma...
I’m Tim from Fresh Tilled Soil,                            and I crafted this experience just for you.   Environmental Des...
Fresh Tilled Soil is UX/UI   Environmental Design on the Web                   Tim Wright, @csskarmaThursday, December 13,...
What we’re going over.        Where we came from.        Where we are.        Where we’re going.        What we need to ge...
Where did we come from?   Environmental Design on the Web                    @csskarmaThursday, December 13, 12
Native Apps vs. Mobile Web   Environmental Design on the Web                 Tim Wright, @csskarmaThursday, December 13, 12
Discoveries.   Environmental Design on the Web                  Tim Wright, @csskarmaThursday, December 13, 12
Browsers will always be                               behind devices.   Environmental Design on the Web                Tim...
“                            The only way to                            succeed is to not                            worry...
Not the web.   Environmental Design on the Web                  Tim Wright, @csskarmaThursday, December 13, 12
Environmental Design on the Web   Tim Wright, @csskarmaThursday, December 13, 12
Environmental Design on the Web   Tim Wright, @csskarmaThursday, December 13, 12
I                            RWD   Environmental Design on the Web   Tim Wright, @csskarmaThursday, December 13, 12
Where are we?Thursday, December 13, 12
API / Data Source                    iOS              Android       Web   Environmental Design on the Web                 ...
Web                            Mobile Web         Responsive                                               Design   Enviro...
Web                            Mobile Web         Responsive                                               Design   Enviro...
Problems that Responsive Design                           addressed :)   Environmental Design on the Web         Tim Wrigh...
Problems that Responsive Design                            exposed :(   Environmental Design on the Web         Tim Wright...
Environmental Design on the Web   Tim Wright, @csskarmaThursday, December 13, 12
Asset Management   Environmental Design on the Web              Tim Wright, @csskarmaThursday, December 13, 12
Environmental Design on the Web   Tim Wright, @csskarmaThursday, December 13, 12
<data-­‐picture	  data-­‐alt=”dogs”>           <div	  data-­‐src=”sm.png”></div>           <div	  data-­‐	  src=”lg.png”	 ...
“                       Development usually                            starts when a                            designer g...
Where are we going?   Environmental Design on the Web                Tim Wright, @csskarmaThursday, December 13, 12
What does responsive design really target?   Environmental Design on the Web      Tim Wright, @csskarmaThursday, December ...
Aspect ratio    Height/Width    Orientation    Resolution (dpi)    Touch enabled (-moz-)   Environmental Design on the Web...
Aspect ratio    Height/Width    Orientation    Resolution (dpi)    Touch enabled (-moz-)   Environmental Design on the Web...
Aspect ratio    Height/Width    Orientation    Resolution (dpi)    Touch enabled (-moz-)   Environmental Design on the Web...
Aspect ratio    Height/Width    Orientation    Resolution (dpi)    Touch enabled (-moz-)   Environmental Design on the Web...
Aspect ratio    Height/Width    Orientation    Resolution (dpi)    Touch enabled (-moz-)   Environmental Design on the Web...
Breaking free from the static environment.   Environmental Design on the Web       Tim Wright, @csskarmaThursday, December...
Web                            Mobile Web         Responsive                                               Design   Enviro...
Web                            Mobile Web         Responsive                                               Design   Enviro...
Web                            Mobile Web              Responsive                                                    Desig...
Environmental Design   Environmental Design on the Web   Tim Wright, @csskarmaThursday, December 13, 12
Environmental Design, 2 main principles   Environmental Design on the Web   Tim Wright, @csskarmaThursday, December 13, 12
Environmental Design, 2 main principles          1. The real world exists.          2. You can’t control it (not even proj...
The Device API & Boot2Gecko                                     (aka the Web API)   Environmental Design on the Web       ...
API             Desktop    Android FF       B2G                      Idle             Yes         Yes            Yes      ...
Idle API                            navigator.addIdleObserver({                            	  	  	  	  time	  	  	  	  :	 ...
Idle API                            navigator.addIdleObserver({                            	  	  	  	  time	  	  	  	  :	 ...
Idle API                            navigator.addIdleObserver({                            	  	  	  	  time	  	  	  	  :	 ...
Vibration API                                                      interval                            navigator.vibrate([...
Ambient Light Sensor API    window.addEventListener(‘devicelight’,	  function(e)	  {    	  	  	  	  //	  function    },	  ...
Ambient Light Sensor API    window.addEventListener(‘devicelight’,	  function(e)	  {    	  	  	  	  //	  function    },	  ...
Proximity Sensor API  window.addEventListener(‘deviceproximity’,	  function(e)	  {  	  	  	  	  	  //	  function  },	  tru...
Proximity Sensor API  window.addEventListener(‘deviceproximity’,	  function(e)	  {  	  	  	  	  	  //	  function  },	  tru...
Connection & Battery   Environmental Design on the Web                 Tim Wright, @csskarmaThursday, December 13, 12
Network Connection API         navigator.mozConnection         bandwidth (in mbs)         metered (true/false)   Environme...
Network Connection API         if(	  navigator.mozConnection.bandwidth	  >=	  3	  ){	  ...	  }   Environmental Design on t...
Network Connection API         if(	  navigator.mozConnection.bandwidth	  >=	  3	  ){	  ...	  }   Environmental Design on t...
Environmental Design on the Web   Tim Wright, @csskarmaThursday, December 13, 12
Battery Status API         navigator.battery         charging (true/false)         chargingTime (seconds)         discharg...
Battery Status API                      if(	  navigator.battery.level	  >	  .25	  ){	  ...	  }   Environmental Design on t...
<noscript>   Environmental Design on the Web                Tim Wright, @csskarmaThursday, December 13, 12
The browser is weird, and that’s OK.   Environmental Design on the Web      Tim Wright, @csskarmaThursday, December 13, 12
What do we need to get there?   Environmental Design on the Web              Tim Wright, @csskarmaThursday, December 13, 12
The Manage Library           github.com / timwright12 / js-asset-management   Environmental Design on the Web             ...
if( Manage.connection === “good” ) { ... }   Environmental Design on the Web                    Tim Wright, @csskarmaThurs...
if( Manage.connection === “good” ) { ... }                 if( Manage.battery === “good” )    { ... }   Environmental Desi...
if( Manage.connection === “good” ) { ... }                 if( Manage.battery === “good” )    { ... }                 if( ...
Environmental Design on the Web   Tim Wright, @csskarmaThursday, December 13, 12
CREEPY!   Environmental Design on the Web   Tim Wright, @csskarmaThursday, December 13, 12
Blah, blah, blah   Environmental Design on the Web                      Tim Wright, @csskarmaThursday, December 13, 12
What we went over.        Journey from mobile to responsive.        Responsive problems & solutions.        Responding to ...
Where to find more information.        w3.org/2006/webapi        mozilla.org/b2g        wiki.mozilla.org/WebAPI        doug...
Environmental Design on the Web   Tim Wright, @csskarmaThursday, December 13, 12
A Fresh Tilled Podcast.        Web:        freshtilledsoil.com/thedirt        Twitter:        @thedirtshow        @freshti...
I wrote a book.        Amazon        Barnes & Noble        Safari Books              ...most places, really.        inform...
Questions or Comments?   Environmental Design on the Web               Tim Wright, @csskarmaThursday, December 13, 12
Contact ‘n’ Stuff.        E-mail: tim.wright@freshtilledsoil.com        Twitter: @csskarma        Slides: csskarma.com/envi...
Upcoming SlideShare
Loading in...5
×

Environmental Design Vol. 2

700

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
700
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Environmental Design Vol. 2

  1. 1. Environmental Design on the Web. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  2. 2. I’m Tim from Fresh Tilled Soil, and I crafted this experience just for you. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  3. 3. Fresh Tilled Soil is UX/UI Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  4. 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 Tim Wright, @csskarmaThursday, December 13, 12
  5. 5. Where did we come from? Environmental Design on the Web @csskarmaThursday, December 13, 12
  6. 6. Native Apps vs. Mobile Web Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  7. 7. Discoveries. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  8. 8. Browsers will always be behind devices. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  9. 9. “ The only way to succeed is to not worry about what anyone else is doing. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  10. 10. Not the web. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  11. 11. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  12. 12. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  13. 13. I RWD Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  14. 14. Where are we?Thursday, December 13, 12
  15. 15. API / Data Source iOS Android Web Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  16. 16. Web Mobile Web Responsive Design Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  17. 17. Web Mobile Web Responsive Design Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  18. 18. Problems that Responsive Design addressed :) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  19. 19. Problems that Responsive Design exposed :( Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  20. 20. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  21. 21. Asset Management Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  22. 22. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  23. 23. <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> Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  24. 24. “ Development usually starts when a designer gets smacked across the face. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  25. 25. Where are we going? Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  26. 26. What does responsive design really target? Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  27. 27. Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  28. 28. Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  29. 29. Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  30. 30. Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  31. 31. Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  32. 32. Breaking free from the static environment. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  33. 33. Web Mobile Web Responsive Design Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  34. 34. Web Mobile Web Responsive Design Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  35. 35. Web Mobile Web Responsive Design Environmental Design Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  36. 36. Environmental Design Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  37. 37. Environmental Design, 2 main principles Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  38. 38. 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 Tim Wright, @csskarmaThursday, December 13, 12
  39. 39. The Device API & Boot2Gecko (aka the Web API) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  40. 40. 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 Tim Wright, @csskarmaThursday, December 13, 12
  41. 41. Idle API navigator.addIdleObserver({        time        :  4  /*  in  seconds  */,        onidle    :  function  ()  {  ...  },        onactive:  function  ()  {  ...  } }); Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  42. 42. Idle API navigator.addIdleObserver({        time        :  4  /*  in  seconds  */,        onidle    :  function  ()  {  ...  },        onactive:  function  ()  {  ...  } }); Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  43. 43. Idle API navigator.addIdleObserver({        time        :  4  /*  in  seconds  */,        onidle    :  function  ()  {  ...  },        onactive:  function  ()  {  ...  } }); Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  44. 44. Vibration API interval navigator.vibrate([50,  100,  150]); vibration #1 length (ms) vibration #2 length Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  45. 45. Ambient Light Sensor API window.addEventListener(‘devicelight’,  function(e)  {        //  function },  true); Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  46. 46. Ambient Light Sensor API window.addEventListener(‘devicelight’,  function(e)  {        //  function },  true); Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  47. 47. Proximity Sensor API window.addEventListener(‘deviceproximity’,  function(e)  {          //  function },  true); Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  48. 48. Proximity Sensor API window.addEventListener(‘deviceproximity’,  function(e)  {          //  function },  true); Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  49. 49. Connection & Battery Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  50. 50. Network Connection API navigator.mozConnection bandwidth (in mbs) metered (true/false) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  51. 51. Network Connection API if(  navigator.mozConnection.bandwidth  >=  3  ){  ...  } Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  52. 52. Network Connection API if(  navigator.mozConnection.bandwidth  >=  3  ){  ...  } Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  53. 53. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  54. 54. Battery Status API navigator.battery charging (true/false) chargingTime (seconds) dischargingTime (seconds) level (0-1) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  55. 55. Battery Status API if(  navigator.battery.level  >  .25  ){  ...  } Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  56. 56. <noscript> Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  57. 57. The browser is weird, and that’s OK. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  58. 58. What do we need to get there? Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  59. 59. The Manage Library github.com / timwright12 / js-asset-management Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  60. 60. if( Manage.connection === “good” ) { ... } Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  61. 61. if( Manage.connection === “good” ) { ... } if( Manage.battery === “good” ) { ... } Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  62. 62. if( Manage.connection === “good” ) { ... } if( Manage.battery === “good” ) { ... } if( Manage.pixelRatio === “good” ) { ... } Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  63. 63. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  64. 64. CREEPY! Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  65. 65. Blah, blah, blah Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  66. 66. What we went over. Journey from mobile to responsive. Responsive problems & solutions. Responding to an environment, rather than a device Getting some help with the future. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  67. 67. 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 Tim Wright, @csskarmaThursday, December 13, 12
  68. 68. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  69. 69. A Fresh Tilled Podcast. Web: freshtilledsoil.com/thedirt Twitter: @thedirtshow @freshtilledsoil Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  70. 70. I wrote a book. Amazon Barnes & Noble Safari Books ...most places, really. informIT.com WRIGHT2740 Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  71. 71. Questions or Comments? Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  72. 72. Contact ‘n’ Stuff. E-mail: tim.wright@freshtilledsoil.com Twitter: @csskarma Slides: csskarma.com/enviro-design Fresh Tilled Soil writings: freshtilledsoil.com/blog Credits. Font: Helvetica Neue Vectors: The Noun Project Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12

×