41
Mobile, Media & Touch Tim Wright | csskarma.com | @csskarma One guy’s opinion about CSS Media Queries & Mobile Detection Thursday, October 21, 2010
| Date post: | 28-Jan-2015 |
| Category: |
Technology |
| Upload: | tim-wright |
| View: | 115 times |
| Download: | 0 times |
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: [email protected]
twitter: @csskarma
slides: csskarma.com/presentations/cssla
Thursday, October 21, 2010
