Mobile, Media & Touch

Mobile, Media & Touch One guy’s opinion about CSS Media Queries & Mobile Detection Tim Wright | csskarma.com | @csskarma Thursday, October 21, 2010

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

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

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'] ?> 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

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

The upside • Speed • Support • Established standard Thursday, October 21, 2010

The downside • Scalability • Maintainability • Established standard Thursday, October 21, 2010

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){ // styles here } Linking <link rel=”stylesheet” href=”mobile.css” media=”screen and (min-width:320px) and (max-width:480px)”> Thursday, October 21, 2010

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

The upside • Scalability • Altering readability & the interface line-‐height • Great for design • Hotness Thursday, October 21, 2010

The downside • Screen size? (netbooks) • Maintainability http://stuﬀandn 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

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

Thursday, October 21, 2010

Scouring safari developer docs • “Touch” event object • A butt-‐load of gesture events • Kick ass demos suuurrreee, where are they? Thursday, October 21, 2010

Touch Detection. Building a rich interface Thursday, October 21, 2010

The “Touch” event object if(window.Touch){ // you’re good } else { // you’re kinda lame } Thursday, October 21, 2010

Gesture Events ontouchstart ontouchmove ontouchend ontouchcancel gesturestart gesturechange gestureend orientationchange Thursday, October 21, 2010

Default Behaviors Thursday, October 21, 2010

Preventing Default Behaviors var elem = document.getElementById(‘thingy’); elem.addEventListener(‘touchstart’, touchStart, false); function touchstart(event){ event.preventDefault(); } Thursday, October 21, 2010

Let’s see one www.csskarma.com/presentations/cssla/detect Thursday, October 21, 2010

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

Media Queries + Touch Detection = <3 Thursday, October 21, 2010

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 junk */ } Thursday, October 21, 2010

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

Resources • Hardboiled CSS Media Queries http://stuﬀandnonsense.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

Real Life Example • Netﬂix • Yahoo! Mobile • Yahoo! Sports Thursday, October 21, 2010

Questions? Thursday, October 21, 2010

Thanks! e-‐mail: timwright@csskarma.com twitter: @csskarma slides: csskarma.com/presentations/cssla Thursday, October 21, 2010

Mobile, Media & Touch

by Tim Wright on Oct 21, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 2

Statistics

Mobile, Media & Touch — Presentation Transcript