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 from mobile to responsive design
UX

Environmental Design
is NOT ...
“Responsive Design +”

Environmental Design
Responsive
Mobile
Design

“mobile”
“responsive design”
Buzzworthiness
“environmental design”
“dog”
Length of word/phrase

Mobile ->

Not the web.

Mobile ->
<-RWD

Problems solved

Challenges exposed

THE COMMUNITY
RESPONDS!

Picturefill
<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
Environmental
Design

Environmental Design
breaking free from the browser

Env. Design Principles
• The real world exists.
• You can’t control it.

Static vs. Dynamic
Design Conditions

dowebsitesneedtolookexactlythesameineverybrowser.com

Aspect ratio
Height/Width
Orientation
Resolution (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
No plans Yes Not yet
Information (W3C)

Bandwidth
if(
navigator.mozConnection.bandwidth
>=
3
){
...
}

Battery
if(
navigator.battery.level
>
.25
){
...
}

Illustration
by:
Kevin
Cornell
&
A
List
Apart

Ambient Light
window.addEventListener(‘devicelight’,
function(e)
{
//
function
},
true);

Vibrate
interval
navigator.vibrate([50,
100,
150]);
vibration #1 length (ms) vibration #2 length

Moving how we can push the limits
forward

Affecting Design?

The Manage Library
github.com / timwright12 / js-asset-management

The Manage Library
if( Manage.connection === “good” ) { ... }
if( Manage.battery === “good” ) { ... }
if( Manage.pixelRatio === “good” ) { ... }

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 Podcast
Web:
freshtilledsoil.com/thedirt
Twitter:
@thedirtshow
@freshtilledsoil

Learning JavaScript
Amazon
Barnes & Noble
Safari Books
...most places, really.
informIT.com
WRIGHT2740

Questions / Comments?

@csskarma