2. What I do
Books Web
now Flexible Web Design: Freelance graphic
Creating Liquid and Elastic designer and web
Layouts with CSS developer
www.flexiblewebbook.com CSS consultant
Member of Adobe
soon Stunning CSS3: Task Force for WaSP
A Project-based Guide to
the Latest in CSS
www.stunningcss3.com
2
7. Progressive enhancement…aims to deliver
the best possible experience to the widest
possible audience — whether your users
are viewing your sites on an iPhone, a high-
end desktop system, a Kindle, or hearing
them on a screen-reader, their experience
should be as fully featured and functional
as possible.
Designing with Progressive Enhancement,
www.filamentgroup.com/dwpe
7
8. A few of the things
you can use...
Photo by Kristin Roach, www.flickr.com/photos/kristinroach/3995676135 8
9. Backgrounds and Borders Module
border-radius
www.blueskyresumes.com, http://blog.gesteves.com,
9
http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html
13. Color Module
RGBA and HSLA
http://24ways.org, http://css-tricks.com/text-blocks-over-image,
13
www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html
16. Benefits of CSS3 (besides looking cool)
Decrease Increase
development time usability
maintenance time accessibility
page loading time adaptability across devices
search engine placement
16
18. Increased page performance
• Smaller file sizes
• Fewer HTTP requests
Reducing the number of HTTP requests…is
the most important guideline for improving
performance for first time visitors.
Yahoo! Exceptional Performance Team,
http://developer.yahoo.com/performance/rules.html
18
31. Media query for nav bar
@media all and (max-width:52em) { English translation:
#swoosh { display: none; } Up to a maximum
#mainnav { padding: 8px 0; }
width of 52 ems, use
#mainnav ul { margin: 0; }
#mainnav li {
these styles. Once you
margin-left: 12px; get past 52 ems, use
padding: 0; the regular styles.
border: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
background: none; }
#mainnav li:hover { background: none; }
}
31
32. Media queries for mobile
min-width
max-width
device-width
min-device-width
max-device-width
orientation
-webkit-min-device-pixel-ratio
32
33. Targeting iPhone, Android, etc.
@media screen and
portrait & landscape (min-width: 320px) and
(max-width: 480px)
portrait & landscape (min-device-width: 320px) and
(max-device-width: 480px)
portrait & landscape (max-device-width: 480px)
landscape only (min-width: 321px)
portrait only (max-width: 320px)
33
34. Targeting iPad
@media screen and
portrait & landscape (min-device-width: 768px) and
(max-device-width: 1024px)
landscape only (min-width: 769px)
landscape only (min-device-width: 481px) and
(max-device-width: 1024px)
and (orientation: landscape)
portrait only (min-device-width: 481px) and
(max-device-width: 1024px)
and (orientation: portrait)
34
35. Viewport meta tag
Forces mobile devices to scale viewport to
actual device width
<meta name="viewport"
content="width=device-width,
minimum-scale=1.0,
maximum-scale=1.0">
35
36. Learn more
Download slides, get links:
www.zomigi.com/blog/web-directions-usa/
Book:
www.stunningcss3.com
Zoe Mickley Gillenwater
@ zomigi
design@ zomigi.com
www.zomigi.com
36