CSS for Mobile

  • 7,745 views
Uploaded on

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

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

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
7,745
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
141
Comments
1
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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