The document contains comments from readers of a Smashing Magazine article on CSS3. The readers express hesitation to use CSS3 due to lack of browser support but also excitement for its possibilities. One argues for embracing differences in browsers rather than trying to make experiences consistent. Another says they will have to wait years before clients catch up to fully use CSS3.

2. Take Your Design To The Next Level With CSS3 j.mp/smashingcss3

3. Fearful forabeautifulweb.com/s/598

4. “ ”
Great article, thanks but I think I’ll wait until
most of the browsers support CSS3 totally to
develop websites for my clients.
Comments from Smashing Magazine readers on j.mp/smashingcss3

5. “ ”
I hope CSS3 will be a standard in the near
future; right now you cant really use anything
of it ’cause not every browser supports it.
Comments from Smashing Magazine readers on j.mp/smashingcss3

6. “
CSS 3 rocks. Unfortunately we need to stay at
”
least 5 more years with CSS 2.1 if we want to
offer the same design to each user (which in
most ‘commercial’ projects is necessary).
Comments from Smashing Magazine readers on j.mp/smashingcss3

7. “
I can’t wait to use CSS3 in a real project.
Unfortunately I’m going to be stuck with
”
things as they are for the time being as I wait
for my clients to catch up. I expect this will be
the case for most designers for the time being.
Comments from Smashing Magazine readers on j.mp/smashingcss3

8. “ ”
CSS3 looks really good however because of IE
it will be long time before I start using it.
Comments from Smashing Magazine readers on j.mp/smashingcss3

9. These arguments are
complete and utter bullshit

10. If 98% of the users can’t see a
text-shadow, it doesn’t matter,
but it’ll be a nice enrichment
for the 2% of users who can

11. Tap Tap Tap taptaptap.com

12. Tweet CC tweetcc.com

13. Fusion Ads fusionads.net

14. Fusion Ads fusionads.net

15. Progressive means progressive

16. Progressive means progressive
Fall-back solutions (JS on and off?)

17. Barclaycard online admin barclaycard.co.uk

18. Progressive means progressive
Fall-back solutions (JS on and off?)
Enhancements only become features when the
majority of users are experiencing them

19. Progressive means progressive
Fall-back solutions (JS on and off?)
Enhancements only become features when the
majority of users are experiencing them
Use progressive enrichment in your dull, corporate sites
— the sexy stuff is an add-on, so it’s fine!

20. Do websites need to look
exactly the same in
every browser?

21. dowebsitesneedtolookexactlythesameineverybrowser.com

22. Do websites need to look
exactly the same in
every browser?
Websites will never look consistent across all browsers

23. Do websites need to look
exactly the same in
every browser?
Websites will never look consistent across all browsers
Rendering engines, operating systems, and user-specific
variables like screen settings and resolution will always
stand in the way

24. Jon Tan:
“
Designers will use [technologies like Flash, PDF,
and hacks like embedding type in images] [...]
because they won’t have to deal with painful
inconsistencies between user agents; the bane
”
of the browser wars, and in this instance, the
bane of web typography in what seems like
the age of the raster wars.
Display Type & the Raster Wars j.mp/jontan

25. Bookmark these URLs
Jon Tan: Web Typography tag jontangerine.com/log/tag/web-typography
Web Typography (Richard Rutter) webtypography.net

26. Do websites need to look
exactly the same in
every browser?
Websites will never look consistent across all browsers
Rendering engines, operating systems, and user-specific
variables like screen settings and resolution will always
stand in the way
So stop trying to reach the unreachable!
Embrace the differences

27. Usability vs. aesthetics
Usability / accessibility / functionality
= very important

28. Usability vs. aesthetics
Usability / accessibility / functionality
= very important
But don’t underestimate the importance of beauty!

29. The experience

30. The experience
Beauty is the experience’s visual layer

31. The experience
Beauty is the experience’s visual layer
Visually pleasing layer = more fulfilling user experience

32. The experience
Beauty is the experience’s visual layer
Visually pleasing layer = more fulfilling user experience
Functionality leads to usage; aesthetics lead to emotion

33. The experience
Beauty is the experience’s visual layer
Visually pleasing layer = more fulfilling user experience
Functionality leads to usage; aesthetics lead to emotion
The experience layer

34. The experience
Beauty is the experience’s visual layer
Visually pleasing layer = more fulfilling user experience
Functionality leads to usage; aesthetics lead to emotion
The experience layer
(See Dan Mall’s FOWD presentation:
events.carsonified.com/fowd/2008/newyork/videos/dan-mall/)

35. The experience layer
“
Our emotions change the way we think
”
and serve as constant guides to appropriate
behaviour, steering us away from the bad
and guiding us towards the good.
Donald Norman, Emotional Design

36. Variety in web design.
I can haz it?

38. BORING

39. BORING

40. BORING

41. BORING

42. BORING

43. BORING

44. BORING

45. BORING

46. BORING

48. Who’s pushing things forward?

49. Who’s pushing things forward?
Tim Van Damme, Made By Elephant
Mike Kus, Carsonified
Miguel Ripoll, Cesser Digital
Jason Santa Maria
Matthew Smith, Squared Eye

50. Who’s pushing things forward?
Tim Van Damme, Made By Elephant
Mike Kus, Carsonified
Miguel Ripoll, Cesser Digital
Jason Santa Maria
Matthew Smith, Squared Eye

51. Made By Elephant madebyelephant.com

52. Atebits atebits.com

53. Atebits atebits.com/tweetie-mac/

54. 24 Ways 24ways.org

55. Who’s pushing things forward?
Tim Van Damme, Made By Elephant
Mike Kus, Carsonified
Miguel Ripoll, Cesser Digital
Jason Santa Maria
Matthew Smith, Squared Eye

56. Stack Overflow stackoverflow.carsonified.com

57. Carsonified Events events.carsonified.com

58. Who’s pushing things forward?
Tim Van Damme, Made By Elephant
Mike Kus, Carsonified
Miguel Ripoll, Cesser Digital
Jason Santa Maria
Matthew Smith, Squared Eye

59. Born Living bornliving.com

60. Who’s pushing things forward?
Tim Van Damme, Made By Elephant
Mike Kus, Carsonified
Miguel Ripoll, Cesser Digital
Jason Santa Maria
Matthew Smith, Squared Eye

61. Jason Santa Maria jasonsantamaria.com

62. Who’s pushing things forward?
Tim Van Damme, Made By Elephant
Mike Kus, Carsonified
Miguel Ripoll, Cesser Digital
Jason Santa Maria
Matthew Smith, Squared Eye

63. Squared Eye squaredeye.com/work/featured/family-life-network/

64. Squared Eye squaredeye.com/work/featured/family-life-network/

65. Squared Eye squaredeye.com/work/featured/family-life-network/

66. Squared Eye squaredeye.com/work/featured/family-life-network/

67. Squared Eye squaredeye.com/work/featured/family-life-network/

68. Squared Eye squaredeye.com/work/featured/family-life-network/

69. The nicer your site looks...

70. The nicer your site looks...
... the longer your visitors will look at it...

71. The nicer your site looks...
... the longer your visitors will look at it...
... the longer your visitors look at it, the longer they’ll
spend on your website...

72. The nicer your site looks...
... the longer your visitors will look at it...
... the longer your visitors look at it, the longer they’ll
spend on your website...
... and the longer they spend on your website, the easier
it will be for you to sell them your product or service

73. Web design, for me, is
predominantly full of boring,
unimaginative work.
Let’s change that.

75. N G
IN l :
A R
W oversia
con tr t
at en !
em ing
st ch
ap p roa

76. Validation is irrelevant

77. Yes, yes. Bear with me...

78. Yes, yes. Bear with me...
New techniques won’t validate...

79. Validation errors jigsaw.w3.org/css-validator

80. Validator suggestions css3.info/the-big-css3-validation-debate/

81. The CSS3 Validator could offer the option to ignore
vendor specific extensions
Validator suggestions css3.info/the-big-css3-validation-debate/

82. The CSS3 Validator could offer the option to ignore
vendor specific extensions
The CSS3 Validator could highlight vendor specific
extensions with a warning, rather than an error
Validator suggestions css3.info/the-big-css3-validation-debate/

83. The CSS3 Validator could offer the option to ignore
vendor specific extensions
The CSS3 Validator could highlight vendor specific
extensions with a warning, rather than an error
The validator could mark such code as
‘experimental’ rather than an error or warning
Validator suggestions css3.info/the-big-css3-validation-debate/

84. Yes, yes. Bear with me...
New techniques won’t validate...
... and it doesn’t matter!

85. Yes, yes. Bear with me...
New techniques won’t validate...
... and it doesn’t matter!
Know that you can break the rules

86. Jon Hicks hicksdesign.co.uk/journal

87. Jon Hicks hicksdesign.co.uk/journal

88. #tops b {
display:block;
float:right;
width:333px;
height:15px;
background:url(/images/paulsmith.gif) no-repeat;
}
hicksdesign.co.uk/css/layout-9.css

89. <b>

90. Yes, yes. Bear with me...
New techniques won’t validate...
... and it doesn’t matter!
Know that you can break the rules
Validation does not equal conformity to Web Standards:
you can build a site with tables and a complete lack of
semantics yet still have it validate

92. Validation

93. does

94. not

95. equal

96. conformity

97. to

98. Web

99. Standards

101. We’re looking at it in
the wrong way

102. We’re looking at it in
the wrong way
“We can’t ensure that all users get the same experience.”
// negative

103. We’re looking at it in
the wrong way
“We can’t ensure that all users get the same experience.”
// negative
“We can add further enhancements above the norm.”
// positive

104. We’re looking at it in
the wrong way
“We can’t ensure that all users get the same experience.”
// negative
“We can add further enhancements above the norm.”
// positive
The flexibility the web offers is a blessing, not a curse

105. We’re looking at it in
the wrong way
“We can’t ensure that all users get the same experience.”
// negative
“We can add further enhancements above the norm.”
// positive
The flexibility the web offers is a blessing, not a curse
Ensure a good experience for most; a great one for some

106. It’s not just about
making things look pretty.
Forward-thinking code means
a future-proof website.

107. 10%

108. 10% of users today will be
100% of users tomorrow

109. 10% of users today will be
100% of users tomorrow
The amount of people who see your enrichments
might seem small right now, but that number
will only grow, not decline

111. @

112. My site before Firefox 3.5 (no @font-face support) elliotjaystocks.com

113. My site after Firefox 3.5 (with @font-face support) elliotjaystocks.com

114. 10% of users today will be
100% of users tomorrow
The amount of people who see your enrichments
might seem small right now, but that number
will only grow, not decline
It’s our duty to push forward-thinking development;
to make the most of the tools made available to us
and our users

115. 10% of users today will be
100% of users tomorrow
The amount of people who see your enrichments
might seem small right now, but that number
will only grow, not decline
It’s our duty to push forward-thinking development;
to make the most of the tools made available to us
and our users
New CSS techniques will never become mainstream
if we designers aren’t using them

116. All the small things

117. All the small things
CSS2.1 / CSS3 etc. allows you to write less code, speeds
up development time, and generally makes life easier

118. All the small things
CSS2.1 / CSS3 etc. allows you to write less code, speeds
up development time, and generally makes life easier
Consider attribute selectors

119. <ul class="blogroll">
<li>
<a href="http://shauninman.com">Shaun Inman</a>
</li>
<li>
<a href="http://mezzoblue.com">Dave Shea</a>
</li>
<li>
<a href="http://hicksdesign.co.uk">Jon Hicks</a>
</li>
</ul>
HTML with no need for class names on each <li>

120. ul.blogroll li a[href="http://shauninman.com"]{
background:url(http://shauninman.com/favicon.ico);
}
Attribute selectors

121. All the small things
CSS2.1 / CSS3 etc. allows you to write less code, speeds
up development time, and generally makes life easier
Consider attribute selectors
Consider nth-child selectors

122. Fusion Ads fusionads.net/blog/

123. All the small things
CSS2.1 / CSS3 etc. allows you to write less code, speeds
up development time, and generally makes life easier
Consider attribute selectors
Consider nth-child selectors
And if a browser doesn’t support these things...
... so what?

124. Thomas Silkjær theundersigned.net (Safari)

125. ul.gallery li:hover {
webkit-transform:rotate:(-2.5deg);
}
theundersigned.net/wp-content/themes/default/style.css

126. Thomas Silkjær theundersigned.net (Firefox)

127. Progressive
“ ”
Favoring or advocating progress, change,
improvement, or reform, as opposed to
wishing to maintain things as they are.
dictionary.reference.com/browse/progressive

128. Don’t fear degradation:
plan for it

130. Slides will be available online at
elliotjaystocks.com/speaking/

132. Shameless plug!
Sexy Web Design
by Elliot Jay Stocks
Expert reviewers: Jina Bolton & Dan Rubin
Published by SitePoint

135. Thank you!
elliotjaystocks.com | twitter.com/elliotjaystocks
Pin-ups image by Mauren Veras - flickr.com/photos/mauren/2298724158/
Paint textures from The Stock Exchange - sxc.hu
Set in FS Clerkenwell - fontsmith.com/font_details.php?font_num=251