Download - Mobile, Media & Touch
![Page 1: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/1.jpg)
Mobile, Media & Touch
Tim Wright | csskarma.com | @csskarma
One guy’s opinion about CSS Media Queries & Mobile Detection
Thursday, October 21, 2010
![Page 2: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/2.jpg)
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
![Page 3: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/3.jpg)
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
![Page 4: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/4.jpg)
The current state of detection
Thursday, October 21, 2010
![Page 5: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/5.jpg)
Device Detection.Server-side, with PHP
Thursday, October 21, 2010
![Page 6: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/6.jpg)
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
![Page 7: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/7.jpg)
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
![Page 8: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/8.jpg)
The upside
•Speed
•Support
•Established standard
Thursday, October 21, 2010
![Page 9: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/9.jpg)
The downside
•Scalability
•Maintainability
•Established standard
Thursday, October 21, 2010
![Page 10: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/10.jpg)
Let’s see one
www.csskarma.com/presentations/cssla/server
Thursday, October 21, 2010
![Page 11: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/11.jpg)
Screen Detection.CSS Media Queries
Thursday, October 21, 2010
![Page 12: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/12.jpg)
What are they?
Thursday, October 21, 2010
![Page 13: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/13.jpg)
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
![Page 14: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/14.jpg)
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
![Page 15: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/15.jpg)
The upside• Scalability
• Altering readability & the interfaceline-‐height
• Great for design
• Hotness
Thursday, October 21, 2010
![Page 16: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/16.jpg)
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
![Page 17: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/17.jpg)
Let’s see one
www.csskarma.com/presentations/cssla/screen
Thursday, October 21, 2010
![Page 18: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/18.jpg)
The future state of detection
Thursday, October 21, 2010
![Page 19: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/19.jpg)
Building Interaction
Thursday, October 21, 2010
![Page 20: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/20.jpg)
Progressive Enhancement Timeline
Thursday, October 21, 2010
![Page 21: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/21.jpg)
What we lose with touch
Thursday, October 21, 2010
![Page 22: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/22.jpg)
What we lose with touch
Thursday, October 21, 2010
![Page 23: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/23.jpg)
Thursday, October 21, 2010
![Page 24: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/24.jpg)
Scouring safari developer docs
•“Touch” event object
•A butt-‐load of gesture events
•Kick ass demossuuurrreee, where are they?
Thursday, October 21, 2010
![Page 25: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/25.jpg)
Touch Detection.Building a rich interface
Thursday, October 21, 2010
![Page 26: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/26.jpg)
The “Touch” event object
if(window.Touch){
// you’re good
} else {
// you’re kinda lame
}
Thursday, October 21, 2010
![Page 27: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/27.jpg)
Gesture Eventsontouchstart
ontouchmove
ontouchend
ontouchcancel
gesturestart
gesturechange
gestureend
orientationchange
Thursday, October 21, 2010
![Page 28: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/28.jpg)
Default Behaviors
Thursday, October 21, 2010
![Page 29: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/29.jpg)
Preventing Default Behaviors
var elem = document.getElementById(‘thingy’);
elem.addEventListener(‘touchstart’, touchStart, false);
function touchstart(event){
event.preventDefault();
}
Thursday, October 21, 2010
![Page 30: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/30.jpg)
Let’s see one
www.csskarma.com/presentations/cssla/detect
Thursday, October 21, 2010
![Page 31: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/31.jpg)
Combining Techniques.Creating the super-experience
Thursday, October 21, 2010
![Page 32: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/32.jpg)
Media Queries+
Touch Detection=
<3
Thursday, October 21, 2010
![Page 33: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/33.jpg)
Let’s see one
www.csskarma.com/presentations/cssla/combo
Thursday, October 21, 2010
![Page 34: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/34.jpg)
Fallbacks.Never forgetting about the little guy
Thursday, October 21, 2010
![Page 35: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/35.jpg)
Build it backwards.
Thursday, October 21, 2010
![Page 36: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/36.jpg)
Build it Backwards
body{ /* boring crap */ }
@media screen and (min-width:1px){
/* exciting junk */
}
Thursday, October 21, 2010
![Page 37: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/37.jpg)
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
![Page 38: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/38.jpg)
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
![Page 39: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/39.jpg)
Real Life Example
•Netflix
•Yahoo! Mobile
•Yahoo! Sports
Thursday, October 21, 2010
![Page 40: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/40.jpg)
Questions?
Thursday, October 21, 2010
![Page 41: Mobile, Media & Touch](https://reader034.vdocuments.us/reader034/viewer/2022050808/54c90f934a7959ce2e8b45bd/html5/thumbnails/41.jpg)
Thanks!e-‐mail: [email protected]
twitter: @csskarma
slides: csskarma.com/presentations/cssla
Thursday, October 21, 2010