mobile, media & touch

Mobile, Media & Touch

Tim Wright | csskarma.com | @csskarma

One guy’s opinion about CSS Media Queries & Mobile Detection

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 deviceif ($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  codeEmbedding@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

• orientationportrait/landscape

• color  (color  monitor/screen)

• monochrome

• min-­‐color-­‐index256

• min  &  max  width

• min  &  max  device  width

• (-­‐webkit-­‐)min-­‐device-­‐pixel-­‐ratio1.5  is  iPhone  4

Thursday, October 21, 2010

The  upside• Scalability

• Altering  readability  &  the  interfaceline-­‐height

• Great  for  design

• Hotness

Thursday, October 21, 2010

The  downside• Screen  size?  (netbooks)

•Maintainabilityhttp://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

• Supporthttp://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

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  demossuuurrreee,  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  Eventsontouchstart

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://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

• Mobile  detection  scripthttp://detectmobilebrowsers.mobi/

• Safari  developer  documentationhttp://developer.apple.com/library/safari/navigation/

• Proportional  Leadinghttp://forabeautifulweb.com/blog/about/proportional_leading_with_css3_media_queries/

• Responsive  Web  Designhttp://www.alistapart.com/articles/responsive-­‐web-­‐design/

Thursday, October 21, 2010

Real Life Example

•Netflix

•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