Your SlideShare is downloading. ×
0
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Environmental Design Vol. 2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Environmental Design Vol. 2

667

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
667
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Environmental Design on the Web. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 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. Fresh Tilled Soil is UX/UI Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 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. Where did we come from? Environmental Design on the Web @csskarmaThursday, December 13, 12
  • 6. Native Apps vs. Mobile Web Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 7. Discoveries. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 8. Browsers will always be behind devices. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 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. Not the web. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 11. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 12. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 13. I RWD Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 14. Where are we?Thursday, December 13, 12
  • 15. API / Data Source iOS Android Web Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 16. Web Mobile Web Responsive Design Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 17. Web Mobile Web Responsive Design Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 18. Problems that Responsive Design addressed :) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 19. Problems that Responsive Design exposed :( Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 20. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 21. Asset Management Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 22. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 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. “ Development usually starts when a designer gets smacked across the face. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 25. Where are we going? Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 26. What does responsive design really target? Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 27. Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 28. Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 29. Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 30. Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 31. Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 32. Breaking free from the static environment. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 33. Web Mobile Web Responsive Design Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 34. Web Mobile Web Responsive Design Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 35. Web Mobile Web Responsive Design Environmental Design Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 36. Environmental Design Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 37. Environmental Design, 2 main principles Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 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. The Device API & Boot2Gecko (aka the Web API) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 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. Idle API navigator.addIdleObserver({        time        :  4  /*  in  seconds  */,        onidle    :  function  ()  {  ...  },        onactive:  function  ()  {  ...  } }); Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 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. Idle API navigator.addIdleObserver({        time        :  4  /*  in  seconds  */,        onidle    :  function  ()  {  ...  },        onactive:  function  ()  {  ...  } }); Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 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. Ambient Light Sensor API window.addEventListener(‘devicelight’,  function(e)  {        //  function },  true); Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 46. Ambient Light Sensor API window.addEventListener(‘devicelight’,  function(e)  {        //  function },  true); Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 47. Proximity Sensor API window.addEventListener(‘deviceproximity’,  function(e)  {          //  function },  true); Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 48. Proximity Sensor API window.addEventListener(‘deviceproximity’,  function(e)  {          //  function },  true); Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 49. Connection & Battery Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 50. Network Connection API navigator.mozConnection bandwidth (in mbs) metered (true/false) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 51. Network Connection API if(  navigator.mozConnection.bandwidth  >=  3  ){  ...  } Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 52. Network Connection API if(  navigator.mozConnection.bandwidth  >=  3  ){  ...  } Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 53. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 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. Battery Status API if(  navigator.battery.level  >  .25  ){  ...  } Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 56. <noscript> Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 57. The browser is weird, and that’s OK. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 58. What do we need to get there? Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 59. The Manage Library github.com / timwright12 / js-asset-management Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 60. if( Manage.connection === “good” ) { ... } Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 61. if( Manage.connection === “good” ) { ... } if( Manage.battery === “good” ) { ... } Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 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. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 64. CREEPY! Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 65. Blah, blah, blah Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 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. 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. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 69. A Fresh Tilled Podcast. Web: freshtilledsoil.com/thedirt Twitter: @thedirtshow @freshtilledsoil Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 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. Questions or Comments? Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
  • 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

×