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 forward with Env. Design

Crafting UXfrom mobile to responsive design

Environmental Designis NOT ...

“Responsive Design +”

Environmental Design

MobileResponsiveDesign

Length of word/phrase

Buzz

wor

thin

ess

“mobile”

“responsive design”

“environmental design”

“dog”

Mobile ->

Not the web.

Mobile ->

<-RWD

Problems solved

Challenges exposed

THE COMMUNITY RESPONDS!

Picture!ll<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>

Mobile ->

<-RWD

EnvironmentalDesign

Environmental Designbreaking free from the browser

Env. Design Principles• The real world exists.

• You can’t control it.

Static vs. Dynamic Design Conditions

dowebsitesneedtolookexactlythesameineverybrowser.com

Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-)

Boot2Gecko

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 Information (W3C) No plans Yes Not yet

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

navigator.vibrate([50,  100,  150]);

interval

vibration #1 length (ms) vibration #2 length

Moving forwardhow we can push the limits

A"ecting Design?

The Manage Library

github.com / timwright12 / js-asset-management

if( Manage.connection === “good” ) { ... }

if( Manage.battery === “good” ) { ... }

if( Manage.pixelRatio === “good” ) { ... }

The Manage Library

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 forward with Env. Design

More Information• w3.org/2006/webapi

• mozilla.org/b2g

• arewemobileyet.com

• http://alistapart.com/article/environmental-design-with-the-device-api

• console.log(navigator);

Fresh Tilled Labs• HTML & CSS

• JavaScript

• Responsive Design

• Prototyping in Fireworks

• UX & Product Design

• Typography & Grids

• Mobile Web Mastery

Fresh Tilled PodcastWeb:freshtilledsoil.com/thedirt

Twitter:@thedirtshow@freshtilledsoil

Learning JavaScriptAmazonBarnes & NobleSafari Books ...most places, really.

informIT.comWRIGHT2740

Questions / Comments?

@csskarma