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

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. 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. The
current
state
of
detection
Thursday, October 21, 2010

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

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. 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. The
upside
• Speed
• Support
• Established
standard
Thursday, October 21, 2010

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

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

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

12. What
are
they?
Thursday, October 21, 2010

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. 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. The
upside
• Scalability
• Altering
readability
&
the
interface
line-­‐height
• Great
for
design
• Hotness
Thursday, October 21, 2010

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. Let’s
see
one
www.csskarma.com/presentations/cssla/screen
Thursday, October 21, 2010

18. The
future
state
of
detection
Thursday, October 21, 2010

19. Building
Interaction
Thursday, October 21, 2010

20. Progressive
Enhancement
Timeline
Thursday, October 21, 2010

21. What
we
lose
with
touch
Thursday, October 21, 2010

22. What
we
lose
with
touch
Thursday, October 21, 2010

23. Thursday, October 21, 2010

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. Touch
Detection.
Building a rich interface
Thursday, October 21, 2010

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

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

28. Default
Behaviors
Thursday, October 21, 2010

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

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

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

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

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

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

35. Build
it
backwards.
Thursday, October 21, 2010

36. Build
it
Backwards
body{ /* boring crap */ }
@media screen and (min-width:1px){
/* exciting junk */
}
Thursday, October 21, 2010

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. 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. Real Life Example
• Netflix
• Yahoo!
Mobile
• Yahoo!
Sports
Thursday, October 21, 2010

40. Questions?
Thursday, October 21, 2010

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