CSS for Mobile

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, Mobile Safari holds a 67% usage share • •

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

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

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

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

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; }

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/

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

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.

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

Some Real World Examples

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/

CSS for Mobile

CSS for Mobile

Daniel Ryan

More Decks by Daniel Ryan

Other Decks in Technology

Featured

Transcript

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

The Advent of iPhone Approximately 15% of all internet traffic

Mobile Platform Usage Mobile Safari Java ME Windows Mobile Android

Mobile Platform Usage Webkit Opera IE Palm Blackberry Other Webkit

Two Approaches Separate Style Sheet Additional rules in the same

Separate Style Sheet <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

Additional Rules ... @media only screen and (max-device-width: 480px) {

First Steps <meta name="viewport" content="width=device-width, initial- scale=1, user-scalable=no" /> body

Reusing Graphic Elements #hd p.logo a { -webkit-background-size: auto 40px;

Reducing Graphic Elements #hd { background: -webkit-gradient(linear, center top, center

Reducing Graphic Elements #hd { background: rgba(0,0,0,0.5); } rgba(0,0,0,0) allows

Best Practices Reduce the number of assets Use CSS to

Some Real World Examples

Some Real World Examples

Some Real World Examples