Implementing Design Bullet Proof - Dan Cederholm

CASE STUDY • Bulletproof • Progressive enrichment • Reevaluating past methods BULLETPROOF • Flexibility • Adaptable to multiple scenarios • Adding detail without complexity

by Dan Cederholm

I M P L E M E N T I N G D E S I G N

BULLETPROOF

SimpleBits

HAND-CRAFTED

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.

HTML CSS Javascript GIF JPG PNG

• Flexibility

• Adaptable to multiple scenarios

• Adding detail without complexity

LANDSCAPE

PROGRESSIVE ENHANCEMENT

{ behavior }

PROGRESSIVE ENRICHMENT

{ style }

REALLY COOL STUFF

THAT DOESN’T

REEXAMINING PAST

MY LOCAL COFFEE SHOP

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

I LOVE COFFEE.

POWER OF THE BEAN™

ICED

16º

HOT

ICEDORHOT.COM

Aa

ANCHOR LINKS WITH META INFORMATION

A

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

}

overflow: hidden; }

li a span { float: left;

}

li a em { float: right;

}

Bb

B

{ progressive enrichment }

.mod {

border-radius: 4px 4px; }

CSS3

CSS3

.mod {

-webkit-border-radius: 4px 4px; -moz-border-radius: 4px 4px;

}

Vendor-Specific Properties

glass.png

-webkit-border-radius: 4em 4em;

-moz-border-radius: 4em 4em;

}

Firefox 2

master.css

enriched.css

ie.css

-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

ol.cities li,

#nav li a {

border-radius: 4em 4em;

-webkit-border-radius: 4em 4em; -moz-border-radius: 4em 4em;

}

enriched.css

WHAT ABOUT OTHER BROWSERS?

Can get away with FF2 if contrast is low enough.

Degrades nicely.

before carving out images.

Cc

COLOR TRANSPARENCY

C

{ progressive enrichment }

a.city-over {

background-color: rgba(0,0,0,.7); }

RGBa

(sets opacity value for background-color only)

a.city-over {

background-color: #000;

background-color: rgba(0,0,0,.7); }

RGBa

enriched.css

Tiled PNG would reach

more browsers.

RGBa great for protoyping

Dd

DO WEBSITES NEED

TO LOOK EXACTLY THE SAME IN EVERY

BROWSER?

D

Websites don’t need

to look exactly

the same in every

browser

DECISION-MAKERS

WHO GET IT

D

for this nifty new avatar, which

perfectly captures the goulish-like

quality found in me and other insane

people.

for blogging about CakePHP.

for picking up the tab last night at

the Gulu Gulu.

for a really awesome idea

for creating such a fun little app (foamee)

for foamee Dan (buuuurp)

Dan Cederholm • Massachusetts • Twitter profile

the pub people how-to faq store

for this nifty new avatar, which

perfectly captures the goulish-like

quality found in me and other insane

people.

for blogging about CakePHP.

for picking up the tab last night at

the Gulu Gulu.

for a really awesome idea

for creating such a fun little app (foamee)

for foamee Dan (buuuurp)

Dan Cederholm • Massachusetts • Twitter profile

the pub people how-to faq store

IT’S OK

Tiny visual enhancements that do

not affect layout.

Techniques that make our lives

easier.

Ee

FLOATS = FLEXIBILITY

2008

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.

.clearfix:after { content: ".";

<div class="clearfix">

Lil’ bit better

<div class="group">

Multiple classes

<ol class="cities group">

}

/*IE7 */

*:first-child+html group { min-height: 1px;

}

ie.css

* /_**(.)/*+:@//\*+html!~/rofl**/ {

clear: please !reallyeffingimportant; }

IE8?

SUPPORTS GENERATED

CONTENT!

<ol class="cities group">

<ol class="cities group">

<div class="mod group">

<form id="loc" class="group">

<div id="header" class="group">

Ff

F

master.css

ie.css

A TESTIMONIAL FOR

RESET.CSS

margin: 0; 66

padding: 0; 89

155

MTV.com

Gg

G

{ bulletproof }

gridius • lasticus • nessinus

GRID LAYOUT

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

body {

font-size: 62.5%;

}

Setting a base

#nav { font-size: 1em } 10px

#content { font-size: 1.2em } 12px

#sidebar { font-size: 1em } 10px

#footer { font-size: 0.9em } 9px

Base of 10

Avoid setting width and font-size on the

same element

Adjusting text size may

throw off the grid

Set a max-width on

elastic layouts

#wrap {

max-width: 100%; }

16em 16em 16em 16em

THINK MODULAR

{ from the outside in }

http://iconfactory.com/software/xscope

Hh

HORIZONTAL GRID? SURE.

H

Use classes for main columns

#secondary

#header

.main secondary

.group

.main secondary

Ii

IE8 BETA STILL REFUSES TO RESIZE TEXT SET IN PIXELS

I

{ 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

// Toggle search stuff

function togglifySearch(){

$(" #loc-adv a ").click(function(){ $(" #map ").slideToggle("slow");

return false;

});

}

Familiar selector syntax

<script src="js/jquery.js" type="text/javascript"></script>

Kk

(invisible pool!)

Ll

L

{ bulletproof }

ul.lst li.last {

margin-bottom: 0; padding-bottom: 0; border-bottom: 0;

}

<li class="last" >

// Add last class to certain lists

function addLast(){

$('ul.lst li:last').addClass('last'); }

Behavior or presentation?

Mm

MUST SKIP A FEW LETTERS IF WE’RE

GOING TO GET THROUGH THIS

Nn

Oo

Pp

Qq

Rr

Ss

SHIFTING BACKGROUNDS

(PARALLAX SCROLLING FOR THE LAZY)

S

How to recreate Silverback’s parallax effect

http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax

Tt

Uu

UR STATS

U

YO

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