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, Mobi...
Mobile Platform Usage
 Mobile Safari                   Java ME                      Windows Mobile
 Android               ...
Mobile Platform Usage
Mobile Platform Usage
Mobile Platform Usage
Webkit           Opera    IE   Palm        Blackberry
Other




                     1%
            ...
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-st...
Additional Rules
...
@media only screen and (max-device-width: 480px) {
    body { font-size: 17px; font-family: Helvetica...
Additional Rules
...
@media only screen and (max-device-width: 480px) {
    body { font-size: 17px; font-family: Helvetica...
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: ...
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...
Reusing Graphic Elements
                    allows you to rescale an image
-webkit-background-size
without having to make...
Reducing Graphic Elements




Source: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/...
Reducing Graphic Elements
-webkit-gradient  allows you to have the browser draw
gradient backgrounds for you. It can be us...
Reducing Graphic Elements
-webkit-gradient  allows you to have the browser draw
gradient backgrounds for you. It can be us...
Reducing Graphic Elements
Reducing Graphic Elements
          allows you to have transparent color values. It
rgba(0,0,0,0)
can be used anywhere a c...
Reducing Graphic Elements
          allows you to have transparent color values. It
rgba(0,0,0,0)
can be used anywhere a c...
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 tha...
Best Practices
•   Reduce the number of
    assets

•   Use CSS to replace
    assets where possible

•   Hide objects tha...
Best Practices
•   Reduce the number of        •   Reduce multicolumn
    assets                          layouts to singl...
Best Practices
•   Reduce the number of        •   Reduce multicolumn
    assets                          layouts to singl...
Best Practices
•   Reduce the number of        •   Reduce multicolumn
    assets                          layouts to singl...
Best Practices
•   Reduce the number of        •   Reduce multicolumn
    assets                          layouts to singl...
Some Real World Examples
Some Real World Examples
Some Real World Examples
Additional Resources

                 http://developer.apple.com/safari/
                         http://webkit.org/
 htt...
Upcoming SlideShare
Loading in...5
×

CSS for Mobile

7,810

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
7,810
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
143
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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×