CSS for Mobile

8,114 views
7,960 views

Published on

Slides from my presentation on CSS for Mobile Webkit at BarCamp Chattanooga

Published in: Technology, Education
1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total views
8,114
On SlideShare
0
From Embeds
0
Number of Embeds
49
Actions
Shares
0
Downloads
144
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

CSS for Mobile

  1. 1. CSS for Mobile Daniel Ryan BarCamp Chattanooga, July 25, 2009
  2. 2. 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
  3. 3. 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
  4. 4. Mobile Platform Usage
  5. 5. Mobile Platform Usage
  6. 6. Mobile Platform Usage Webkit Opera IE Palm Blackberry Other 1% 2% 2% IE 7% Opera 12% Webkit 76%
  7. 7. Two Approaches
  8. 8. Two Approaches • Separate Style Sheet
  9. 9. Two Approaches • Separate Style Sheet • Additional rules in the same Style Sheet
  10. 10. 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>
  11. 11. 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
  12. 12. 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; } }
  13. 13. First Steps
  14. 14. First Steps <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  15. 15. 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; }
  16. 16. Reusing Graphic Elements Source: http://www.css3.info/preview/background-size/
  17. 17. 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/
  18. 18. 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/
  19. 19. Reducing Graphic Elements Source: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/Functions.html
  20. 20. 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
  21. 21. 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
  22. 22. Reducing Graphic Elements
  23. 23. 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.
  24. 24. 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); }
  25. 25. Best Practices
  26. 26. Best Practices • Reduce the number of assets
  27. 27. Best Practices • Reduce the number of assets • Use CSS to replace assets where possible
  28. 28. Best Practices • Reduce the number of assets • Use CSS to replace assets where possible • Hide objects that the platform cannot view
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. Some Real World Examples
  35. 35. Some Real World Examples
  36. 36. Some Real World Examples
  37. 37. 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/

×