A-Zby Dan Cederholm

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

BULLETPROOFBULLETPROOF

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.

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

<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

BORDER-RADIUS

B

{ progressive enrichment }

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

CSS3

CSS3

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

Vendor-Specific Properties

#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

screen.css

master.css

enriched.css

ie.css

#nav li a { float: left; padding: .5em 1em; color: #fff; background: #dd5543; }

master.css

#nav li a { border-radius: .4em .4em; -webkit-border-radius: .4em .4em; -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; }

enriched.css

WHAT ABOUT OTHER BROWSERS?

Can get away with FF2 if contrast is low enough.

Degrades nicely.

Great for prototyping before carving out images.

Cc

COLOR TRANSPARENCYWITH RGBa

C

{ progressive enrichment }

a.city-over { background-color: #000; opacity: .7; }

Opacity

(sets opacity value for the element and all of its children)

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

a.city-over { background-color: #000; }

master.css

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

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.

OWES 4 BEERS

Kevin Cornell

3 days ago

snookca

1 week, 3 days ago

beep

3 weeks ago

for a really awesome idea

for creating such a fun little app

(foamee)

for foamee Dan (buuuurp)

IS OWED 36 BEERS

ginader

21 hours, 2 minutes ago

xybermatthew

1 day, 15 hours ago

juque

1 day, 18 hours ago

simplebitsDan Cederholm • Massachusetts • Twitter profile

the pub people how-to faq store

h1:before { content: url(/img/left.gif); }h1:after { content: url(/img/right.gif); }

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.

OWES 4 BEERS

Kevin Cornell

3 days ago

snookca

1 week, 3 days ago

beep

3 weeks ago

for a really awesome idea

for creating such a fun little app

(foamee)

for foamee Dan (buuuurp)

IS OWED 36 BEERS

ginader

21 hours, 2 minutes ago

xybermatthew

1 day, 15 hours ago

juque

1 day, 18 hours ago

simplebitsDan 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

EASY-CLEARING FLOATS

E

{ reexamining past methods }

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

easy-clearing

http://positioniseverything.net/easyclearing.html

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

easy-clearing

<div class="clearfix">

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

Lil’ bit better

<div class="group">

Multiple classes

<ol class="cities group">

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

master.css

/* IE6 */* html .group { height: 1%; }

/*IE7 */*:first-child+html .group {

min-height: 1px;}

ie.css

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

IE8?

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

FRAMEWORKS

F

master.css

ie.css

A TESTIMONIAL FOR RESET.CSS

margin: 0; 66padding: 0; 89

155

MTV.com

Gg

GRIDLASTICNESS

G

{ 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

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

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

Widths, margins & padding

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 16em2em 2em 2em

THINK MODULAR{ from the outside in }

Xscope

http://iconfactory.com/software/xscope

Hh

HORIZONTAL GRID? SURE. VERTICAL GRID? SORT OF.

H

Use classes for main columns

#main#secondary

#header

#header

.group

.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

JQUERY

J

// Toggle search stufffunction togglifySearch(){ $("#loc-adv a").click(function(){ $("#map").slideToggle("slow"); return false; });}

Familiar selector syntax

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

Kk

KITTY.(invisible pool!)

Ll

.last

L

{ bulletproof }

ul.lst li.last { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

<li class="last">

// Add .last class to certain listsfunction addLast(){ $('ul.lst li:last').addClass('last');}

Behavior or presentation?

Mm

M

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

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

Position background with a negative percentage

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