CSS for Mobile
Loading...
Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.
3 Favorites & 1 Event
-
Sebastian Cooper, Creative Manager at Cellsmart,
favorited this 1 month ago
-
Jerome Coloma at Frozynart Designs, favorited this 1 month ago
-
skysophia
favorited this 3 months ago
-
Daniel Ryan, Web Front End Engineer at Freelance, added this to the event BarCamp Chattanooga 2009
CSS for Mobile - Presentation Transcript
- CSS for Mobile Daniel Ryan BarCamp Chattanooga, July 25, 2009
- The Advent of iPhone • Approximately 15% of all internet traffic is now from mobile platforms • Of mobile browsers, Mobile Safari holds a 67% usage share
- Mobile Platform Usage Mobile Safari Java ME Windows Mobile Android Symbian Palm Blackberry BREW 2% 2% 2% Symbian 6% Android 6% Mobile Safari 66% Windows Mobile 7% Java ME 9% Source: http://mobilitytoday.com/news/009360/safari_iphone_king_browser
- Mobile Platform Usage
- Mobile Platform Usage
- Mobile Platform Usage Webkit Opera IE Palm Blackberry Other 1% 2% 2% IE 7% Opera 12% Webkit 76%
- Two Approaches
- Two Approaches • Separate Style Sheet
- Two Approaches • Separate Style Sheet • Additional rules in the same Style Sheet
- Separate Style Sheet <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ... <link rel="stylesheet" href="/css/barcampchatt.css" type="text/css" /> <link media="only screen and (max-device-width: 480px)" href="/css/ mobile.css" type="text/css" rel="stylesheet" /> ... </head>
- Additional Rules ... @media only screen and (max-device-width: 480px) { body { font-size: 17px; font-family: Helvetica, sans-serif; } a { color: #e2f7d8; } h1, h2, h3, h4, h5, h6 { font-weight: bold; font-size: 100% !important; color: #fff; font-family: inherit; } } Source: http://squaregirl.com/blog/2009/6/1/iphone-css.html
- Additional Rules ... @media only screen and (max-device-width: 480px) { body { font-size: 17px; font-family: Helvetica, sans-serif; } a { color: #e2f7d8; } h1, h2, h3, h4, h5, h6 { font-weight: bold; font-size: 100% !important; color: #fff; font-family: inherit; } }
- First Steps
- First Steps <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
- First Steps <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> body { font-size: 17px; font-family: Helvetica, sans-serif; } #bd, #sb { float: none; }
- Reusing Graphic Elements Source: http://www.css3.info/preview/background-size/
- Reusing Graphic Elements allows you to rescale an image -webkit-background-size without having to make a separate file. it accepts an x and y value, with “auto” being acceptable for either. Source: http://www.css3.info/preview/background-size/
- Reusing Graphic Elements allows you to rescale an image -webkit-background-size without having to make a separate file. it accepts an x and y value, with “auto” being acceptable for either. #hd p.logo a { -webkit-background-size: auto 40px; } Source: http://www.css3.info/preview/background-size/
- Reducing Graphic Elements Source: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/Functions.html
- Reducing Graphic Elements -webkit-gradient allows you to have the browser draw gradient backgrounds for you. It can be used anywhere an url(‘../path/to/file’) can be used. Source: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/Functions.html
- Reducing Graphic Elements -webkit-gradient allows you to have the browser draw gradient backgrounds for you. It can be used anywhere an url(‘../path/to/file’) can be used. #hd { background: -webkit-gradient(linear, center top, center bottom, from(rgba(0,0,0,0.5)), color-stop(0.1, #fff), to(#fff)); } Source: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/Functions.html
- Reducing Graphic Elements
- Reducing Graphic Elements allows you to have transparent color values. It rgba(0,0,0,0) can be used anywhere a color code can be used.
- Reducing Graphic Elements allows you to have transparent color values. It rgba(0,0,0,0) can be used anywhere a color code can be used. #hd { background: rgba(0,0,0,0.5); }
- Best Practices
- Best Practices • Reduce the number of assets
- Best Practices • Reduce the number of assets • Use CSS to replace assets where possible
- Best Practices • Reduce the number of assets • Use CSS to replace assets where possible • Hide objects that the platform cannot view
- Best Practices • Reduce the number of assets • Use CSS to replace assets where possible • Hide objects that the platform cannot view • Use native font faces and sizes
- Best Practices • Reduce the number of • Reduce multicolumn assets layouts to single column • Use CSS to replace assets where possible • Hide objects that the platform cannot view • Use native font faces and sizes
- Best Practices • Reduce the number of • Reduce multicolumn assets layouts to single column • Use CSS to replace • Visually reorder the page assets where possible flow where applicable • Hide objects that the platform cannot view • Use native font faces and sizes
- Best Practices • Reduce the number of • Reduce multicolumn assets layouts to single column • Use CSS to replace • Visually reorder the page assets where possible flow where applicable • Hide objects that the • Use native-esque platform cannot view controls • Use native font faces and sizes
- Best Practices • Reduce the number of • Reduce multicolumn assets layouts to single column • Use CSS to replace • Visually reorder the page assets where possible flow where applicable • Hide objects that the • Use native-esque platform cannot view controls • Use native font faces and • Change any overflow: auto sizes elements to overflow: visible
- Some Real World Examples
- Some Real World Examples
- Some Real World Examples
- Additional Resources http://developer.apple.com/safari/ http://webkit.org/ http://www.alistapart.com/articles/return-of-the-mobile-stylesheet/ http://www.alistapart.com/articles/putyourcontentinmypocket/ http://girliemac.com/blog/2008/07/19/webkit-css-animation-examples/ http://dryan.com/css-for-mobile http://www.slideshare.net/danielryan/css-for-mobile/
1192 views, 3 favs, more stats
Slides from my presentation on CSS for Mobile Webki more
More info about this document
© All Rights Reserved
Go to text version
- Total Views 1192
- 1192 on SlideShare
- Comments 0
- Favorites 3
- Downloads 33
Most viewed embeds
All embeds
- Upload Info
- Uploaded via SlideShare
- Uploaded as Apple Keynote
0 comments
Post a comment