26. Levels of importance for design and features
Critical Important Nice to Have
Branding Interactions Visual Rewards
Usability Feedback Motion
Accessibility
Layout
27. You get out what you put in
• Design the user experience to leverage
the best technology of the time
• Let the capabilities of the device
determine the experience
28. Give some user experience love
• Adding an experience layer can take a
good design and make it a great one.
• CSS3 facilitates this with very little
effort.
30. What’s the difference between
Graceful Degradation or Progressive Enhancement?
http://www.flickr.com/photos/tom1231/273579455/
31. There is a difference
“Progressive enhancement uses web
technologies in a layered fashion that
allows everyone to access the basic
content and functionality of a web page,
using any browser or Internet
connection, while also providing those
with better bandwidth or more
advanced browser software an
enhanced version of the page.”
http://en.wikipedia.org/wiki/Progressive_e
nhancement
32. But we are really talking about
Progressive Progressive
enhancement = enrichment = style
behavior
33. CSS3 UX layer
• Is all about progressive enhancement +
progressive enrichment of the
experience for the user based on what
their browser can render.
34. One set of users gets this
• Modernizr article example
52. Leverage source order
• Place default properties first
• Place browser‐specific properties
ahead of standard properties
• The standard properties will
override the vendor’s when the
standard is established.
54. A Proper Stack
.gradient {
color: #fff;
background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat;
/*fallback background color & image*/
55. A Proper Stack
.gradient {
color: #fff;
background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat;
/*fallback background color & image*/
background-image: -moz-linear-gradient(top, #07407c,
#aaaaaa); /* gradient for Mozilla */
56. A Proper Stack
.gradient {
color: #fff;
background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat;
/*fallback background color & image*/
background-image: -moz-linear-gradient(top, #07407c,
#aaaaaa); /* gradient for Mozilla */
background-image: -webkit-gradient(linear,left top,left
bottom,color-stop(0, #07407c),color-stop(1, #aaaaaa));
/* gradient for the Webkits */
57. A Proper Stack
.gradient {
color: #fff;
background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat;
/*fallback background color & image*/
background-image: -moz-linear-gradient(top, #07407c,
#aaaaaa); /* gradient for Mozilla */
background-image: -webkit-gradient(linear,left top,left
bottom,color-stop(0, #07407c),color-stop(1, #aaaaaa));
/* gradient for the Webkits */
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(startColorS
tr='#07407c', EndColorStr='#aaaaaa')";
/* filter for IE8 (& IE9) */
58. A Proper Stack
.gradient {
color: #fff;
background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat;
/*fallback background color & image*/
background-image: -moz-linear-gradient(top, #07407c,
#aaaaaa); /* gradient for Mozilla */
background-image: -webkit-gradient(linear,left top,left
bottom,color-stop(0, #07407c),color-stop(1, #aaaaaa));
/* gradient for the Webkits */
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(startColorS
tr='#07407c', EndColorStr='#aaaaaa')";
/* filter for IE8 (& IE9) */
filter:
progid:DXImageTransform.Microsoft.gradient(startColorSt
r='#07407c', EndColorStr='#aaaaaa');
} /* filter for IE7 and lower */
59. Have more than one…stylesheet
Use multiple stylesheets to add layers of
style complexity for multiple platforms
See:
http://www.alistapart.com/articles/
progressiveenhancementwithcss
61. Employ Useful Tools
Ie7.js: A javascript library that make IE act
like a standards‐compliant browser
http://code.google.com/p/ie7‐js/
Modernizr: detects support of CSS3
properties in browsers
http://www.modernizr.com/
64. Advanced selectors
New kids in town: CSS3, contd.
• E ~ F ‐ selects an F element that comes
after an E element
• E:nth‐child(n) ‐ selects an element
which is the nth child of its parent
element
– E:nth‐last‐child(n) ‐ same as the previous
selector, but counting from the last one
– E:nth‐of‐type(n) ‐ selects an element which
is the nth sibling of its type
68. What does Modernizr do?
Modernizr detects which CSS3 (and
HTML5) properties are supported by the
browser, and then allows you to create
styles that will work in targeted
browsers.
69. How to use Modernizr
http://www.alistapart.com/articles/taking‐
advantage‐of‐html5‐and‐css3‐with‐
modernizr/
http://webdesignernotebook.com/css/
how‐to‐use‐modernizr
http://www.ericlightbody.com/2010/
modernizr‐your‐tool‐for‐html5‐and‐
css3‐functionality/
70. CSS3 Properties: Visual and
User Experience Layers
http://www.flickr.com/photos/southpaw2305/3705409282/
71. NOTE: None of the IEs support CSS3.
6 7 8
…as in “not any”. Right. ‘Nuff said.
http://www.flickr.com/photos/johnsnape/4258191545/
74. @font-face
• Note:
– Actually part of the CSS2.1
specification.
– Therefore, the IEs do support it!
• Browser Support
– However, the older IEs require fonts
to be in EOT format
– IE9 now supports WOFF!
75. @font-face bug: IE
@font-face super bullet‐proofing
The problem:
@font‐face doesn’t work, even with the
proper normal syntax. What gives?
The solution:
Separate out the .eot call with a new
@font‐face declaration.
77. @font-face bug: Webkit
@font-face bold and italics “bug”
The problem:
Applying font-weight:bold or font-
style: italic to @font‐face'd text
doesn’t work.
The solution:
Add the value normal to font weight,
style, and variant in the @font‐face
declaration to set a baseline.
82. gradient
• Tips & issues
– Different syntax for mozilla and
webkit browsers
– Establish fallback background image
first in code
• Browser Support
– IE and Opera do not support, so will
still need a fallback image*
*which may make you think “then why use it at all?”
92. border-radius
• Tips & issues
– Different syntax for mozilla, webkit,
and opera browsers
• Browser Support
– Older IEs do not support, Opera: 10.5
only
98. box-shadow
• Tips & issues
– Different syntax for mozilla, webkit,
and opera browsers
• Browser Support
– IE does not support, Opera only 10.5
– However, there is a filter for IE:
shadow (actually there are 2:
dropshadow as well, but shadow is
said to be better)
102. text-shadow
• Tips & issues
– Can help accentuate text and improve
readability and visual importance
• Browser Support
– IE does not support
– However, there is an IE filter: shadow
111. rgba
• Tips & issues
– More granular control of particular
elements than opacity
– Place after regular rgb color property to
override in modern browsers; older
browsers will ignore it;
• Browser Support
– IE does not support
– There is an IE filter that will give
transparency with a color.
– IE bug: use the property background
instead of background-color for the
regular color
112. Full solution: rgba
.rgba {
background-color: #ff0000; /* fallback
color in hexidecimal. */
background-color: transparent; /*
transparent is key for the filter to
work in IE8. best done through
conditional comments */
background-color: rgba(255, 0, 0, 0.3);
-ms-filter:
"progid:DXImageTransform.Microsoft.gradi
ent(startColorstr=#4CFF0000,
endColorstr=#4CFF0000)";
/* filter for IE8 */
filter:
progid:DXImageTransform.Microsoft.gradie
nt(startColorstr=#4CFF0000,
endColorstr=#4CFF0000);
/* filter for older IEs */
}
119. transform
• Tips & issues
– Mozilla, webkit, and opera vendor
prefixes; no standard yet.
• Browser Support
– IE does not support, Opera 10.5 only
120. transform/rotate: Syntax breakdown
The generic syntax for transform is
<-prefix->transform:
type(<value>) type(<value>)
type(<value>) type(<value>);
For rotate specifically, here is the syntax:
<-prefix->transform:
rotate(<value>)
Positive values will rotate the object clockwise
to the right, and negative values will rotate
the element counter‐clockwise to the left.
122. Transform: graceful degradation
• Leave images/elements in standard
orientation or shape
• There is an IE filter: matrix.
• Extra credit: serve images or image
sprites with conditional comments
135. Remember
• The CSS3 UX layers are about adding
visual and interactive features that do
not affect layout or access to content.
Don’t exclude users from either.
• CSS3 makes the process a TON easier.
136. Instead of something like this…
In modern browsers In IE6
makephotoshopfaster.com