Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS for Mobile

Daniel Ryan
October 22, 2011

CSS for Mobile

Presented at BarCamp Chattanooga 2009

Daniel Ryan

October 22, 2011
Tweet

More Decks by Daniel Ryan

Other Decks in Technology

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