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