IMPLEMENTING DESIGN
BULLETPROOF
A-Z
by Dan Cederholm

SimpleBits

HAND-CRAFTED
PIXELS & TEXT.

CRAFTSMANSHIP

VERMONT

“ 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

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

CRAFTSMANSHIP
in IMPLEMENTATION
HTML CSS Javascript GIF JPG PNG

CASE STUDY
• Bulletproof
• Progressive enrichment
• Reevaluating past methods

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

BROWSER
LANDSCAPE

PROGRESSIVE ENHANCEMENT
{ behavior }

PROGRESSIVE ENRICHMENT
{ style }

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

REEXAMINING PAST
METHODS & HABITS

CASE STUDY
• Bulletproof
• Progressive enrichment
• Reevaluating past methods

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

I LOVE COFFEE.

POWER OF
THE BEAN ™

82º 16º
ICED HOT

ICEDORHOT.COM

Aa

A
ANCHOR LINKS WITH
META INFORMATION
{ bulletproof }

<li><a href=\"/latte\">Latte <em>12</em></a></li>
li a {
display: block;
position: relative;
}
li a em {
position: absolute;
top: 0;
right: 0;
}

<li><a href=\"/latte\"><em>12</em> Latte</a></li>
li a {
display: block;
}
li a em {
float: right;
}

<li>
<a href=\"/latte\">
<span>Latte</span> <em>12</em>
</a>
</li>
li a {
display: block;
overflow: hidden;
}
li a span {
float: left;
}
li a em {
float: right;
}

Bb

B
BORDER-RADIUS
{ progressive enrichment }

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

CSS3

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

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

glass.png

#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;
}

Firefox 2

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

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

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

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

WHAT ABOUT
OTHER BROWSERS?

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

Cc

C
COLOR TRANSPARENCY
WITH RGBa
{ progressive enrichment }

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

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

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

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

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

Dd

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

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

D
DECISION-MAKERS
WHO GET IT

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

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

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

Ee

E
EASY-CLEARING
FLOATS
{ reexamining past methods }

2008
FLOATS = FLEXIBILITY

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.

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.

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

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

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

Multiple classes
<ol class=\"cities group\">

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

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

IE8?
SUPPORTS GENERATED
CONTENT!

<div id=\"header\" class=\"group\">
<form id=\"loc\" class=\"group\">
<div class=\"mod
group\">
<ol class=\"cities group\">
<ol class=\"cities group\">

Ff

F
FRAMEWORKS

master.css

ie.css

A TESTIMONIAL FOR
RESET.CSS

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

Gg

G
GRIDLASTICNESS
{ bulletproof }

gridius • lasticus • nessinus

GRID LAYOUT
USING EMS

The gut.

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

Em-based layouts
force you to ensure
ultimate flexibility

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

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

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

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

Avoid setting width
and font-size on the
same element

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

Adjusting text size may
throw off the grid

Set a max-width on
elastic layouts

#wrap {
max-width: 100%;
}

16em 16em 16em 16em
2em 2em 2em

THINK MODULAR
{ from the outside in }

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

Hh

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

Use classes for
main columns

#header
#secondary #main

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

Ii

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

WTF?

body {
font-size: 12px;
}

STILL USING
RELATIVE UNITS

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

PAGE ZOOM?

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

Jj

J
JQUERY

Familiar selector syntax
<script src=\"js/jquery.js\" type=\"text/javascript\"></script>
// Toggle search stuff
function togglifySearch(){
$(\"#loc-adv a\").click(function(){
$(\"#map\").slideToggle(\"slow\");
return false;
});
}

Kk

KITTY.
(invisible pool!)

Ll

L
.last
{ bulletproof }

<li class=\"last\">
ul.lst li.last {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}

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

Mm

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

Nn

Oo

Pp

Qq

Rr

Ss

S
SHIFTING BACKGROUNDS
(PARALLAX SCROLLING FOR THE LAZY)

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

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

Tt

Uu

U
YO UR STATS

WHEN CAN WE ______?

“ 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

IE7 SAFARI FIREFOX OPERA IE6

IE7 SAFARI FIREFOX OPERA IE6

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