css3: are you experienced?
Post on 18-Oct-2014
2.923 views
DESCRIPTION
CSS3 not only helps the visual layer of websites, but also the experience layer as well.TRANSCRIPT
Denise R. Denise R. JacobsJacobsRich Web
ExperienceFort
LauderdaleDecember 2010
Are You {css3;} Are You {css3;}
Experienced?Experienced?
The Twitter Experience
I am:@denisejacobs
We’re at: @rwx #rwx
And I’m talkin’ jive about: #css3ux
2008: the start of the Summer of CSS3 Love
http://www.flickr.com/photos/victoriapeckham/2091704802/
CSS3 is super groovy, man
• Easier implementation of visual effects
• Effects that enhance the user experience
“Do websites need to look exactly the same in every browser?”
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
“Do websites need to be experiencedexactly the
same in every browser?”
http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/
We haven’t kicked the habit
Design and Development Approach
Many folks still design their sites as if users are still…
On one device
In one environment
Whereas, nowadays…
The Age of Emotional
& Experience Design
Emotional Design
“Aesthetically pleasing objects appear to users to be more effective by virtue of their sensual appeal and an affinity the user feels for the object based on a formation of an emotional connectionto it. “
‐Wikipedia (with liberal edits)
Experience Design
“…Designing products, processes, services, events, and environments with a focus placed on the quality of the user experience….Experience design is driven by consideration of the moments of engagement between people and [objects], and the ideas, emotions, and memories that these moments create.”
‐Wikipedia (with liberal edits)
Dimensions of Experience Design• Duration
– Initiation, Immersion, Conclusion, and Continuation
• Intensity– Reflex, Habit, Engagement
• Interaction – Passive < > Active < > Interactive)
• Triggers– All Senses, Concepts, and Symbols
• Significance– Meaning, Emotion, Function
Good looks +
http://www.flickr.com/photos/spierzchala/66232046/
Delight +
http://www.flickr.com/photos/cristeenq/2360466038/
Compatibility =
http://www.flickr.com/photos/trektrack/134157546/
A strong positive user experience
http://www.flickr.com/photos/meggers/2378288736/
Sites need be usable and look good to as many people as
possible.
That’s the true goal.
http://www.flickr.com/photos/shirinwiniger/3680885289/
So the question is…
http://www.flickr.com/photos/exquisitur/2549355743/
Are You {css3;} Are You {css3;}
Experienced?Experienced?
The website “trifle”
Markup
Style
Experience
Levels of importance for design and features
Critical Important Nice to Have
BrandingUsability
AccessibilityLayout
InteractionsFeedback
Visual RewardsMotion
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
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.
Progressive Enhancement is the way
Css3 b
What’s the difference betweenGraceful Degradation or Progressive Enhancement?
http://www.flickr.com/photos/tom1231/273579455/
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_enhancement
But we are really talking aboutProgressive enhancement = behavior
Progressive enrichment = style
CSS3 UX layer
• Is all about progressive enhancement + progressive enrichment of the experience for the user based on what their browser can render.
One set of users gets this
• Modernizr article example
While another gets this
• Modernizr article example
And another gets this
• Modernizr article example
But they all feel this
Unique convergence point
However, there are issues…
http://www.flickr.com/photos/cybervin/266632074/
Relationship Status:
It’s Complicated
Still a working draft
Validation (or lack thereof)
Uneven browser support
http://www.evotech.net/blog/2009/02/css-browser-support/
And code bloat…Ideally:
a.polaroid:active{
z-index: 999;border-color: #6A6A6A;
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
transform: rotate(0deg) scale(1.05);
}
Reality:
a.polaroid:active {z-index: 999;border-color: #6A6A6A;-webkit-box-shadow: 15px
15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px20px rgba(0,0, 0, 0.4);
-webkit-transform: rotate(0deg) scale(1.05);
-moz-transform: rotate(0deg) scale(1.05);
transform: rotate(0deg) scale(1.05);
}
Oh my!
CSS3 Support
• X% Now • 2 • X% in 6 months • 4 • X % in 2 years • 9 • X % in 4 years • 100% Who knows?
CSS3 Specifications
Browser Compatibility Charts
http://www.findmebyip.com/litmus
Cross- Browser Testers
Some Useful Tips
http://www.flickr.com/photos/nostri-imago/3216359107/
Progressive techniques
• A proper stack• Multiple stylesheets• Targeted styles (advanced selectors)
• 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.
Leverage source order
A Proper Stack.gradient {color: #fff;
A Proper Stack.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat;
/*fallback background color & image*/
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 */
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 */
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(startColorStr='#07407c', EndColorStr='#aaaaaa')"; /* filter for IE8 (& IE9) */
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(startColorStr='#07407c', EndColorStr='#aaaaaa')"; /* filter for IE8 (& IE9) */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c', EndColorStr='#aaaaaa');
} /* filter for IE7 and lower */
Have more than one…stylesheet
Use multiple stylesheets to add layers of style complexity for multiple platforms
See:http://www.alistapart.com/articles/progressiveenhancementwithcss
Styling in multiples@import 'reset.css'; @import 'structure.css'; @import 'typography.css'; @import 'widgets.css';
Employ Useful Tools
Ie7.js: A javascript library that make IE act like a standards‐compliant browserhttp://code.google.com/p/ie7‐js/
Modernizr: detects support of CSS3 properties in browsershttp://www.modernizr.com/
Be advanced
Advanced selectors are a good way to specifically target styles for modern browsers.
Advanced CSS selectors
Remember these from CSS2.1?• E + F: Sibling• E > F: Child• Attribute• pseudo‐element: : before, : after
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
Advanced selectors
New kids in town: CSS3• E:only‐of‐type ‐ refers to an element which is the only sibling of its type
• E:not(s) ‐ selects any element that doesn't match the simple selector s
Some tools
Modernizr.com
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.
How to use Modernizrhttp://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/
CSS3 Properties: Visual and User Experience Layers
http://www.flickr.com/photos/southpaw2305/3705409282/
NOTE: None of the IEs support CSS3.
http://www.flickr.com/photos/johnsnape/4258191545/
…as in “not any”. Right. ‘Nuff said.
6 7 8
CSS3 for Visual Presentation
1. @font‐face2. gradient3. border‐image
http://sickdesigner.com/
@font-face
@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!
@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.
@font-face bullet-proofing@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot');}
@font-face { font-family: 'Graublau Web'; src: local('☺'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}
@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.
Get your @font-face + faux variations
Example:@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
font-weight:normal;font-style:normal;font-variant:normal;}
Full solution: @font-face@font-face { font-family: 'Colaborate Light'; src: url('ColabLig.eot');}
@font-face { font-family: 'Colaborate Light'; src: local('☺'), url('ColabLig.woff') format('woff'), url('ColabLig.ttf') format('truetype');
font-weight:normal;font-style:normal;f t i t l
FontSquirrel.com
http://www.fontsquirrel.com/fontface/generator
gradient
http://raymondjay.com/
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?”
#mainnav li a {background-color: #f7f6f4; background-image: url(bg_navitems.gif); background-image: -moz-linear-gradient(100% 100% 90deg, #ccc9ba, #ffffff);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#ccc9ba));
}
gradient
Gradient: Syntax breakdown
gradient: Full solution.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0
0 x-repeat; /*background color matches one of the stop colors. The gradient_slice.jpgis 1px wide */
background-image: -moz-linear-gradient(top, #07407c, #aaaaaa);
background-image: -webkit-gradient(linear,lefttop,left bottom,color-stop(0, #07407c),color-stop(1, #aaaaaa));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c', EndColorStr='#aaaaaa')";/* IE8+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c', EndColorStr='#aaaaaa'); /* IE7- */
Colorzilla gradient tool
http://www.colorzilla.com/gradient-editor/
border-image
http://www.zurb.com/playground/awesome-overlays
border-image
div.note div.border {-moz-border-image: url(/playground/awesome-overlays/border-image.png) 5 5 5 5 stretch; -webkit-border-image: url(/playground/awesome-overlays/border-image.png) 5 5 5 5 stretch; border-image: url(/playground/awesome-overlays/border-image.png) 5 5 5 5 stretch; }
Border-image.com
CSS3 for Presentation + UX: Core
1. border‐radius2. box‐shadow3. text‐shadow4. opacity5. rgba color6. multiple background images
border-radius
http://www.denisejacobs.com/cdgexamples/chapter10/
border-radius
• Tips & issues– Different syntax for mozilla, webkit, and opera browsers
• Browser Support– Older IEs do not support, Opera: 10.5 only
border-radius syntax
Syntax comparison breakdown:• ‐moz allows multiple values for each position• ‐webkit individual values• Standard is like mozilla
border-radius
#contentcolumn {-moz-border-radius: 20px 20px 0 0;-webkit-border-top-left-radius: 20px;-webkit-border-top-right-radius: 20px;border-radius: 20px 20px 0 0;}
Full solution: border-radius#contentcolumn {margin: -40px 3% 0 3%;width: 42%;-moz-border-radius: 20px 20px 0 0;-webkit-border-top-left-radius: 20px;-webkit-border-top-right-radius: 20px;-moz-box-shadow: 0 5px 20px rgba(0,0,0,0.6);-webkit-box-shadow: 0 5px 20px rgba(0,0,0,0.6); box-shadow: 0 5px 20px rgba(0,0,0,0.6);}
Border-radius.com
box-shadow
http://badassideas.com/work/
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)
box-shadow.portfolio {-moz-box-shadow: 0 5px 20px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 5px 20px rgba(0,0,0,0.6);
box-shadow: 0 5px 20px rgba(0,0,0,0.6);}
Full solution: box-shadow.boxshadow {-moz-box-shadow: 3px 3px 10px #333;-webkit-box-shadow: 3px 3px 10px #333;box-shadow: 3px 3px 10px #333; /*standard*/
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333')"; /* For IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333'); /* For IE 5.5 - 7 */
}
text-shadow
http://www.bountybev.com/home.html
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
Full solution: text-shadow.textshadow h2 {text-shadow:1px 1px 2px rgba(48,80,82,0.8);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#305052')";
/* For IE 5.5 - 7 */filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#305052');
}
opacity
http://rustinjessen.com/weblog/833
opacity
• Tips & issues– Do not use on elements that would cover important content
• Browser Support– IE does not support– IE filter exists
opacity
#feature-meta {background:none repeat scroll 0 0 #3C4C55;
opacity:0.85;}
Full solution: opacity.opacity {background-color: #3C4C55;color: #fff;opacity: 0.5;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
/* IE8 only */filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
/* IE6, IE7, and IE8 */filter: alpha(opacity=20);}
Opacity Resources
http://www.delicious.com/denisejacobs/opacity
Lab Time
• Let’s add opacity to our example page.
rgba
http://aarronwalter.com/designer/
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 backgroundinstead of background-color for the regular color
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.gradient(startColorstr=#4CFF0000, endColorstr=#4CFF0000)";
/* filter for IE8 */filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFF0000, endColorstr=#4CFF0000);
/* filter for older IEs */}
multiple backgrounds
http://www.stunningcss3.com
multiple backgroundsbody {background-color: #5ABBCF;background: #5ABBCF url(../images/bokeh1.png)
no-repeat; /* fallback image */background: url(../images/bokeh4.png) no-
repeat, url(../images/bokeh3.png) no-repeat 10% 0, url(../images/bokeh2.png) no-repeat 20% 0, url(../images/bokeh1.png) no-repeat, url(../images/glow.png) no-repeat 90% 0, -moz-linear-gradient(0% 90% 90deg,#5ABBCF, #95E0EF);
background: url(../images/bokeh4.png) no-repeat, url(../images/bokeh3.png) no-repeat 10% 0, url(../images/bokeh2.png) no-repeat 20% 0, url(../images/bokeh1.png) no-repeat, url(../images/glow.png) no-repeat 90% 0, -webkit-gradient(linear, 0% 0%, 0% 90%, from(#95E0EF), to(#5ABBCF));
}
CSS3 for Presentation + UX: Extras
1. transform2. transitions3. animation (the webkits only)
Another Tip
Be subtle – it’s more effective
transform (2d)
http://www.zurb.com/playground/css3-polaroids/
2D Transformations
1. transform• rotate• scale• skew• translate• matrix
transform
• Tips & issues– Mozilla, webkit, and opera vendor prefixes; no standard yet.
• Browser Support– IE does not support, Opera 10.5 only
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.
#photos img {-webkit-transform: rotate(-2deg);-moz-transform: rotate(-2deg);-o-transform: rotate(-2deg);}
transform: rotate
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
transform/rotate: full solution.rotate {-moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg);-o-transform: rotate(-5deg); transform: rotate(-5deg); filter:
progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9961946980917455, M12=0.08715574274765817, M21=-0.08715574274765817, M22=0.9961946980917455);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455, M12=0.08715574274765817, M21=-0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand')";
zoom: 1;
transform/scale: Syntax breakdownThe generic syntax for transform is<-prefix->transform: type(<value>) type(<value>) type(<value>) type(<value>);
For scale specifically, here is the syntax:<-prefix->transform: scale(<width,height>)
Negative numbers will flip the element.
Example:#scale {transform:scale(1,0.5);}
transform/skew: Syntax breakdown
The generic syntax for transform is<-prefix->transform: type(<value>) type(<value>) type(<value>) type(<value>);
For skew specifically, here is the syntax:<-prefix->transform: skew(<x-axis,y-axis>)
Example:#skew {transform: skew(35deg);}
transform/translate: Syntax breakdown
The generic syntax for transform is<-prefix->transform: type(<value>) type(<value>) type(<value>) type(<value>);
For translate specifically, here is the syntax:<-prefix->transform: translate(<x-value, y-value>)
Example:#translate {transform:translate(10px, 20px);}
Transform: multipleYou can apply multiple transform properties to
one element.
Example:.enlargen:hover {-webkit-transform: translate(-50%, -50%) scale(2) rotate(0);
-moz-transform: translate(-50%, -50%) scale(2) rotate(0);
-o-transform: translate(-50%, -50%) scale(2) rotate(0);
transform: translate(-50%, -50%) scale(2) rotate(0);}
Tools: transform
• http://westciv.com/tools/transforms/index.html
• http://css3generator.com/
• http://css3please.com/
transition
http://designlovr.com/examples/dynamic_stack_of_index_cards/
* 3.6: no, 4.02 yes
transitions
You can create subtle transitions between hover states on elements. The transitions smooth out visual jumps.
transitionExample:#id_of_element {-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
animation
http://www.css3exp.com/moon/
animationdiv { animation-name: diagonal-slide; animation-duration: 5s; animation-iteration-count: 10; }
@keyframes diagonal-slide { from { left: 0; top: 0; } to { left: 100px; top: 100px; } }
Closing
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.
Instead of something like this…
makephotoshopfaster.com
In IE6In modern browsers
You give something like this
gowalla.com
Also remember
• Pay attention to your user demographics. Features for feature’s sake is a waste of energy, time (and money).
Today >> Tomorrow
>>
http://www.flickr.com/photos/trektrack/134157546/http://www.flickr.com/photos/meggers/2378288736/
Not everyone will be able to access your added experience layer from CSS3
http://www.flickr.com/photos/icanchangethisright/3687782204/
And those who do…
http://www.flickr.com/photos/jamiecampbell/446301597/
Will love you for ithttp://www.flickr.com/photos/erikogan/3481255/
http://www.flickr.com/photos/soerenheuer/17879000/
Resources
delicious.com/denisejacobs/css3resources
CSSDetectiveGuide.comtwitter.com/cssdetective
Book Love 1
InterActWithWebStandards.comtwitter.com/waspinteract
Book Love 2
denisejacobs.com
twitter.com/denisejacobs
slideshare.net/denisejacobs
http://www.flickr.com/photos/27620885@N02/2609974180/