SlideShare a Scribd company logo
1 of 72
Environmental Design
                            on the Web.




   Environmental Design on the Web        Tim Wright, @csskarma

Thursday, December 13, 12
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
Fresh Tilled Soil is UX/UI




   Environmental Design on the Web                   Tim Wright, @csskarma

Thursday, December 13, 12
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
Where did we come from?




   Environmental Design on the Web                    @csskarma

Thursday, December 13, 12
Native Apps vs. Mobile Web




   Environmental Design on the Web                 Tim Wright, @csskarma

Thursday, December 13, 12
Discoveries.




   Environmental Design on the Web                  Tim Wright, @csskarma

Thursday, December 13, 12
Browsers will always be
                               behind devices.




   Environmental Design on the Web                Tim Wright, @csskarma

Thursday, December 13, 12
“
                            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
Not the web.




   Environmental Design on the Web                  Tim Wright, @csskarma

Thursday, December 13, 12
Environmental Design on the Web   Tim Wright, @csskarma

Thursday, December 13, 12
Environmental Design on the Web   Tim Wright, @csskarma

Thursday, December 13, 12
I
                            RWD
   Environmental Design on the Web   Tim Wright, @csskarma

Thursday, December 13, 12
Where are we?




Thursday, December 13, 12
API / Data Source



                    iOS              Android       Web




   Environmental Design on the Web                 Tim Wright, @csskarma

Thursday, December 13, 12
Web


                            Mobile Web         Responsive
                                               Design



   Environmental Design on the Web                   Tim Wright, @csskarma

Thursday, December 13, 12
Web


                            Mobile Web         Responsive
                                               Design



   Environmental Design on the Web                   Tim Wright, @csskarma

Thursday, December 13, 12
Problems that Responsive Design
                           addressed :)




   Environmental Design on the Web         Tim Wright, @csskarma

Thursday, December 13, 12
Problems that Responsive Design
                            exposed :(




   Environmental Design on the Web         Tim Wright, @csskarma

Thursday, December 13, 12
Environmental Design on the Web   Tim Wright, @csskarma

Thursday, December 13, 12
Asset Management




   Environmental Design on the Web              Tim Wright, @csskarma

Thursday, December 13, 12
Environmental Design on the Web   Tim Wright, @csskarma

Thursday, December 13, 12
<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
“                       Development usually
                            starts when a
                            designer gets
                            smacked across the
                            face.
   Environmental Design on the Web        Tim Wright, @csskarma

Thursday, December 13, 12
Where are we going?




   Environmental Design on the Web                Tim Wright, @csskarma

Thursday, December 13, 12
What does responsive design really target?




   Environmental Design on the Web      Tim Wright, @csskarma

Thursday, December 13, 12
Aspect ratio
    Height/Width
    Orientation
    Resolution (dpi)
    Touch enabled (-moz-)



   Environmental Design on the Web   Tim Wright, @csskarma

Thursday, December 13, 12
Aspect ratio
    Height/Width
    Orientation
    Resolution (dpi)
    Touch enabled (-moz-)



   Environmental Design on the Web   Tim Wright, @csskarma

Thursday, December 13, 12
Aspect ratio
    Height/Width
    Orientation
    Resolution (dpi)
    Touch enabled (-moz-)



   Environmental Design on the Web   Tim Wright, @csskarma

Thursday, December 13, 12
Aspect ratio
    Height/Width
    Orientation
    Resolution (dpi)
    Touch enabled (-moz-)



   Environmental Design on the Web   Tim Wright, @csskarma

Thursday, December 13, 12
Aspect ratio
    Height/Width
    Orientation
    Resolution (dpi)
    Touch enabled (-moz-)



   Environmental Design on the Web   Tim Wright, @csskarma

Thursday, December 13, 12
Breaking free from the static environment.




   Environmental Design on the Web       Tim Wright, @csskarma

Thursday, December 13, 12
Web


                            Mobile Web         Responsive
                                               Design




   Environmental Design on the Web                   Tim Wright, @csskarma

Thursday, December 13, 12
Web


                            Mobile Web         Responsive
                                               Design




   Environmental Design on the Web                   Tim Wright, @csskarma

Thursday, December 13, 12
Web


                            Mobile Web              Responsive
                                                    Design



                                     Environmental Design

   Environmental Design on the Web                          Tim Wright, @csskarma

Thursday, December 13, 12
Environmental Design




   Environmental Design on the Web   Tim Wright, @csskarma

Thursday, December 13, 12
Environmental Design, 2 main principles




   Environmental Design on the Web   Tim Wright, @csskarma

Thursday, December 13, 12
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
The Device API & Boot2Gecko
                                     (aka the Web API)




   Environmental Design on the Web                       Tim Wright, @csskarma

Thursday, December 13, 12
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
Idle API


                            navigator.addIdleObserver({

                            	
  	
  	
  	
  time	
  	
  	
  	
  :	
  4	
  /*	
  in	
  seconds	
  */,
                            	
  	
  	
  	
  onidle	
  	
  :	
  function	
  ()	
  {	
  ...	
  },
                            	
  	
  	
  	
  onactive:	
  function	
  ()	
  {	
  ...	
  }

                            });




   Environmental Design on the Web                                                                     Tim Wright, @csskarma

Thursday, December 13, 12
Idle API


                            navigator.addIdleObserver({

                            	
  	
  	
  	
  time	
  	
  	
  	
  :	
  4	
  /*	
  in	
  seconds	
  */,
                            	
  	
  	
  	
  onidle	
  	
  :	
  function	
  ()	
  {	
  ...	
  },
                            	
  	
  	
  	
  onactive:	
  function	
  ()	
  {	
  ...	
  }

                            });




   Environmental Design on the Web                                                                     Tim Wright, @csskarma

Thursday, December 13, 12
Idle API


                            navigator.addIdleObserver({

                            	
  	
  	
  	
  time	
  	
  	
  	
  :	
  4	
  /*	
  in	
  seconds	
  */,
                            	
  	
  	
  	
  onidle	
  	
  :	
  function	
  ()	
  {	
  ...	
  },
                            	
  	
  	
  	
  onactive:	
  function	
  ()	
  {	
  ...	
  }

                            });




   Environmental Design on the Web                                                                     Tim Wright, @csskarma

Thursday, December 13, 12
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
Ambient Light Sensor API



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




   Environmental Design on the Web                 Tim Wright, @csskarma

Thursday, December 13, 12
Ambient Light Sensor API



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




   Environmental Design on the Web                 Tim Wright, @csskarma

Thursday, December 13, 12
Proximity Sensor API



  window.addEventListener(‘deviceproximity’,	
  function(e)	
  {
  	
  	
  	
  	
  	
  //	
  function
  },	
  true);




   Environmental Design on the Web                Tim Wright, @csskarma

Thursday, December 13, 12
Proximity Sensor API



  window.addEventListener(‘deviceproximity’,	
  function(e)	
  {
  	
  	
  	
  	
  	
  //	
  function
  },	
  true);




   Environmental Design on the Web                Tim Wright, @csskarma

Thursday, December 13, 12
Connection & Battery




   Environmental Design on the Web                 Tim Wright, @csskarma

Thursday, December 13, 12
Network Connection API

         navigator.mozConnection



         bandwidth (in mbs)
         metered (true/false)




   Environmental Design on the Web   Tim Wright, @csskarma

Thursday, December 13, 12
Network Connection API



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




   Environmental Design on the Web                              Tim Wright, @csskarma

Thursday, December 13, 12
Network Connection API



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




   Environmental Design on the Web                              Tim Wright, @csskarma

Thursday, December 13, 12
Environmental Design on the Web   Tim Wright, @csskarma

Thursday, December 13, 12
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
Battery Status API



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




   Environmental Design on the Web                                        Tim Wright, @csskarma

Thursday, December 13, 12
<noscript>




   Environmental Design on the Web                Tim Wright, @csskarma

Thursday, December 13, 12
The browser is weird, and that’s OK.
   Environmental Design on the Web      Tim Wright, @csskarma

Thursday, December 13, 12
What do we need to get there?




   Environmental Design on the Web              Tim Wright, @csskarma

Thursday, December 13, 12
The Manage Library

           github.com / timwright12 / js-asset-management




   Environmental Design on the Web                Tim Wright, @csskarma

Thursday, December 13, 12
if( Manage.connection === “good” ) { ... }




   Environmental Design on the Web                    Tim Wright, @csskarma

Thursday, December 13, 12
if( Manage.connection === “good” ) { ... }



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




   Environmental Design on the Web                    Tim Wright, @csskarma

Thursday, December 13, 12
if( Manage.connection === “good” ) { ... }



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



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




   Environmental Design on the Web                    Tim Wright, @csskarma

Thursday, December 13, 12
Environmental Design on the Web   Tim Wright, @csskarma

Thursday, December 13, 12
CREEPY!

   Environmental Design on the Web   Tim Wright, @csskarma

Thursday, December 13, 12
Blah, blah, blah




   Environmental Design on the Web                      Tim Wright, @csskarma

Thursday, December 13, 12
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
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
Environmental Design on the Web   Tim Wright, @csskarma

Thursday, December 13, 12
A Fresh Tilled Podcast.
        Web:
        freshtilledsoil.com/thedirt


        Twitter:
        @thedirtshow
        @freshtilledsoil




   Environmental Design on the Web    Tim Wright, @csskarma

Thursday, December 13, 12
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
Questions or Comments?




   Environmental Design on the Web               Tim Wright, @csskarma

Thursday, December 13, 12
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

More Related Content

Viewers also liked

Emotional design & Design for emotion
Emotional design & Design for emotion Emotional design & Design for emotion
Emotional design & Design for emotion Ftma hndy
 
Universal Design Guide for Inclusive Tourism by Scott and Sarah Pruett
Universal Design Guide for Inclusive Tourism by Scott and Sarah PruettUniversal Design Guide for Inclusive Tourism by Scott and Sarah Pruett
Universal Design Guide for Inclusive Tourism by Scott and Sarah PruettScott Rains
 
Cultural Impact on Digital Design
Cultural Impact on Digital DesignCultural Impact on Digital Design
Cultural Impact on Digital DesignCritical Mass
 
أسس تصميم المطارات 2 - مطار ريغا الدولي
أسس تصميم المطارات 2 - مطار ريغا الدوليأسس تصميم المطارات 2 - مطار ريغا الدولي
أسس تصميم المطارات 2 - مطار ريغا الدوليMais Algendy
 
Universal Design, Accessibility, and the Typing Experience
Universal Design, Accessibility, and the Typing ExperienceUniversal Design, Accessibility, and the Typing Experience
Universal Design, Accessibility, and the Typing ExperienceUXAndrew
 
Evolution of Codesign in Aotearoa
Evolution of Codesign in AotearoaEvolution of Codesign in Aotearoa
Evolution of Codesign in AotearoaPenny Hagen
 
أسس تصميم المطارات 1
أسس تصميم المطارات  1أسس تصميم المطارات  1
أسس تصميم المطارات 1Mais Algendy
 
Universal Design: The Seven Principles
Universal Design: The Seven PrinciplesUniversal Design: The Seven Principles
Universal Design: The Seven PrinciplesScott Rains
 
Universal Design (w/ architectural examples)
Universal Design (w/ architectural examples)Universal Design (w/ architectural examples)
Universal Design (w/ architectural examples)Teaching Universal Design
 

Viewers also liked (11)

Vintage postcard design
Vintage postcard designVintage postcard design
Vintage postcard design
 
Emotional design & Design for emotion
Emotional design & Design for emotion Emotional design & Design for emotion
Emotional design & Design for emotion
 
Spirtual meaning
Spirtual meaning  Spirtual meaning
Spirtual meaning
 
Universal Design Guide for Inclusive Tourism by Scott and Sarah Pruett
Universal Design Guide for Inclusive Tourism by Scott and Sarah PruettUniversal Design Guide for Inclusive Tourism by Scott and Sarah Pruett
Universal Design Guide for Inclusive Tourism by Scott and Sarah Pruett
 
Cultural Impact on Digital Design
Cultural Impact on Digital DesignCultural Impact on Digital Design
Cultural Impact on Digital Design
 
أسس تصميم المطارات 2 - مطار ريغا الدولي
أسس تصميم المطارات 2 - مطار ريغا الدوليأسس تصميم المطارات 2 - مطار ريغا الدولي
أسس تصميم المطارات 2 - مطار ريغا الدولي
 
Universal Design, Accessibility, and the Typing Experience
Universal Design, Accessibility, and the Typing ExperienceUniversal Design, Accessibility, and the Typing Experience
Universal Design, Accessibility, and the Typing Experience
 
Evolution of Codesign in Aotearoa
Evolution of Codesign in AotearoaEvolution of Codesign in Aotearoa
Evolution of Codesign in Aotearoa
 
أسس تصميم المطارات 1
أسس تصميم المطارات  1أسس تصميم المطارات  1
أسس تصميم المطارات 1
 
Universal Design: The Seven Principles
Universal Design: The Seven PrinciplesUniversal Design: The Seven Principles
Universal Design: The Seven Principles
 
Universal Design (w/ architectural examples)
Universal Design (w/ architectural examples)Universal Design (w/ architectural examples)
Universal Design (w/ architectural examples)
 

Similar to Environmental Design Vol. 2

Augmented Reality with JavaScript and Appcelerator Titanium
Augmented Reality with JavaScript and Appcelerator TitaniumAugmented Reality with JavaScript and Appcelerator Titanium
Augmented Reality with JavaScript and Appcelerator TitaniumJeff Bonnes
 
Welcome to the RIAworld
Welcome to the RIAworldWelcome to the RIAworld
Welcome to the RIAworldSergio Brito
 
Responsive web design standards?
Responsive web design standards?Responsive web design standards?
Responsive web design standards?Chris Mills
 
Web Performance & You
Web Performance & YouWeb Performance & You
Web Performance & YouDave Olsen
 
Design process
Design processDesign process
Design processTim Wright
 
Responsive Web Design &amp; Workflow
Responsive Web Design &amp; WorkflowResponsive Web Design &amp; Workflow
Responsive Web Design &amp; Workflowhouhr
 
Arnaud Porterie - The Truth About C++
Arnaud Porterie - The Truth About C++Arnaud Porterie - The Truth About C++
Arnaud Porterie - The Truth About C++Arnaud Porterie
 
NCDevCon2012_designing the mobile experience
NCDevCon2012_designing the mobile experienceNCDevCon2012_designing the mobile experience
NCDevCon2012_designing the mobile experienceDee Sadler
 
component: ruby gems for the browser
component: ruby gems for the browsercomponent: ruby gems for the browser
component: ruby gems for the browserTimothy Oxley
 
Tech Tools for Meeting Professionals
Tech Tools for Meeting ProfessionalsTech Tools for Meeting Professionals
Tech Tools for Meeting ProfessionalsMidori Connolly
 
How to design for the web
How to design for the webHow to design for the web
How to design for the webCyber-Duck
 
SassConf: It takes a village to raise a stylesheet
SassConf: It takes a village to raise a stylesheetSassConf: It takes a village to raise a stylesheet
SassConf: It takes a village to raise a stylesheetchriseppstein
 
UX Research by Cipta Pratama
UX Research by Cipta PratamaUX Research by Cipta Pratama
UX Research by Cipta PratamaCipta Pratama
 
Building a Single-Page App: Backbone, Node.js, and Beyond
Building a Single-Page App: Backbone, Node.js, and BeyondBuilding a Single-Page App: Backbone, Node.js, and Beyond
Building a Single-Page App: Backbone, Node.js, and BeyondSpike Brehm
 
Continuous Delivery at Netflix
Continuous Delivery at NetflixContinuous Delivery at Netflix
Continuous Delivery at NetflixRob Spieldenner
 
DDS Web Programming with dscript
DDS Web Programming with dscriptDDS Web Programming with dscript
DDS Web Programming with dscriptAngelo Corsaro
 
Replacing Wordpress with Cascade Server (where possible) by Mike Roy
Replacing Wordpress with Cascade Server (where possible) by Mike RoyReplacing Wordpress with Cascade Server (where possible) by Mike Roy
Replacing Wordpress with Cascade Server (where possible) by Mike Royhannonhill
 
Cloud Messaging With Cloud Foundry
Cloud Messaging With Cloud FoundryCloud Messaging With Cloud Foundry
Cloud Messaging With Cloud FoundryAlvaro Videla
 
Approaching real-time-hadoop
Approaching real-time-hadoopApproaching real-time-hadoop
Approaching real-time-hadoopChris Huang
 

Similar to Environmental Design Vol. 2 (20)

Augmented Reality with JavaScript and Appcelerator Titanium
Augmented Reality with JavaScript and Appcelerator TitaniumAugmented Reality with JavaScript and Appcelerator Titanium
Augmented Reality with JavaScript and Appcelerator Titanium
 
Welcome to the RIAworld
Welcome to the RIAworldWelcome to the RIAworld
Welcome to the RIAworld
 
Responsive web design standards?
Responsive web design standards?Responsive web design standards?
Responsive web design standards?
 
Web Performance & You
Web Performance & YouWeb Performance & You
Web Performance & You
 
Design process
Design processDesign process
Design process
 
Responsive Web Design &amp; Workflow
Responsive Web Design &amp; WorkflowResponsive Web Design &amp; Workflow
Responsive Web Design &amp; Workflow
 
Arnaud Porterie - The Truth About C++
Arnaud Porterie - The Truth About C++Arnaud Porterie - The Truth About C++
Arnaud Porterie - The Truth About C++
 
NCDevCon2012_designing the mobile experience
NCDevCon2012_designing the mobile experienceNCDevCon2012_designing the mobile experience
NCDevCon2012_designing the mobile experience
 
component: ruby gems for the browser
component: ruby gems for the browsercomponent: ruby gems for the browser
component: ruby gems for the browser
 
Tech Tools for Meeting Professionals
Tech Tools for Meeting ProfessionalsTech Tools for Meeting Professionals
Tech Tools for Meeting Professionals
 
How to design for the web
How to design for the webHow to design for the web
How to design for the web
 
SassConf: It takes a village to raise a stylesheet
SassConf: It takes a village to raise a stylesheetSassConf: It takes a village to raise a stylesheet
SassConf: It takes a village to raise a stylesheet
 
UX Research by Cipta Pratama
UX Research by Cipta PratamaUX Research by Cipta Pratama
UX Research by Cipta Pratama
 
Building a Single-Page App: Backbone, Node.js, and Beyond
Building a Single-Page App: Backbone, Node.js, and BeyondBuilding a Single-Page App: Backbone, Node.js, and Beyond
Building a Single-Page App: Backbone, Node.js, and Beyond
 
Continuous Delivery at Netflix
Continuous Delivery at NetflixContinuous Delivery at Netflix
Continuous Delivery at Netflix
 
05 Mobile CSS
05 Mobile CSS05 Mobile CSS
05 Mobile CSS
 
DDS Web Programming with dscript
DDS Web Programming with dscriptDDS Web Programming with dscript
DDS Web Programming with dscript
 
Replacing Wordpress with Cascade Server (where possible) by Mike Roy
Replacing Wordpress with Cascade Server (where possible) by Mike RoyReplacing Wordpress with Cascade Server (where possible) by Mike Roy
Replacing Wordpress with Cascade Server (where possible) by Mike Roy
 
Cloud Messaging With Cloud Foundry
Cloud Messaging With Cloud FoundryCloud Messaging With Cloud Foundry
Cloud Messaging With Cloud Foundry
 
Approaching real-time-hadoop
Approaching real-time-hadoopApproaching real-time-hadoop
Approaching real-time-hadoop
 

More from Tim Wright

An Introduction to HTTP/2
An Introduction to HTTP/2An Introduction to HTTP/2
An Introduction to HTTP/2Tim Wright
 
Assistive Technology, Experience Design, and Life
Assistive Technology, Experience Design, and LifeAssistive Technology, Experience Design, and Life
Assistive Technology, Experience Design, and LifeTim Wright
 
Building an Atomic Design System
Building an Atomic Design SystemBuilding an Atomic Design System
Building an Atomic Design SystemTim Wright
 
Creating Contextual Applications with Maslow & The Device API
Creating Contextual Applications with Maslow & The Device APICreating Contextual Applications with Maslow & The Device API
Creating Contextual Applications with Maslow & The Device APITim Wright
 
Keys to Responsive Design
Keys to Responsive DesignKeys to Responsive Design
Keys to Responsive DesignTim Wright
 
Bringing Environmental Design to the Web
Bringing Environmental Design to the WebBringing Environmental Design to the Web
Bringing Environmental Design to the WebTim Wright
 
Color & Typography
Color & TypographyColor & Typography
Color & TypographyTim Wright
 
A Look at the Future of HTML5
A Look at the Future of HTML5A Look at the Future of HTML5
A Look at the Future of HTML5Tim Wright
 
Implementing a Scalable Mobile Strategy
Implementing a Scalable Mobile StrategyImplementing a Scalable Mobile Strategy
Implementing a Scalable Mobile StrategyTim Wright
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 
Mobile, Media & Touch
Mobile, Media & TouchMobile, Media & Touch
Mobile, Media & TouchTim Wright
 
HTML 5: The Future of the Web
HTML 5: The Future of the WebHTML 5: The Future of the Web
HTML 5: The Future of the WebTim Wright
 
Native Device vs. Mobile Web Applications
Native Device vs. Mobile Web ApplicationsNative Device vs. Mobile Web Applications
Native Device vs. Mobile Web ApplicationsTim Wright
 
Standardizing the Web: A Look into the Why of Web Standards
Standardizing the Web: A Look into the Why of Web StandardsStandardizing the Web: A Look into the Why of Web Standards
Standardizing the Web: A Look into the Why of Web StandardsTim Wright
 

More from Tim Wright (15)

An Introduction to HTTP/2
An Introduction to HTTP/2An Introduction to HTTP/2
An Introduction to HTTP/2
 
Assistive Technology, Experience Design, and Life
Assistive Technology, Experience Design, and LifeAssistive Technology, Experience Design, and Life
Assistive Technology, Experience Design, and Life
 
Building an Atomic Design System
Building an Atomic Design SystemBuilding an Atomic Design System
Building an Atomic Design System
 
Creating Contextual Applications with Maslow & The Device API
Creating Contextual Applications with Maslow & The Device APICreating Contextual Applications with Maslow & The Device API
Creating Contextual Applications with Maslow & The Device API
 
Keys to Responsive Design
Keys to Responsive DesignKeys to Responsive Design
Keys to Responsive Design
 
Bringing Environmental Design to the Web
Bringing Environmental Design to the WebBringing Environmental Design to the Web
Bringing Environmental Design to the Web
 
Form design
Form designForm design
Form design
 
Color & Typography
Color & TypographyColor & Typography
Color & Typography
 
A Look at the Future of HTML5
A Look at the Future of HTML5A Look at the Future of HTML5
A Look at the Future of HTML5
 
Implementing a Scalable Mobile Strategy
Implementing a Scalable Mobile StrategyImplementing a Scalable Mobile Strategy
Implementing a Scalable Mobile Strategy
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Mobile, Media & Touch
Mobile, Media & TouchMobile, Media & Touch
Mobile, Media & Touch
 
HTML 5: The Future of the Web
HTML 5: The Future of the WebHTML 5: The Future of the Web
HTML 5: The Future of the Web
 
Native Device vs. Mobile Web Applications
Native Device vs. Mobile Web ApplicationsNative Device vs. Mobile Web Applications
Native Device vs. Mobile Web Applications
 
Standardizing the Web: A Look into the Why of Web Standards
Standardizing the Web: A Look into the Why of Web StandardsStandardizing the Web: A Look into the Why of Web Standards
Standardizing the Web: A Look into the Why of Web Standards
 

Recently uploaded

COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 

Recently uploaded (20)

COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 

Environmental Design Vol. 2

  • 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
  • 11. Environmental Design on the Web Tim Wright, @csskarma Thursday, December 13, 12
  • 12. Environmental Design on the Web Tim Wright, @csskarma Thursday, December 13, 12
  • 13. I RWD Environmental Design on the Web Tim Wright, @csskarma Thursday, December 13, 12
  • 14. Where are we? Thursday, December 13, 12
  • 15. API / Data Source iOS Android Web Environmental Design on the Web Tim Wright, @csskarma Thursday, December 13, 12
  • 16. Web Mobile Web Responsive Design Environmental Design on the Web Tim Wright, @csskarma Thursday, December 13, 12
  • 17. Web Mobile Web Responsive Design Environmental Design on the Web Tim Wright, @csskarma Thursday, December 13, 12
  • 18. Problems that Responsive Design addressed :) Environmental Design on the Web Tim Wright, @csskarma Thursday, December 13, 12
  • 19. Problems that Responsive Design exposed :( Environmental Design on the Web Tim Wright, @csskarma Thursday, December 13, 12
  • 20. Environmental Design on the Web Tim Wright, @csskarma Thursday, December 13, 12
  • 21. Asset Management Environmental Design on the Web Tim Wright, @csskarma Thursday, December 13, 12
  • 22. 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
  • 53. 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
  • 63. 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
  • 68. 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