CSS for Mobile

Presented at BarCamp Chattanooga 2009

Transcript

1. CSS for Mobile
   Daniel Ryan
   BarCamp Chattanooga, July 25, 2009
   

   View Slide

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
   •
   •
   

   View Slide

3. Mobile Platform Usage
   Mobile Safari
   Java ME
   Windows Mobile
   Android
   Symbian
   Palm
   Blackberry
   BREW
   Mobile Safari Java ME Windows Mobile Android Symbian Palm Blackberry BREW
   Source: http://mobilitytoday.com/news/009360/safari_iphone_king_browser
   

   View Slide

4. Mobile Platform Usage
   Webkit
   Opera
   IE
   Palm
   Blackberry
   Other
   Webkit Opera IE Palm Blackberry Other
   

   View Slide

5. Two Approaches
   Separate Style Sheet
   Additional rules in the same Style Sheet
   •
   •
   

   View Slide

6. Separate Style Sheet
   br/>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   
   
   ...
   type="text/css" />
   href="/css/mobile.css" type="text/css" rel="stylesheet" />
   ...
   
   

   View Slide

7. 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
   

   View Slide

8. First Steps
   
   body { font-size: 17px; font-family: Helvetica, sans-serif; }
   #bd, #sb { float: none; }
   

   View Slide

9. Reusing Graphic Elements
   #hd p.logo a { -webkit-background-size: auto 40px; }
   -webkit-background-size allows you to rescale an image
   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/
   

   View Slide

10. Reducing Graphic Elements
    #hd { background: -webkit-gradient(linear, center top, center
    bottom, from(rgba(0,0,0,0.5)), color-stop(0.1, #fff), to(#fff)); }
    -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
    

    View Slide

11. Reducing Graphic Elements
    #hd { background: rgba(0,0,0,0.5); }
    rgba(0,0,0,0) allows you to have transparent color values.
    It can be used anywhere a color code can be used.
    

    View Slide

12. 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
    Reduce multicolumn layouts
    to single column
    Visually reorder the page
    flow where applicable
    Use native-esque controls
    Change any overflow: auto
    elements to overflow:
    visible
    

    View Slide

13. Some Real World Examples
    

    View Slide

14. Some Real World Examples
    

    View Slide

15. Some Real World Examples
    

    View Slide

16. 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/
    

    View Slide