Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Mobile, Media & Touch
                             One guy’s opinion about CSS Media Queries & Mobile Detection




      ...
About me
                • Code	
  monkey	
  /	
  designer	
  at	
  USC
                • Blogger	
  on	
  CSSKarma
      ...
What we’ll cover
                • Current	
  state
                 • Device	
  detection	
  (up	
  &	
  downsides)
     ...
The	
  current	
  
             state	
  of	
  
            detection


Thursday, October 21, 2010
Device	
  Detection.
                                          Server-side, with PHP




Thursday, October 21, 2010
What	
  we’re	
  looking	
  for
               <?php
                echo $_SERVER['HTTP_USER_AGENT']
               ?>


...
Server-­‐side	
  detection	
  code
               <?php
               //setting the variables
               $ipod = stri...
The	
  upside
                     • Speed
                     • Support
                     • Established	
  standard

...
The	
  downside
                     • Scalability
                     • Maintainability
                     • Establish...
Let’s	
  see	
  one




                   www.csskarma.com/presentations/cssla/server


Thursday, October 21, 2010
Screen	
  Detection.
                                          CSS Media Queries




Thursday, October 21, 2010
What	
  are	
  they?




Thursday, October 21, 2010
Media	
  query	
  code
      Embedding
      @media screen and (min-width:320px) and (max-width:480px){

                 ...
Property	
  options
                     • print,	
  screen,	
  etc.
                     • device-­‐aspect-­‐ratio
      ...
The	
  upside
                     • Scalability
                     • Altering	
  readability	
  &	
  the	
  interface
 ...
The	
  downside
                     • Screen	
  size?	
  (netbooks)
                     • Maintainability
              ...
Let’s	
  see	
  one




                   www.csskarma.com/presentations/cssla/screen


Thursday, October 21, 2010
The	
  future	
  
               state	
  of	
  
              detection


Thursday, October 21, 2010
Building	
  Interaction




Thursday, October 21, 2010
Progressive	
  Enhancement	
  
                             Timeline




Thursday, October 21, 2010
What	
  we	
  lose	
  with	
  touch




Thursday, October 21, 2010
What	
  we	
  lose	
  with	
  touch




Thursday, October 21, 2010
Thursday, October 21, 2010
Scouring	
  safari	
  developer	
  docs
                     • “Touch”	
  event	
  object
                     • A	
  butt...
Touch	
  Detection.
                                        Building a rich interface




Thursday, October 21, 2010
The	
  “Touch”	
  event	
  object
                             if(window.Touch){

                                 // you’...
Gesture	
  Events
                ontouchstart
                ontouchmove
                ontouchend
                onto...
Default	
  Behaviors




Thursday, October 21, 2010
Preventing	
  Default	
  Behaviors
     var elem = document.getElementById(‘thingy’);
     elem.addEventListener(‘touchsta...
Let’s	
  see	
  one




                   www.csskarma.com/presentations/cssla/detect


Thursday, October 21, 2010
Combining	
  Techniques.
                                          Creating the super-experience




Thursday, October 21,...
Media	
  Queries
                                       +
                             Touch	
  Detection
                ...
Let’s	
  see	
  one




                  www.csskarma.com/presentations/cssla/combo


Thursday, October 21, 2010
Fallbacks.
                                 Never forgetting about the little guy




Thursday, October 21, 2010
Build	
  it	
  backwards.




Thursday, October 21, 2010
Build	
  it	
  Backwards
     body{ /* boring crap */ }


     @media screen and (min-width:1px){
         /* exciting jun...
What we covered
                • Current	
  state
                 • Device	
  detection	
  (up	
  &	
  downsides)
      ...
Resources
                     • Hardboiled	
  CSS	
  Media	
  Queries
                             http://stuffandnonsense...
Real Life Example
                     • Netflix
                     • Yahoo!	
  Mobile
                     • Yahoo!	
  S...
Questions?



Thursday, October 21, 2010
Thanks!
                             e-­‐mail:	
  timwright@csskarma.com
                             twitter:	
  @csskarm...
Upcoming SlideShare
Loading in …5
×

Mobile, Media & Touch

3,532 views

Published on

Published in: Technology
  • Be the first to comment

Mobile, Media & Touch

  1. 1. Mobile, Media & Touch One guy’s opinion about CSS Media Queries & Mobile Detection Tim Wright | csskarma.com | @csskarma Thursday, October 21, 2010
  2. 2. About me • Code  monkey  /  designer  at  USC • Blogger  on  CSSKarma • Writer  for  Smashing  Magazine  &  SitePoint • Avid  tweeter  under  @csskarma • Couch  potato Thursday, October 21, 2010
  3. 3. What we’ll cover • Current  state • Device  detection  (up  &  downsides) • Screen  detection  (up  &  downsides) • Future  state • Another  way • Touch  detection • Combining  techniques • Fallbacks Thursday, October 21, 2010
  4. 4. The  current   state  of   detection Thursday, October 21, 2010
  5. 5. Device  Detection. Server-side, with PHP Thursday, October 21, 2010
  6. 6. What  we’re  looking  for <?php echo $_SERVER['HTTP_USER_AGENT'] ?> Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en- US) AppleWebKit/534.3 (KHTML, like Gecko) Chrome/ 6.0.472.63 Safari/534.3 Thursday, October 21, 2010
  7. 7. Server-­‐side  detection  code <?php //setting the variables $ipod = stripos($_SERVER['HTTP_USER_AGENT'],"ipod"); $iphone = stripos($_SERVER['HTTP_USER_AGENT'],"iphone"); $ipad = stripos($_SERVER['HTTP_USER_AGENT'],"ipad"); //detecting device if ($ipod == true || $iphone == true || $ipad == true){ echo "<p>Apple Touch Product</p>"; } else { echo "<p>Screen</p>"; } ?> Thursday, October 21, 2010
  8. 8. The  upside • Speed • Support • Established  standard Thursday, October 21, 2010
  9. 9. The  downside • Scalability • Maintainability • Established  standard Thursday, October 21, 2010
  10. 10. Let’s  see  one www.csskarma.com/presentations/cssla/server Thursday, October 21, 2010
  11. 11. Screen  Detection. CSS Media Queries Thursday, October 21, 2010
  12. 12. What  are  they? Thursday, October 21, 2010
  13. 13. Media  query  code Embedding @media screen and (min-width:320px) and (max-width:480px){ // styles here } Linking <link rel=”stylesheet” href=”mobile.css” media=”screen and (min-width:320px) and (max-width:480px)”> Thursday, October 21, 2010
  14. 14. Property  options • print,  screen,  etc. • device-­‐aspect-­‐ratio • orientation portrait/landscape • color  (color  monitor/screen) • monochrome • min-­‐color-­‐index 256 • min  &  max  width • min  &  max  device  width • (-­‐webkit-­‐)min-­‐device-­‐pixel-­‐ratio 1.5  is  iPhone  4 Thursday, October 21, 2010
  15. 15. The  upside • Scalability • Altering  readability  &  the  interface line-­‐height • Great  for  design • Hotness Thursday, October 21, 2010
  16. 16. The  downside • Screen  size?  (netbooks) • Maintainability http://stuffandn onsense.co.uk/blog/about/hardboiled_css3_media_queries • Support http://www.themaninblue.com/experiment/ResolutionLayout/ http://code.google.com/p/css3-­‐mediaqueries-­‐js/ Thursday, October 21, 2010
  17. 17. Let’s  see  one www.csskarma.com/presentations/cssla/screen Thursday, October 21, 2010
  18. 18. The  future   state  of   detection Thursday, October 21, 2010
  19. 19. Building  Interaction Thursday, October 21, 2010
  20. 20. Progressive  Enhancement   Timeline Thursday, October 21, 2010
  21. 21. What  we  lose  with  touch Thursday, October 21, 2010
  22. 22. What  we  lose  with  touch Thursday, October 21, 2010
  23. 23. Thursday, October 21, 2010
  24. 24. Scouring  safari  developer  docs • “Touch”  event  object • A  butt-­‐load  of  gesture  events • Kick  ass  demos suuurrreee,  where  are  they? Thursday, October 21, 2010
  25. 25. Touch  Detection. Building a rich interface Thursday, October 21, 2010
  26. 26. The  “Touch”  event  object if(window.Touch){ // you’re good } else { // you’re kinda lame } Thursday, October 21, 2010
  27. 27. Gesture  Events ontouchstart ontouchmove ontouchend ontouchcancel gesturestart gesturechange gestureend orientationchange Thursday, October 21, 2010
  28. 28. Default  Behaviors Thursday, October 21, 2010
  29. 29. Preventing  Default  Behaviors var elem = document.getElementById(‘thingy’); elem.addEventListener(‘touchstart’, touchStart, false); function touchstart(event){ event.preventDefault(); } Thursday, October 21, 2010
  30. 30. Let’s  see  one www.csskarma.com/presentations/cssla/detect Thursday, October 21, 2010
  31. 31. Combining  Techniques. Creating the super-experience Thursday, October 21, 2010
  32. 32. Media  Queries + Touch  Detection = <3 Thursday, October 21, 2010
  33. 33. Let’s  see  one www.csskarma.com/presentations/cssla/combo Thursday, October 21, 2010
  34. 34. Fallbacks. Never forgetting about the little guy Thursday, October 21, 2010
  35. 35. Build  it  backwards. Thursday, October 21, 2010
  36. 36. Build  it  Backwards body{ /* boring crap */ } @media screen and (min-width:1px){ /* exciting junk */ } Thursday, October 21, 2010
  37. 37. What we covered • Current  state • Device  detection  (up  &  downsides) • Screen  detection  (up  &  downsides) • Future  state • Another  way • Touch  detection • Combining  techniques • Fallbacks Thursday, October 21, 2010
  38. 38. Resources • Hardboiled  CSS  Media  Queries http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries • Mobile  detection  script http://detectmobilebrowsers.mobi/ • Safari  developer  documentation http://developer.apple.com/library/safari/navigation/ • Proportional  Leading http://forabeautifulweb.com/blog/about/proportional_leading_with_css3_media_queries/ • Responsive  Web  Design http://www.alistapart.com/articles/responsive-­‐web-­‐design/ Thursday, October 21, 2010
  39. 39. Real Life Example • Netflix • Yahoo!  Mobile • Yahoo!  Sports Thursday, October 21, 2010
  40. 40. Questions? Thursday, October 21, 2010
  41. 41. Thanks! e-­‐mail:  timwright@csskarma.com twitter:  @csskarma slides:  csskarma.com/presentations/cssla Thursday, October 21, 2010

×