Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Separate Style Sheet ... ...

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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/

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Some Real World Examples

Slide 14

Slide 14 text

Some Real World Examples

Slide 15

Slide 15 text

Some Real World Examples

Slide 16

Slide 16 text

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/