Web Directions East08 Presentation slides. Presentation slides by Dan Cederholm

1. IMPLEMENTING DESIGN
BULLETPROOF
A-Z
by Dan Cederholm

2. SimpleBits

3. HAND-CRAFTED
PIXELS & TEXT.

4. CRAFTSMANSHIP

5. VERMONT

6. “ A product labeled ‘Made in Vermont’—
whether herb-infused maple syrup,
pineapple pepper jam, or chai water
buffalo yogurt—is worth 10 percent more
than the same product made elsewhere.”
—BOSTON GLOBE, The brand called Vermont
http://boston.com/news/globe/ideas/articles/2003/10/12/the_brand_called_vermont

7. When something is
well-crafted, it reflects that a human
was behind its design.

8. CRAFTSMANSHIP
in IMPLEMENTATION
HTML CSS Javascript GIF JPG PNG

10. CASE STUDY
• Bulletproof
• Progressive enrichment
• Reevaluating past methods

11. BULLETPROOF
• Flexibility
• Adaptable to multiple scenarios
• Adding detail without complexity

12. BROWSER
LANDSCAPE

13. PROGRESSIVE ENHANCEMENT
{ behavior }

14. PROGRESSIVE ENRICHMENT
{ style }

15. REALLY COOL STUFF
THAT DOESN’T
WORK IN IE :(

16. REEXAMINING PAST
METHODS & HABITS

17. CASE STUDY
• Bulletproof
• Progressive enrichment
• Reevaluating past methods

18. MY LOCAL COFFEE SHOP
http://www.flickr.com/photos/dankamminga/1678248602/

19. I LOVE COFFEE.

20. POWER OF
THE BEAN ™

21. 82º 16º
ICED HOT

23. ICEDORHOT.COM

24. Aa

25. A
ANCHOR LINKS WITH
META INFORMATION
{ bulletproof }

27. <li><a href=quot;/lattequot;>Latte <em>12</em></a></li>
li a {
display: block;
position: relative;
}
li a em {
position: absolute;
top: 0;
right: 0;
}

30. <li><a href=quot;/lattequot;><em>12</em> Latte</a></li>
li a {
display: block;
}
li a em {
float: right;
}

32. <li>
<a href=quot;/lattequot;>
<span>Latte</span> <em>12</em>
</a>
</li>
li a {
display: block;
overflow: hidden;
}
li a span {
float: left;
}
li a em {
float: right;
}

34. Bb

35. B
BORDER-RADIUS
{ progressive enrichment }

37. CSS3
.mod {
border-radius: 4px 4px;
}

38. CSS3

39. Vendor-Specific Properties
.mod {
-webkit-border-radius: 4px 4px;
-moz-border-radius: 4px 4px;
}

41. #nav li a {
float: left;
padding: .5em 1em;
color: #fff;
background: #dd5543;
-webkit-border-radius: .4em .4em;
-moz-border-radius: .4em .4em;
}

42. glass.png

44. #nav li.selected a {
float: left;
padding: .5em 1em;
color: #fff;
background: #dd5543 url(glass.png)
repeat-x 0 50%;
-webkit-border-radius: .4em .4em;
-moz-border-radius: .4em .4em;
}

46. Firefox 2

48. master.css
screen.css enriched.css
ie.css

49. master.css enriched.css
#nav li a { #nav li a {
float: left; border-radius: .4em .4em;
padding: .5em 1em; -webkit-border-radius:
color: #fff; .4em .4em;
background: #dd5543; -moz-border-radius:
} .4em .4em;
}

50. enriched.css
#nav li a {
border-radius: .4em .4em;
-webkit-border-radius: .4em .4em;
-moz-border-radius: .4em .4em;
}

51. enriched.css
div.mod,
ol.cities li,
#nav li a {
border-radius: .4em .4em;
-webkit-border-radius: .4em .4em;
-moz-border-radius: .4em .4em;
}

52. WHAT ABOUT
OTHER BROWSERS?

54. Can get away with FF2 if
contrast is low enough.
Degrades nicely.
Great for prototyping
before carving out images.

55. Cc

56. C
COLOR TRANSPARENCY
WITH RGBa
{ progressive enrichment }

58. Opacity
a.city-over {
background-color: #000;
opacity: .7;
}
(sets opacity value for the element and all of its children)

60. RGBa
a.city-over {
background-color: rgba(0,0,0,.7);
}
(sets opacity value for background-color only)

62. RGBa
a.city-over {
background-color: #000;
background-color: rgba(0,0,0,.7);
}

63. master.css enriched.css
a.city-over {
a.city-over {
background-color:
background-color: #000;
rgba(0,0,0,.7);
}
}

64. Tiled PNG would reach
more browsers.
RGBa great for protoyping.

65. Dd

66. D
DO WEBSITES NEED
TO LOOK EXACTLY
THE SAME IN EVERY
BROWSER?

68. Websites don’t need
to look exactly
the same in every
browser.

69. D
DECISION-MAKERS
WHO GET IT

72. the pub people how-to faq store
simplebits
Dan Cederholm • Massachusetts • Twitter profile
h1:before {
content: url(/img/left.gif);
OWES 4 BEERS 36 IS OWED BEERS
}
Kevin Cornell ginader
h1:afteravatar, which
for this nifty new { for a really awesome idea
perfectly captures the goulish-like
content: url(/img/right.gif);
quality found in me and other insane
21 hours, 2 minutes ago
}
people.
3 days ago xybermatthew
for creating such a fun little app
snookca (foamee)
for blogging about CakePHP. 1 day, 15 hours ago
1 week, 3 days ago
juque
beep for foamee Dan (buuuurp)
for picking up the tab last night at 1 day, 18 hours ago
the Gulu Gulu.
3 weeks ago

73. the pub people how-to faq store
simplebits
Dan Cederholm • Massachusetts • Twitter profile
OWES 4 BEERS IS OWED 36 BEERS
Kevin Cornell ginader
for this nifty new avatar, which for a really awesome idea
perfectly captures the goulish-like
21 hours, 2 minutes ago
quality found in me and other insane
people.
3 days ago xybermatthew
for creating such a fun little app
snookca (foamee)
for blogging about CakePHP. 1 day, 15 hours ago
1 week, 3 days ago
juque
beep for foamee Dan (buuuurp)
for picking up the tab last night at 1 day, 18 hours ago
the Gulu Gulu.
3 weeks ago

74. IT’S OK
Tiny visual enhancements that do
not affect layout.
Techniques that make our lives
easier.

75. Ee

76. E
EASY-CLEARING
FLOATS
{ reexamining past methods }

77. 2008
FLOATS = FLEXIBILITY

78. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Quisque eget augue. Praesent
ac purus. Ut risus. Ut mauris ligula, dictum
vulputate, ornare id, suscipit at, nisi. Quisque
et est et urna consectetuer adipiscing. Mauris
ac arcu. Sed quis enim eu elit faucibus
vehicula. Aliquam sodales dui sit amet ligula.
Vivamus leo.

79. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Quisque eget augue. Praesent
ac purus. Ut risus. Ut mauris ligula, dictum
vulputate, ornare id, suscipit at, nisi. Quisque
et est et urna consectetuer adipiscing. Mauris
ac arcu. Sed quis enim eu elit faucibus
vehicula. Aliquam sodales dui sit amet ligula.
Vivamus leo.

80. easy-clearing
.clearfix:after {
content: quot;.quot;;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
http://positioniseverything.net/easyclearing.html

81. easy-clearing
.clearfix:after {
content: quot;.quot;;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
<div class=quot;clearfixquot;>

83. Lil’ bit better
.group:after {
content: quot;.quot;;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
<div class=quot;groupquot;>

84. Multiple classes
<ol class=quot;cities groupquot;>

85. master.css ie.css
.group:after { /* IE6 */
content: quot;.quot;; * html .group {
display: block; height: 1%;
height: 0; }
clear: both;
visibility: hidden; /*IE7 */
} *:first-child+html .group {
min-height: 1px;
}

86. IE8?
* /_**(.)/*+:@//*+html!~/rofl**/ {
clear: please !reallyeffingimportant;
}

87. IE8?
SUPPORTS GENERATED
CONTENT!

88. <div id=quot;headerquot; class=quot;groupquot;>
<form id=quot;locquot; class=quot;groupquot;>
<div class=quot;mod
groupquot;>
<ol class=quot;cities groupquot;>
<ol class=quot;cities groupquot;>

89. Ff

90. F
FRAMEWORKS

92. master.css

95. ie.css

96. A TESTIMONIAL FOR
RESET.CSS

98. MTV.com
margin: 0; 66
padding: 0; 89
155

99. Gg

100. G
GRIDLASTICNESS
{ bulletproof }

101. gridius • lasticus • nessinus

102. GRID LAYOUT
USING EMS

103. The gut.

110. #wrap {
width: 50em;
}
#content {
width: 30em;
}
#sidebar {
width: 20em;
}

114. Em-based layouts
force you to ensure
ultimate flexibility

115. Em/pixel values make
more sense when using
the 62.5% method

116. Setting a base
body {
font-size: 62.5%;
}

117. Base of 10
#nav { font-size: 1em } 10px
#content { font-size: 1.2em } 12px
#sidebar { font-size: 1em } 10px
#footer { font-size: 0.9em } 9px

118. Widths, margins & padding
#main {
width: 10em; 100px
margin: 0 1em; 10px
border-top: .2em solid #000; 2px
}

119. Avoid setting width
and font-size on the
same element

120. #main {
width: 30em; 300px
font-size: 1em
}
#secondary {
width: 30em; 450px
font-size: 1.5em
}

121. Adjusting text size may
throw off the grid

125. Set a max-width on
elastic layouts

127. #wrap {
max-width: 100%;
}

130. 16em 16em 16em 16em
2em 2em 2em

131. THINK MODULAR
{ from the outside in }

133. Xscope
http://iconfactory.com/software/xscope

135. Hh

136. H
HORIZONTAL GRID? SURE.
VERTICAL GRID? SORT OF.

140. Use classes for
main columns

142. #header
#secondary #main

143. #header
.group
.main
.secondary
.group
.secondary
.main

144. Ii

145. I
IE8 BETA STILL
REFUSES TO RESIZE
TEXT SET IN PIXELS
{ reexamining past methods }

146. WTF?

147. body {
font-size: 12px;
}

150. STILL USING
RELATIVE UNITS

151. body {
font-size: 62.5%;
}
h1 {
font-size: 2em;
}

152. PAGE ZOOM?

153. TEXT SIZE TOOLS ARE STILL THERE
ENSURES FLEXIBILITY (NOT JUST TEXT)

154. Jj

155. J
JQUERY

158. Familiar selector syntax
<script src=quot;js/jquery.jsquot; type=quot;text/javascriptquot;></script>
// Toggle search stuff
function togglifySearch(){
$(quot;#loc-adv aquot;).click(function(){
$(quot;#mapquot;).slideToggle(quot;slowquot;);
return false;
});
}

159. Kk

160. KITTY.
(invisible pool!)

161. Ll

162. L
.last
{ bulletproof }

163. <li class=quot;lastquot;>
ul.lst li.last {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}

164. Behavior or presentation?
// Add .last class to certain lists
function addLast(){
$('ul.lst li:last').addClass('last');
}

165. Mm

166. M
MUST SKIP A FEW
LETTERS IF WE’RE
GOING TO GET
THROUGH THIS

167. Nn

168. Oo

169. Pp

170. Qq

171. Rr

172. Ss

173. S
SHIFTING BACKGROUNDS
(PARALLAX SCROLLING FOR THE LAZY)

175. How to recreate Silverback’s parallax effect
http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax

179. Position background with a
negative percentage
#header {
background: #913b3b url(../img/
fire.gif) repeat-x -80% 0;
}

181. Tt

182. Uu

183. U
YO UR STATS

184. WHEN CAN WE ______?

185. “ The answer is simple: when your site’s
(or sites’ if you have more than one) user
logs tell you that you can. Not before
then. The user stats from other sites, or
from global-aggregation surveys, are
worse than useless. ”
—ERIC MEYER
http://simplebits.com/notebook/2004/12/17/ie5.html#comment53

186. IE7 SAFARI FIREFOX OPERA IE6

187. IE7 SAFARI FIREFOX OPERA IE6

188. THANK YOU.
simplebits.com/publications/speak/a-z/a-z.pdf