Environmental Design on the Web.                  Tim Wright, @csskarma
I’m Tim from Fresh Tilled Soil,              and I crafted this experience just for you.Environmental Design on the Web   ...
8 years of User Experience Design.
What we’re going over.   Where we came from.   Where we are.   Where we’re going.   What we need to get here.Environmental...
Where did we come from?Environmental Design on the Web     @csskarma
Native Apps vs. Mobile WebEnvironmental Design on the Web              @csskarma
Discoveries.Environmental Design on the Web                  @csskarma
Browsers will always be                        behind devices.Environmental Design on the Web                @csskarma
Environmental Design on the Web   @csskarma
This isn’t the WebEnvironmental Design on the Web   @csskarma
Environmental Design on the Web   @csskarma
I <3 Responsive DesignEnvironmental Design on the Web               @csskarma
Where are we?
API / Data Source           iOS                    Android       WebEnvironmental Design on the Web                       ...
Web                Mobile Web              Responsive                                        DesignEnvironmental Design on...
Problems that Responsive Design                  addressed :)Environmental Design on the Web       @csskarma
Problems that Responsive Design                   exposed :(Environmental Design on the Web       @csskarma
Environmental Design on the Web   @csskarma
Asset ManagementEnvironmental Design on the Web              @csskarma
<picture	  alt=”tired	  dogs”>       <source	  src=”small.png”>       <source	  src=”medium.png”	  media=”(min-­‐width:	  ...
Environmental Design on the Web   @csskarma
Ways to responsibly craft a user                    experienceEnvironmental Design on the Web              @csskarma
Environmental Design on the Web   @csskarma
Where are we going?
What does responsive design really                   target?Environmental Design on the Web       @csskarma
Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-)Environmental Design on the Web   @csskarma
Breaking out the the deviceEnvironmental Design on the Web      @csskarma
Environmental Design, 2 main principles     1. The real world exists.     2. You can’t control it (not even project manage...
The WebAPI & Boot2GeckoEnvironmental Design on the Web           @csskarma
API                    Desktop    Android FF   B2G           Idle                     Yes         Yes        Yes      Vibr...
Idle API         navigator.addIdleObserver({         	  	  	  	  time:	  4	  (in	  seconds),         	  	  	  	  onidle:	 ...
Vibration API                                               interval                navigator.vibrate([50,	  100,	  150]);...
Ambient Light Sensor API  window.addEventListener(‘devicelight’,	  function(e)	  {  	  	  	  	  console.log(e.value);  },	...
Proximity Sensor API window.addEventListener(‘deviceproximity’,	  function(e)	  { 	  	  	  if	  (e.value	  >	  e.min	  &&	...
Focus: Battery & ConnectionEnvironmental Design on the Web              @csskarma
navigator.battery. charging	  (true/false) chargingTime	  (seconds) dischargingTime	  (seconds) level	  (0-­‐10) Events ch...
<noscript>Environmental Design on the Web                @csskarma
Embracing chaos in the browser.Environmental Design on the Web        @csskarma
What do we need to get there?
Environmental Design on the Web   @csskarma
CREEPY!
Blah, blah, blahEnvironmental Design on the Web                      @csskarma
Environmental Design on the Web   @csskarma
AlwaysRememberUserExperience
credit.com/blog                                  useful ads? what?Environmental Design on the Web                       @c...
What we went over.   Journey from mobile to responsive.   Responsive problems & solutions.   Responding to an environment....
Where to find more information.   w3.org/2006/webapi   mozilla.org/b2g   wiki.mozilla.org/WebAPI   dougturner.wordpress.com...
Environmental Design on the Web   @csskarma
A Fresh Tilled Podcast.   Web:   freshtilledsoil.com/thedirt   Twitter:   @thedirtshow   @freshtilledsoilEnvironmental Des...
I wrote a book.   Amazon   Barnes & Noble   Safari Books      ...most places, really.   informIT.com   WRIGHT2740Environme...
Questions or Comments?Environmental Design on the Web             @csskarma
Contact ‘n’ Stuff.   E-mail: tim.wright@freshtilledsoil.com   Twitter: @csskarma   Slides: csskarma.com/enviro-design   Gen...
Upcoming SlideShare
Loading in …5
×

Environmental Design on The Web

4,201 views
3,746 views

Published on

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

No Downloads
Views
Total views
4,201
On SlideShare
0
From Embeds
0
Number of Embeds
149
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Environmental Design on The Web

  1. Environmental Design on the Web. Tim Wright, @csskarma
  2. I’m Tim from Fresh Tilled Soil, and I crafted this experience just for you.Environmental Design on the Web @csskarma
  3. 8 years of User Experience Design.
  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 @csskarma
  5. Where did we come from?Environmental Design on the Web @csskarma
  6. Native Apps vs. Mobile WebEnvironmental Design on the Web @csskarma
  7. Discoveries.Environmental Design on the Web @csskarma
  8. Browsers will always be behind devices.Environmental Design on the Web @csskarma
  9. Environmental Design on the Web @csskarma
  10. This isn’t the WebEnvironmental Design on the Web @csskarma
  11. Environmental Design on the Web @csskarma
  12. I <3 Responsive DesignEnvironmental Design on the Web @csskarma
  13. Where are we?
  14. API / Data Source iOS Android WebEnvironmental Design on the Web @csskarma
  15. Web Mobile Web Responsive DesignEnvironmental Design on the Web @csskarma
  16. Problems that Responsive Design addressed :)Environmental Design on the Web @csskarma
  17. Problems that Responsive Design exposed :(Environmental Design on the Web @csskarma
  18. Environmental Design on the Web @csskarma
  19. Asset ManagementEnvironmental Design on the Web @csskarma
  20. <picture  alt=”tired  dogs”> <source  src=”small.png”> <source  src=”medium.png”  media=”(min-­‐width:  400px)”> <source  src=”large.png”  media=”(min-­‐width:  800px)”> <img  src=”small.png”  alt=”tired  dogs”>   </picture>Environmental Design on the Web @csskarma
  21. Environmental Design on the Web @csskarma
  22. Ways to responsibly craft a user experienceEnvironmental Design on the Web @csskarma
  23. Environmental Design on the Web @csskarma
  24. Where are we going?
  25. What does responsive design really target?Environmental Design on the Web @csskarma
  26. Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-)Environmental Design on the Web @csskarma
  27. Breaking out the the deviceEnvironmental Design on the Web @csskarma
  28. 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 @csskarma
  29. The WebAPI & Boot2GeckoEnvironmental Design on the Web @csskarma
  30. 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 @csskarma
  31. Idle API navigator.addIdleObserver({        time:  4  (in  seconds),        onidle:  function  ()  {                //  you  are  boring        },        onactive:  function  ()  {                //  you  are  awesome  again!        } });Environmental Design on the Web @csskarma
  32. Vibration API interval navigator.vibrate([50,  100,  150]); vibration #1 length (ms) vibration #2 lengthEnvironmental Design on the Web @csskarma
  33. Ambient Light Sensor API window.addEventListener(‘devicelight’,  function(e)  {        console.log(e.value); },  true);Environmental Design on the Web @csskarma
  34. Proximity Sensor API window.addEventListener(‘deviceproximity’,  function(e)  {      if  (e.value  >  e.min  &&  e.value  <  e.max)  {                    alert(‘object  is  ‘  +  e.value  +  ’cm  away!’);            } },  true);Environmental Design on the Web @csskarma
  35. Focus: Battery & ConnectionEnvironmental Design on the Web @csskarma
  36. navigator.battery. charging  (true/false) chargingTime  (seconds) dischargingTime  (seconds) level  (0-­‐10) Events chargingchange chargingtimechange dischargingchangechange levelchangeEnvironmental Design on the Web @csskarma
  37. <noscript>Environmental Design on the Web @csskarma
  38. Embracing chaos in the browser.Environmental Design on the Web @csskarma
  39. What do we need to get there?
  40. Environmental Design on the Web @csskarma
  41. CREEPY!
  42. Blah, blah, blahEnvironmental Design on the Web @csskarma
  43. Environmental Design on the Web @csskarma
  44. AlwaysRememberUserExperience
  45. credit.com/blog useful ads? what?Environmental Design on the Web @csskarma
  46. What we went over. Journey from mobile to responsive. Responsive problems & solutions. Responding to an environment. Getting some help with the future.Environmental Design on the Web @csskarma
  47. 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 @csskarma
  48. Environmental Design on the Web @csskarma
  49. A Fresh Tilled Podcast. Web: freshtilledsoil.com/thedirt Twitter: @thedirtshow @freshtilledsoilEnvironmental Design on the Web @csskarma
  50. I wrote a book. Amazon Barnes & Noble Safari Books ...most places, really. informIT.com WRIGHT2740Environmental Design on the Web @csskarma
  51. Questions or Comments?Environmental Design on the Web @csskarma
  52. Contact ‘n’ Stuff. E-mail: tim.wright@freshtilledsoil.com Twitter: @csskarma Slides: csskarma.com/enviro-design General awesomeness: freshtilledsoil.com/blog Credits. Font: Helvetica Neue Vectors: The Noun ProjectEnvironmental Design on the Web @csskarma

×