Mobile, Media & Touch

3,328 views
3,201 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,328
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
50
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×