CSS3 not only helps the visual layer of websites, but also the experience layer as well.

1. Are You {css3;}
Experienced?
Denise R.
Jacobs
Rich Web
Experience
Fort
Lauderdale
December 2010

2. The Twitter Experience
I am:
@denisejacobs
We’re at:
@rwx #rwx
And I’m talkin’ jive about:
#css3ux

3. 2008: the start of the Summer of CSS3 Love
http://www.flickr.com/photos/victoriapeckham/2091704802/

4. CSS3 is super groovy, man
• Easier implementation of visual effects
• Effects that enhance the user
experience

5. “Do websites need to look exactly
the same in every browser?”

6. http://dowebsitesneedtolookexactlythesameineverybrowser.com/

7. “Do websites
need to be
experienced
exactly the
same in every
browser?”

8. http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/

10. We haven’t kicked the habit

11. Design and Development Approach
Many folks still design their sites as if users
are still…

12. On one device

13. In one environment

14. Whereas, nowadays…

15. The Age of Emotional
& Experience Design

16. 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 connection
to it. “
‐ Wikipedia
(with liberal edits)

17. 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)

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

19. Good looks +
http://www.flickr.com/photos/spierzchala/66232046/

20. Delight +
http://www.flickr.com/photos/cristeenq/2360466038/

21. Compatibility =
http://www.flickr.com/photos/trektrack/134157546/

22. A strong positive user experience
http://www.flickr.com/photos/meggers/2378288736/

23. 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/

24. So the question is…
Are You {css3;}
Experienced?
http://www.flickr.com/photos/exquisitur/2549355743/

25. The website “trifle”
Experience
Style
Markup

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.

29. Progressive Enhancement is the way
Css3 b

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

35. While another gets this
• Modernizr article example

36. And another gets this
• Modernizr article example

37. But they all feel this

38. Unique convergence point

39. However, there are issues…
http://www.flickr.com/photos/cybervin/266632074/

40. Relationship Status:
It’s Complicated

41. Still a working draft

42. Validation (or lack thereof)

43. Uneven browser support
http://www.evotech.net/blog/2009/02/css-browser-support/

44. And code bloat…
Ideally: Reality:
a.polaroid:active {
a.polaroid:active z-index: 999;
{ border-color: #6A6A6A;
-webkit-box-shadow: 15px
z-index: 999; 15px 20px rgba(0,0, 0,
0.4);
border-color:
-moz-box-shadow: 15px
#6A6A6A; 15px 20px rgba(0,0, 0,
0.4);
box-shadow: 15px box-shadow: 15px 15px
15px 20px 20px rgba(0,0, 0,
rgba(0,0, 0, 0.4);
-webkit-transform:
0.4); rotate(0deg)
transform: scale(1.05);
-moz-transform:
rotate(0deg) rotate(0deg)
scale(1.05); scale(1.05);
transform: rotate(0deg)
} scale(1.05);
}

45. Oh my!

46. CSS3 Support
• X% Now
• 2 • X% in 6 months
• 4 • X % in 2 years
• 9 • X % in 4 years
• 100% Who knows?

47. CSS3 Specifications

48. Browser Compatibility Charts
http://www.findmebyip.com/litmus

49. Cross- Browser Testers

50. Some Useful Tips
http://www.flickr.com/photos/nostri-imago/3216359107/

51. Progressive techniques
• A proper stack
• Multiple stylesheets
• Targeted styles (advanced selectors)

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.

53. A Proper Stack
.gradient {
color: #fff;

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

60. Styling in multiples
@import 'reset.css';
@import 'structure.css';
@import 'typography.css';
@import 'widgets.css';

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/

62. Be advanced
Advanced selectors are a good way to
specifically target styles for modern
browsers.

63. Advanced CSS selectors
Remember these from CSS2.1?
• E + F: Sibling
• E > F: Child
• Attribute
• pseudo‐element: : before, : after

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

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

66. Some tools

67. Modernizr.com

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/

72. CSS3 for Visual Presentation
1. @font‐face
2. gradient
3. border‐image

73. @font-face
http://sickdesigner.com/

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.

76. @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');
}

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.

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

79. 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;

80. FontSquirrel.com
http://www.fontsquirrel.com/fontface/generator

81. gradient
http://raymondjay.com/

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

83. gradient
#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));
}

84. Gradient: Syntax breakdown

85. 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.jpg
is 1px wide */
background-image: -moz-linear-gradient(top,
#07407c, #aaaaaa);
background-image: -webkit-gradient(linear,left
top,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(s
tartColorStr='#07407c',
EndColorStr='#aaaaaa');
/* IE7- */

86. Colorzilla gradient tool
http://www.colorzilla.com/gradient-editor/

87. border-image
http://www.zurb.com/playground/awesome-overlays

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

89. Border-image.com

90. CSS3 for Presentation + UX: Core
1. border‐radius
2. box‐shadow
3. text‐shadow
4. opacity
5. rgba color
6. multiple background images

91. border-radius
http://www.denisejacobs.com/cdgexamples/chapter10/

92. border-radius
• Tips & issues
– Different syntax for mozilla, webkit,
and opera browsers
• Browser Support
– Older IEs do not support, Opera: 10.5
only

93. border-radius syntax
Syntax comparison breakdown:
• ‐moz allows multiple values for each position
• ‐webkit individual values
• Standard is like mozilla

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

95. 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);
}

96. Border-radius.com

97. box-shadow
http://badassideas.com/work/

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)

99. 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);
}

100. 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.Sh
adow(Strength=4, Direction=135,
Color='#333333')"; /* For IE 8 */
filter:
progid:DXImageTransform.Microsoft.Sha
dow(Strength=4, Direction=135,
Color='#333333'); /* For IE 5.5 - 7
*/
}

101. text-shadow
http://www.bountybev.com/home.html

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

103. Full solution: text-shadow
.textshadow h2 {
text-shadow:1px 1px 2px
rgba(48,80,82,0.8);
-ms-filter:
"progid:DXImageTransform.Microsoft.Sh
adow(Strength=2, Direction=135,
Color='#305052')";
/* For IE 5.5 - 7 */
filter:
progid:DXImageTransform.Microsoft.Sha
dow(Strength=2, Direction=135,
Color='#305052');
}

104. opacity
http://rustinjessen.com/weblog/833

105. opacity
• Tips & issues
– Do not use on elements that would
cover important content
• Browser Support
– IE does not support
– IE filter exists

106. opacity
#feature-meta {
background:none repeat scroll 0 0
#3C4C55;
opacity:0.85;
}

107. Full solution: opacity
.opacity {
background-color: #3C4C55;
color: #fff;
opacity: 0.5;
-ms-filter:
"progid:DXImageTransform.Microsoft.Al
pha
(opacity=20)";
/* IE8 only */
filter:
progid:DXImageTransform.Microsoft.Alp
ha
(opacity=20);
/* IE6, IE7, and IE8 */
filter: alpha(opacity=20);
}

108. Opacity Resources
http://www.delicious.com/denisejacobs/
opacity

109. Lab Time
• Let’s add opacity to our example page.

110. rgba
http://aarronwalter.com/designer/

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 */
}

113. multiple backgrounds
http://www.stunningcss3.com

114. multiple backgrounds
body {
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));
}

115. CSS3 for Presentation + UX: Extras
1. transform
2. transitions
3. animation (the webkits only)

116. Another Tip
Be subtle – it’s more effective

117. transform (2d)
http://www.zurb.com/playground/css3-polaroids/

118. 2D Transformations
1. transform
• rotate
• scale
• skew
• translate
• matrix

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.

121. transform: rotate
#photos img {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
}

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

123. 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.Matri
x(M11=0.9961946980917455,
M12=0.08715574274765817, M21=-
0.08715574274765817,
M22=0.9961946980917455,
sizingMethod='auto expand')";

124. transform/scale: Syntax breakdown
The 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);

125. 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);
}

126. 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);
}

127. Transform: multiple
You 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);
}

128. Tools: transform
• http://westciv.com/tools/transforms/ind
ex.html
• http://css3generator.com/
• http://css3please.com/

129. transition
* 3.6: no, 4.02 yes
http://designlovr.com/examples/dynamic_stack_of_index_cards/

130. transitions
You can create subtle transitions between
hover states on elements. The
transitions smooth out visual jumps.

131. transition
Example:
#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;
}

132. animation
http://www.css3exp.com/moon/

133. animation
div {
animation-name: diagonal-slide;
animation-duration: 5s;
animation-iteration-count: 10;
}
@keyframes diagonal-slide {
from { left: 0; top: 0; }
to { left: 100px; top: 100px; }
}

134. Closing

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

137. You give something like this
gowalla.com

138. Also remember
• Pay attention to your user
demographics. Features for feature’s
sake is a waste of energy, time (and
money).

139. Today >> Tomorrow
>>
http://www.flickr.com/photos/trektrack/134157546/
http://www.flickr.com/photos/meggers/2378288736/

140. Not everyone will be able to access your
added experience layer from CSS3
http://www.flickr.com/photos/icanchangethisright/3687782204/

141. And those who do…
http://www.flickr.com/photos/jamiecampbell/446301597/

142. Will love you for it
http://www.flickr.com/photos/erikogan/3481255/

143. Resources
delicious.com/denisejacobs/
css3resources
http://www.flickr.com/photos/soerenheuer/17879000/

144. Book Love 1
CSSDetectiveGuide.com
twitter.com/cssdetective

145. Book Love 2
InterActWithWebStandards.com
twitter.com/waspinteract

146. denisejacobs.com
twitter.com/denisejacobs
slideshare.net/denisejacobs

147. http://www.flickr.com/photos/27620885@N02/2609974180/