WDE08 BULLETPROOF A to Z

IMPLEMENTING DESIGN

BULLETPROOF

A-Z
by Dan Cederholm

“ 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

PROGRESSIVE ENHANCEMENT
{ behavior }

PROGRESSIVE ENRICHMENT
{ style }

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

REEXAMINING PAST
METHODS & HABITS

MY LOCAL COFFEE SHOP

http://www.flickr.com/photos/dankamminga/1678248602/

A

ANCHOR LINKS WITH
META INFORMATION

{ bulletproof }

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

<li><a href=quot;/lattequot;><em>12</em> Latte</a></li>

li a {
display: block;
}

li a em {
float: right;
}

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

B

BORDER-RADIUS

{ progressive enrichment }

CSS3

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

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

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

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

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

Can get away with FF2 if
contrast is low enough.

Degrades nicely.

Great for prototyping
before carving out images.

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: rgba(0,0,0,.7);
}

master.css enriched.css

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

Tiled PNG would reach
more browsers.

RGBa great for protoyping.

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.

E

EASY-CLEARING
FLOATS

{ reexamining past methods }

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: quot;.quot;;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

http://positioniseverything.net/easyclearing.html

easy-clearing

.clearfix:after {
display: block;
height: 0;
clear: both;
visibility: hidden;
}

<div class=quot;clearfixquot;>

Lil’ bit better

.group:after {
display: block;
height: 0;
clear: both;
visibility: hidden;
}

<div class=quot;groupquot;>

Multiple classes

<ol class=quot;cities groupquot;>

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

IE8?

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

IE8?

SUPPORTS GENERATED
CONTENT!

A TESTIMONIAL FOR
RESET.CSS

MTV.com

margin: 0; 66
padding: 0; 89

155

G

GRIDLASTICNESS

{ bulletproof }

gridius • lasticus • nessinus

#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

H

HORIZONTAL GRID? SURE.
VERTICAL GRID? SORT OF.

#header

#secondary #main

#header

.group

.main
.secondary

.group

.secondary
.main

I

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

body {
font-size: 62.5%;
}

h1 {
font-size: 2em;
}

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

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

L

.last

{ bulletproof }

<li class=quot;lastquot;>

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

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

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

“ 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

THANK YOU.

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

WDE08 BULLETPROOF A to Z

Recommended

Recommended

More Related Content

Similar to WDE08 BULLETPROOF A to Z

Similar to WDE08 BULLETPROOF A to Z (20)

More from Satoshi Kikuchi

More from Satoshi Kikuchi (18)

Recently uploaded

Recently uploaded (20)

WDE08 BULLETPROOF A to Z