Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
CSS for Mobile
1. CSS for Mobile
Daniel Ryan
BarCamp Chattanooga, July 25, 2009
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. 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
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. 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. Reducing Graphic Elements
Source: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/Functions.html
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. 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
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. 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); }
27. Best Practices
• Reduce the number of
assets
• Use CSS to replace
assets where possible
28. Best Practices
• Reduce the number of
assets
• Use CSS to replace
assets where possible
• Hide objects that the
platform cannot view
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. 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. 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. 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. 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