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


What we’ll cover
• Current
state
• Device
detection
(up
&
downsides)
• Screen
detection
(up
&
downsides)
• Future
state
• Another
way
• Touch
detection
• Combining
techniques
• Fallbacks

The
current

state
of

detection


Device
Detection.
Server-side, with PHP


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


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>";
}
?>


The
upside
• Speed
• Support
• Established
standard


The
downside
• Scalability
• Maintainability
• Established
standard


Let’s
see
one

www.csskarma.com/presentations/cssla/server


Screen
Detection.
CSS Media Queries


What
are
they?


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)”>


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


The
upside
• Scalability
• Altering
readability
&
the
interface
line-‐height

• Great
for
design
• Hotness


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/


Let’s
see
one

www.csskarma.com/presentations/cssla/screen


The
future

state
of

detection


Building
Interaction


Progressive
Enhancement

Timeline


What
we
lose
with
touch


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


Touch
Detection.
Building a rich interface


The
“Touch”
event
object
if(window.Touch){

// you’re good

} else {

// you’re kinda lame

}


Gesture
Events
ontouchstart
ontouchmove
ontouchend
ontouchcancel
gesturestart
gesturechange
gestureend
orientationchange


Default
Behaviors


Preventing
Default
Behaviors
var elem = document.getElementById(‘thingy’);
elem.addEventListener(‘touchstart’, touchStart, false);

function touchstart(event){
event.preventDefault();
}


Let’s
see
one

www.csskarma.com/presentations/cssla/detect


Combining
Techniques.
Creating the super-experience


Media
Queries
+
Touch
Detection
=
<3


Let’s
see
one

www.csskarma.com/presentations/cssla/combo


Fallbacks.
Never forgetting about the little guy


Build
it
backwards.


Build
it
Backwards
body{ /* boring crap */ }

@media screen and (min-width:1px){
/* exciting junk */
}


What we covered
• Current
state
• Device
detection
(up
&
downsides)
• Screen
detection
(up
&
downsides)
• Future
state
• Another
way
• Touch
detection
• Combining
techniques
• Fallbacks

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/


Real Life Example
• Netﬂix
• Yahoo!
Mobile
• Yahoo!
Sports


Questions?


Thanks!
e-‐mail:
timwright@csskarma.com
twitter:
@csskarma
slides:
csskarma.com/presentations/cssla


Mobile, Media & Touch

Recommandé

Recommandé

Contenu connexe

Similaire à Mobile, Media & Touch

Similaire à Mobile, Media & Touch (20)

Plus de Tim Wright

Plus de Tim Wright (17)

Dernier

Dernier (20)

Mobile, Media & Touch