Bringing Environmental Design to the Web
Upcoming SlideShare
Loading in...5
×
 

Bringing Environmental Design to the Web

on

  • 3,627 views

Visit freshtilledsoil.com for more information!

Visit freshtilledsoil.com for more information!

Statistics

Views

Total Views
3,627
Views on SlideShare
3,601
Embed Views
26

Actions

Likes
8
Downloads
15
Comments
0

5 Embeds 26

https://twitter.com 20
http://pinterest.com 2
http://www.pinterest.com 2
http://www.onlydoo.com 1
https://abs.twimg.com 1

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

Bringing Environmental Design to the Web Bringing Environmental Design to the Web Presentation Transcript

  • 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. DynamicDesign 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 YesAmbient Light (W3C) No plans Yes Yes Proximity (W3C) No plans Yes Yes Battery (W3C) Yes Yes YesMobile Connection No plans No plans Yes Network No plans Yes Not yetInformation (W3C)
  • 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 intervalnavigator.vibrate([50,  100,  150]); vibration #1 length (ms) vibration #2 length
  • Moving how we can push the limits forward
  • Affecting Design?
  • The Manage Librarygithub.com / timwright12 / js-asset-management
  • The Manage Libraryif( 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 PodcastWeb:freshtilledsoil.com/thedirtTwitter:@thedirtshow@freshtilledsoil
  • Learning JavaScriptAmazonBarnes & NobleSafari Books ...most places, really.informIT.comWRIGHT2740
  • Questions / Comments?
  • @csskarma