Bringing Environmental Design to the Web
-
Upload
tim-wright -
Category
Technology
-
view
105 -
download
1
description
Transcript of Bringing Environmental Design to the Web
![Page 1: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/1.jpg)
Bringing Environmental esign to the Web
![Page 2: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/2.jpg)
Hi, I’m Tim from Fresh Tilled Soil,and I crafted this experience just for you.
![Page 3: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/3.jpg)
Fresh Tilled Soil is UI/UX.
![Page 4: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/4.jpg)
WTF is Experience Design?
![Page 5: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/5.jpg)
WTF is Environmental Design?
![Page 6: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/6.jpg)
![Page 7: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/7.jpg)
What we’re going over
• How we build experiences from Mobile to RWD
• Env. Design principles & implementation
• Moving forward with Env. Design
![Page 8: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/8.jpg)
Crafting UXfrom mobile to responsive design
![Page 9: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/9.jpg)
Environmental Designis NOT ...
“Responsive Design +”
![Page 10: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/10.jpg)
Environmental Design
MobileResponsiveDesign
![Page 11: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/11.jpg)
Length of word/phrase
Buzz
wor
thin
ess
“mobile”
“responsive design”
“environmental design”
“dog”
![Page 12: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/12.jpg)
Mobile ->
![Page 13: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/13.jpg)
Not the web.
![Page 14: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/14.jpg)
![Page 15: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/15.jpg)
![Page 16: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/16.jpg)
Mobile ->
<-RWD
![Page 17: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/17.jpg)
Problems solved
![Page 18: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/18.jpg)
Challenges exposed
![Page 19: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/19.jpg)
THE COMMUNITY RESPONDS!
![Page 20: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/20.jpg)
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>
![Page 21: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/21.jpg)
![Page 22: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/22.jpg)
Mobile ->
<-RWD
EnvironmentalDesign
![Page 23: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/23.jpg)
Environmental Designbreaking free from the browser
![Page 24: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/24.jpg)
Env. Design Principles• The real world exists.
• You can’t control it.
![Page 25: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/25.jpg)
Static vs. Dynamic Design Conditions
![Page 26: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/26.jpg)
dowebsitesneedtolookexactlythesameineverybrowser.com
![Page 27: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/27.jpg)
Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-)
![Page 28: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/28.jpg)
![Page 29: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/29.jpg)
Boot2Gecko
![Page 30: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/30.jpg)
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
![Page 31: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/31.jpg)
![Page 32: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/32.jpg)
Bandwidthif( navigator.mozConnection.bandwidth >= 3 ){ ... }
![Page 33: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/33.jpg)
![Page 34: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/34.jpg)
Batteryif( navigator.battery.level > .25 ){ ... }
![Page 35: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/35.jpg)
Illustration by: Kevin Cornell & A List Apart
![Page 36: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/36.jpg)
Ambient Lightwindow.addEventListener(‘devicelight’, function(e) {
// function
}, true);
![Page 37: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/37.jpg)
Vibrate
navigator.vibrate([50, 100, 150]);
interval
vibration #1 length (ms) vibration #2 length
![Page 38: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/38.jpg)
Moving forwardhow we can push the limits
![Page 39: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/39.jpg)
A"ecting Design?
![Page 40: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/40.jpg)
The Manage Library
github.com / timwright12 / js-asset-management
![Page 41: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/41.jpg)
if( Manage.connection === “good” ) { ... }
if( Manage.battery === “good” ) { ... }
if( Manage.pixelRatio === “good” ) { ... }
The Manage Library
![Page 42: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/42.jpg)
![Page 43: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/43.jpg)
CREEPY!
![Page 44: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/44.jpg)
Dear Tim, You’re kind of an asshole.
Sincerely,The HTML5 Meetup
![Page 45: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/45.jpg)
What we just went over.• How we craft experiences from Mobile to RWD
• Env. Design principles & implementation
• Moving forward with Env. Design
![Page 46: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/46.jpg)
More Information• w3.org/2006/webapi
• mozilla.org/b2g
• arewemobileyet.com
• http://alistapart.com/article/environmental-design-with-the-device-api
• console.log(navigator);
![Page 47: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/47.jpg)
![Page 48: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/48.jpg)
Fresh Tilled Labs• HTML & CSS
• JavaScript
• Responsive Design
• Prototyping in Fireworks
• UX & Product Design
• Typography & Grids
• Mobile Web Mastery
![Page 49: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/49.jpg)
Fresh Tilled PodcastWeb:freshtilledsoil.com/thedirt
Twitter:@thedirtshow@freshtilledsoil
![Page 50: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/50.jpg)
Learning JavaScriptAmazonBarnes & NobleSafari Books ...most places, really.
informIT.comWRIGHT2740
![Page 51: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/51.jpg)
Questions / Comments?
![Page 52: Bringing Environmental Design to the Web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c90f874a7959ce2e8b45bb/html5/thumbnails/52.jpg)
@csskarma