Your SlideShare is downloading. ×
CSS for Mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS for Mobile

7,789

Published 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

Published in: Technology, Education
1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,789
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
143
Comments
1
Likes
10
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/

×