• Save
Environmental Design Vol. 2
Upcoming SlideShare
Loading in...5
×
 

Environmental Design Vol. 2

on

  • 906 views

 

Statistics

Views

Total Views
906
Slideshare-icon Views on SlideShare
906
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Environmental Design Vol. 2 Environmental Design Vol. 2 Presentation Transcript

    • Environmental Design on the Web. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • 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
    • Fresh Tilled Soil is UX/UI Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • 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
    • 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 Wright, @csskarmaThursday, December 13, 12
    • “ 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
    • 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 Tim Wright, @csskarmaThursday, December 13, 12
    • Web Mobile Web Responsive Design Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • Web Mobile Web Responsive Design Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • Problems that Responsive Design addressed :) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • Problems that Responsive Design exposed :( Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • 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”  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
    • “ Development usually starts when a designer gets smacked across the face. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • 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 13, 12
    • Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • Breaking free from the static environment. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • Web Mobile Web Responsive Design Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • Web Mobile Web Responsive Design Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • Web Mobile Web Responsive Design Environmental Design Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • 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 project managers). Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • The Device API & Boot2Gecko (aka the Web API) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • 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
    • Idle API navigator.addIdleObserver({        time        :  4  /*  in  seconds  */,        onidle    :  function  ()  {  ...  },        onactive:  function  ()  {  ...  } }); Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • Idle API navigator.addIdleObserver({        time        :  4  /*  in  seconds  */,        onidle    :  function  ()  {  ...  },        onactive:  function  ()  {  ...  } }); Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • Idle API navigator.addIdleObserver({        time        :  4  /*  in  seconds  */,        onidle    :  function  ()  {  ...  },        onactive:  function  ()  {  ...  } }); Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • 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
    • Ambient Light Sensor API window.addEventListener(‘devicelight’,  function(e)  {        //  function },  true); Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • Ambient Light Sensor API window.addEventListener(‘devicelight’,  function(e)  {        //  function },  true); Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • Proximity Sensor API window.addEventListener(‘deviceproximity’,  function(e)  {          //  function },  true); Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • Proximity Sensor API window.addEventListener(‘deviceproximity’,  function(e)  {          //  function },  true); Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • Connection & Battery Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • Network Connection API navigator.mozConnection bandwidth (in mbs) metered (true/false) Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • Network Connection API if(  navigator.mozConnection.bandwidth  >=  3  ){  ...  } Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • Network Connection API if(  navigator.mozConnection.bandwidth  >=  3  ){  ...  } Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • 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
    • Battery Status API if(  navigator.battery.level  >  .25  ){  ...  } Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • <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 Tim Wright, @csskarmaThursday, December 13, 12
    • if( Manage.connection === “good” ) { ... } Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • if( Manage.connection === “good” ) { ... } if( Manage.battery === “good” ) { ... } Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • if( Manage.connection === “good” ) { ... } if( Manage.battery === “good” ) { ... } if( Manage.pixelRatio === “good” ) { ... } Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • 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 an environment, rather than a device Getting some help with the future. Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • 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
    • Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • A Fresh Tilled Podcast. Web: freshtilledsoil.com/thedirt Twitter: @thedirtshow @freshtilledsoil Environmental Design on the Web Tim Wright, @csskarmaThursday, December 13, 12
    • 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
    • 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/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