Slides from my appearance at Web Directions South 09: a talk that combines my presentations 'Stop Worrying & Get On With It' and 'Progressive Enhancement & Intentional Degradation'.

2. What are we worried about?

3. What are we worried about?
Some users see ‘broken’ sites.

4. What are we worried about?
Some users see ‘broken’ sites.
Don’t build broken sites: basic support can be
offered as long as it doesn’t look broken. If it’s a real
problem for older browsers, use universalie6.css, a
warning message, or something similar

5. What are we worried about?
Some users see ‘broken’ sites.
Don’t build broken sites: basic support can be
offered as long as it doesn’t look broken. If it’s a real
problem for older browsers, use universalie6.css, a
warning message, or something similar
But this visual treatment is integral to the brand!

6. What are we worried about?
Some users see ‘broken’ sites.
Don’t build broken sites: basic support can be
offered as long as it doesn’t look broken. If it’s a real
problem for older browsers, use universalie6.css, a
warning message, or something similar
But this visual treatment is integral to the brand!
Then include it (if not, don’t worry)

7. What are we worried about?
Some users see ‘broken’ sites.
Don’t build broken sites: basic support can be
offered as long as it doesn’t look broken. If it’s a real
problem for older browsers, use universalie6.css, a
warning message, or something similar
But this visual treatment is integral to the brand!
Then include it (if not, don’t worry)
Missing rounded corners don’t matter!

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

9. Fearful forabeautifulweb.com/s/598

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

11. 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
“ ”

12. 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 (what in
most ‘commercial’ projects is necessary).
Comments from Smashing Magazine readers on j.mp/smashingcss3
“ ”

13. 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
“ ”

14. 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
“ ”

15. These arguments are
complete and utter bullshit

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

17. Tap Tap Tap taptaptap.com

18. Tweet CC tweetcc.com

19. Fusion Ads fusionads.net

20. Fusion Ads fusionads.net

21. Progressive means progressive

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

23. Barclaycard online admin barclaycard.co.uk

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

25. 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!

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

27. dowebsitesneedtolookexactlythesameineverybrowser.com

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

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

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

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

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

33. Enhancement: reward

34. Enhancement: reward
Visual treats for the more capable browser

35. Degradation: punishment

36. Degradation: punishment
The removal of a treat

37. Degradation: punishment
The removal of a treat
The designer giveth and the designer taketh away!

38. Intention

39. Intention
An awareness of browser capabilities and the
appreciation that sites don’t need to look in
the same in each one.
Stuff and Nonsense stuffandnonsense.co.uk

40. Usability vs. aesthetics

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

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

43. The experience

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

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

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

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

48. 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/)

49. 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
“ ”

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

52. BORING

53. BORING

54. BORING

55. BORING

56. BORING

57. BORING

58. BORING

59. BORING

60. BORING

62. Who’s pushing things forward?

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

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

65. Made By Elephant madebyelephant.com

66. Atebits atebits.com

67. Atebits atebits.com/tweetie-mac/

68. 24 Ways 24ways.org

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

70. Stack Overflow stackoverflow.carsonified.com

71. Carsonified Events events.carsonified.com

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

73. Born Living bornliving.com

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

75. Jason Santa Maria jasonsantamaria.com

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

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

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

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

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

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

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

83. The nicer your site looks...

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

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

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

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

89. WARNING:
controversial
statement
approaching!

90. Validation is irrelevant

91. Yes, yes. Bear with me...

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

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

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

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

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

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

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

99. Yes, yes. Bear with me...
New techniques won’t validate...
... and it doesn’t matter!
Recognise the value of intentional invalidation

100. Jon Hicks hicksdesign.co.uk/journal

101. Jon Hicks hicksdesign.co.uk/journal

102. <b>

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

104. Yes, yes. Bear with me...
New techniques won’t validate...
... and it doesn’t matter!
Recognise the value of intentional invalidation
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

106. Validation

107. does

108. not

109. equal

110. conformity

111. to

112. Web

113. Standards

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

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

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

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

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

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

121. 10%

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

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

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

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

127. @

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

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

130. A personal
typographic journey...

131. Note: CS3 panel shown
Dreamweaver adobe.com/products/dreamweaver

132. The early days...
... Dreamweaver...
... confusion!

133. The early days...
... Dreamweaver...
... confusion!
The choice of fonts appeared
to be system-wide

134. The early days...
... Dreamweaver...
... confusion!
The choice of fonts appeared
to be system-wide
It wasn’t clear about web-safe fonts

135. The early days...
... Dreamweaver...
... confusion!
The choice of fonts appeared
to be system-wide
It wasn’t clear about web-safe fonts
To an extent, Dreamweaver
is still guilty

136. The allure of Flash

137. The allure of Flash
You can use any font you like

138. The allure of Flash
You can use any font you like
Layout freedom, a la print design
(vs. HTML inconsistency)

139. The allure of Flash
You can use any font you like
Layout freedom, a la print design
(vs. HTML inconsistency)
Hence type can be presented
as intended

140. Back to basics: HTML

141. Back to basics: HTML
Accessible:
screenreader-friendly and allows for resizing

142. Back to basics: HTML
Accessible:
screenreader-friendly and allows for resizing
Updatable:
the source text dictates the final render

143. Back to basics: HTML
Accessible:
screenreader-friendly and allows for resizing
Updatable:
the source text dictates the final render
Simple:
HTML and CSS — that’s it!

144. Image replacement

145. Image replacement
PROS
It looks good
It gives control over other elements besides type

146. Image replacement
PROS
It looks good
It gives control over other elements besides type
CONS
Difficult to update
Inaccessible in some situations
Potentially it differs from the source code

147. sIFR at work on Jason Santa Maria’s site jasonsantamaria.com

148. sIFR

149. sIFR
The best of both worlds: the accessibility and
‘selectability’ of HTML but with (some of*) the benefits
of Flash-based rendering.
* = Layout is still determined by HTML

150. sIFR
The best of both worlds: the accessibility and
‘selectability’ of HTML but with (some of*) the benefits
of Flash-based rendering.
Gracefully degrades for users without Flash / JS.
* = Layout is still determined by HTML

151. sIFR
The best of both worlds: the accessibility and
‘selectability’ of HTML but with (some of*) the benefits
of Flash-based rendering.
Gracefully degrades for users without Flash / JS.
It’s brilliant, but essentially it’s a hack; not a solution.
* = Layout is still determined by HTML

152. Mike Davidson, mikeindustries.com/blog/sifr
While sIFR gives us better typography today, it is
clearly not the solution for the next 20 years.
It is but a nice stopgap for people who value the
importance of typography and don’t want to wait 1, 5,
or 10 years for browser makers, OS vendors, and type
foundries to figure out a better solution.
The moment that happens however, sIFR will lift right
out and give way to whatever other method is available.
~ Mike Davidson
“
”

153. Mike Davidson, mikeindustries.com/blog/sifr
While sIFR gives us better typography today, it is
clearly not the solution for the next 20 years.
It is but a nice stopgap for people who value the
importance of typography and don’t want to wait 1, 5,
or 10 years for browser makers, OS vendors, and type
foundries to figure out a better solution.
The moment that happens however, sIFR will lift right
out and give way to whatever other method is available.
~ Mike Davidson
“
”

154. Mike Davidson, mikeindustries.com/blog/sifr
While sIFR gives us better typography today, it is
clearly not the solution for the next 20 years.
It is but a nice stopgap for people who value the
importance of typography and don’t want to wait 1, 5,
or 10 years for browser makers, OS vendors, and type
foundries to figure out a better solution.
The moment that happens however, sIFR will lift right
out and give way to whatever other method is available.
~ Mike Davidson
“
”

155. @font-face

156. @font-face
Originated in the CSS2 spec, despite its general
association with CSS3

157. @font-face
Originated in the CSS2 spec, despite its general
association with CSS3
Extremely simple to implement

158. @font-face
Originated in the CSS2 spec, despite its general
association with CSS3
Extremely simple to implement
Current support:
Safari (since 3.1)
Firefox 3.5
Opera 10

159. @font-face
Originated in the CSS2 spec, despite its general
association with CSS3
Extremely simple to implement
Current support:
Safari (since 3.1)
Firefox 3.5
Opera 10
Has some piracy issues (more on that in a sec!)

160. Jos Buivenga’s fonts josbuivenga.demon.nl

162. IE4!!!

163. Microsoft’s EOT
(Embedded Open Type)

164. Microsoft’s EOT
(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)

165. Microsoft’s EOT
(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy

166. Microsoft’s EOT
(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval
as a new standard. As far as I know, it was rejected

167. Microsoft’s EOT
(Embedded Open Type)
Supported since IE4 (but not in IE8 yet)
Font encoding protects against piracy
EOT was submitted to the W3C for approval
as a new standard. As far as I know, it was rejected
WEFT: Web Embedding Fonts Tool for making
.eot files

168. The issues

169. The issues
Protection is needed for font foundries to
counteract font piracy (as with EOT)

170. The issues
Protection is needed for font foundries to
counteract font piracy (as with EOT)
How do we cope with licenses? Mozilla proposes
including license data in HTTP headers

171. The issues
Protection is needed for font foundries to
counteract font piracy (as with EOT)
How do we cope with licenses? Mozilla proposes
including license data in HTTP headers
More fonts need to be made available so that the choice
can improve. In its current state, the limited choice is
turning into not much more than an alternative list of
web-safe fonts

172. What needs to happen?

173. What needs to happen?
Font foundries need to be protected by the technology,
as they are with EOT

174. What needs to happen?
Font foundries need to be protected by the technology,
as they are with EOT
Font embedding is the path to typographic
enlightenment on the web... it now has multiple
browser support

175. What needs to happen?
Font foundries need to be protected by the technology,
as they are with EOT
Font embedding is the path to typographic
enlightenment on the web... it now has multiple
browser support
Start using font embedding now!

176. 2009: the year web typography
started to grow up

177. Typekit typekit.com

178. Fontdeck fontdeck.com

179. Kernest kernest.com

180. Typekit, FontDeck, et al
Multiple foundries

181. Typotheque typotheque.com

182. Typotheque, et al
Foundry-specific system

183. The font-as-service: ilovetypography.com/the-font-as-service/
Some recent articles I’ve
written on the subject
More reasons to get excited about Typekit: elliotjaystocks.com

184. .webfont

185. .webfont
This is where it gets exciting!

186. .webfont
This is where it gets exciting!
A recommendation for a new standard

187. .webfont
This is where it gets exciting!
A recommendation for a new standard
Two files: font data + info.xml

188. .webfont
This is where it gets exciting!
A recommendation for a new standard
Two files: font data + info.xml
Built-in copyright protection

189. Some handy CSS3 features

190. Some handy CSS3 features
Advanced layout

191. Jina Bolton creatingsexystylesheets.com/css3andwhatcouldbe.zip

192. Some handy CSS3 features
Advanced layout
Backgrounds

193. div.shoutbox {
background:
url(top.gif) top left no-repeat,
url(middle.gif) left repeat-y,
url(bottom.gif) bottom left no-repeat
}
Multiple background images

194. Multiple background images
div.shoutbox {
background:
url(top.gif) top left no-repeat,
url(middle.gif) left repeat-y,
url(bottom.gif) bottom left no-repeat
}

195. Multiple background images
div.shoutbox {
background:
url(top.gif) top left no-repeat,
url(middle.gif) left repeat-y,
url(bottom.gif) bottom left no-repeat
}

196. Multiple background images
div.shoutbox {
background:
url(top.gif) top left no-repeat,
url(middle.gif) left repeat-y,
url(bottom.gif) bottom left no-repeat
}

197. Some handy CSS3 features
Advanced layout
Backgrounds
Borders

198. Borders: radius
div.vcard {
border-radius:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}

199. Borders: image
div.vcard {
border-image:url(border.png) 10 10 10 10 round round;
}

200. Some handy CSS3 features
Advanced layout
Backgrounds
Borders
Box shadows

201. Borders: image
div.info {
box-shadow:10px 10px 5px #888;
}

202. Some handy CSS3 features
Advanced layout
Backgrounds
Borders
Box shadows
Multi-column layout

203. Multiple column layouts
div.article {
column-count:2;
column-gap:20px
}

204. Some handy CSS3 features
Advanced layout
Backgrounds
Borders
Box shadows
Multi-column layout
Selectors

205. Nth child selectors
tr:nth-child(odd) td {
background:#999
}

206. Some handy CSS3 features
Advanced layout
Backgrounds
Borders
Box shadows
Multi-column layout
Selectors
Text shadows

207. Text shadows
p {
text-shadow:1px 2px 1px #000
}

208. Sam Brown sam.brown.tc

209. Tim Van Damme timvandamme.com

210. Web Directions webdirections.org

211. All the small things

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

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

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

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

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

217. Fusion Ads fusionads.net/blog/

218. 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?

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

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

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

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

223. Don’t fear degradation:
plan for it

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

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

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