Bulletproof Web Design

DAN C EDER HOLM • WEBVIS IONS 20 0 6 • PORTL AN D, OR E GON

bul•let•proof (adj.)

bul•let•proof (adj.) ๏ Wort-case scenarios

bul•let•proof (adj.) ๏ Wort-case scenarios ๏ Flexibility

Fig. 1: Jack

DAN C EDER HOLM • WEBVIS IONS 20 0 6 • PORTL AN D, OR E GON

“Love your site, Dan – but I can’t read it.” – Frustrated Reader

Faux Columns

Simple fix Specify background color equivalents: #content { background: #fff; } #sidebar { background: #eee; }

What happens when images are turned off?

Baker's dozen

Baker's dozen 13

Bulletproof pants Comfort Equipped™ (expandable waistband)

Bulletproof paths

Bulletproof paths CONTENT • text size • content amount

Bulletproof paths CONTENT EDITING • text size • content changes • content amount • maintenance

Bulletproof paths CONTENT EDITING ENVIRONMENT • text size • content changes • device / browser • content amount • maintenance • scenarios

“ The journey begins by letting go of control, and becoming flexible.” – John Allsopp “A Dao of Web Design”

ways to accomplish the same goal.

4,362 ways to accomplish the same goal.

4,362 ways to accomplish the same goal. (approximately)

Web design in a nutshell

Web design in a nutshell ๏ Ways that work

Web design in a nutshell ๏ Ways that work ๏ Ways that are better

Web design in a nutshell ๏ Ways that work ๏ Ways that are better ๏ Ways that don't work

Solution #1: <img />

Solution #2 CSS

DigDug Text Test

“ Nobody actually adjusts text size.” – DDTT Naysayers

Evaluating with text size

Evaluating with text size ๏ I use it, and I have decent eyesight.

Evaluating with text size ๏ I use it, and I have decent eyesight. ๏ Acts as a \"flexibility barometer\".

Evaluating with text size ๏ I use it, and I have decent eyesight. ๏ Acts as a \"flexibility barometer\". ๏ Not just text size, but content amount.

Evaluating with text size ๏ I use it, and I have decent eyesight. ๏ Acts as a \"flexibility barometer\". ๏ Not just text size, but content amount. ๏ Use relative sizes with confidence.

Solution #3: Bulletproof ๏ Flexible ๏ Easy to edit ๏ Allows for varying text size or content amount

Define the ingredients

The markup <h2><a href=\"/\">This Way</a></h2>

The background image

The CSS h2 { margin: 0; padding: 0; font-size: 200%; font-weight: normal; }

The CSS h2 a { padding: .5em .8em .5em 1.5em; color: #fff; text-decoration: none; background: #693 url(nav-arrow.gif) no-repeat 0 50%; }

position: absolute;

float

Self-clearing floats <div class=”box”> ____________ ____________ ____________ float: left;

Self-clearing floats div.box:after { ______ content: “.”; ______ display: block; ______ height: 0; clear: both; visibility: hidden; } http://positioniseverything.net/easyclearing.html

Self-clearing floats div.box:after { ______ content: “.”; ______ display: block; ______ height: 0; clear: both; visibility: hidden; } div.box { display: inline-block; } http://positioniseverything.net/easyclearing.html

Self-clearing floats div.box:after { ______ content: “.”; ______ display: block; ______ height: 0; clear: both; visibility: hidden; } div.box { display: inline-block; } /* hide from ie/mac \\*/ * html div.box { height: 1%; } div.box { display: block; } /* end hide */ http://positioniseverything.net/easyclearing.html

Think modular

Think modular ______ ______ ______

Think modular ______ ______ ______ ______ ______ ______

Think modular ______ ______ ______ ______ ______ ______ ___ ___ ___

Think modular ______ ______ ______ ___ ___ ___ ______ ______ ______ ___ ___ ___

Think modular ______ ___ ___ ______ ___ ______ ___ ___ ___ ______ ______ ______ ___ ___ ___

wife’s choice

Thinking in fixed-height

Bulletproofing it <div class=”box”> <h3>Gifts and Special Offers</h3> <p>... content here ...</p> </div>

Needs flexibility

Vertical Sliding Doors <h3> <div>

border-bottom

Accepting the box

clearleft.com

clearleft.com div.box { background: url(corner.gif) no-repeat top right; }

hicksdesign.co.uk

Subtle modification

Subtle modification .box { background: #fff url(corner.gif) no-repeat bottom right; }

<div class=”box”> background: #D5E3B9 url (bottom.gif) no-repeat bottom right;

<div class=”box”> <h2> background: #D5E3B9 url (bottom.gif) no-repeat bottom right;

<div class=”box”> <h2> background: #86B034 url (top.gif) no-repeat top left; background: #D5E3B9 url (bottom.gif) no-repeat bottom right;

1 2

cameronmoll.com/portfolio

Reusable Ornamentation

Reusable Ornamentation <h4>Right Now on Cork'd</h4>

Reusable Ornamentation border-top: 1px solid #E0D0B1; <h4>Right Now on Cork'd</h4>

Wider than needed background: url(hr.gif) no-repeat 50% 100%;

<h2>

<h2> <span> h2 { background: url(tile.gif) repeat-x 0 50%; }

<h2> <span> h2 span { padding: 0 10px; background: #272A2D; } h2 { background: url(tile.gif) repeat-x 0 50%; }

Navigation

Web (40,093)

microformats.org

<li> li:hover <a> a:hover

Links

haveamint.com

joyent.com

Attaching icons

Attaching icons <a href=”/editreview/” class=”edit”>

Attaching icons

Attaching icons a.edit { background: url(pencil.gif) no-repeat 0 50%; a.add { background: url(plus.gif) no-repeat 0 50%;

Layout

Fixed vs. Fluid

Fixed vs. Fluid ๏ Not going to go there.

Fixed vs. Fluid ๏ Not going to go there. ๏ When executed well, fluid layouts can be betterproof.

Fixed vs. Fluid ๏ Not going to go there. ๏ When executed well, fluid layouts can be betterproof. ๏ Can have drastic effects on page design.

Fixed vs. Fluid ๏ Not going to go there. ๏ When executed well, fluid layouts can be betterproof. ๏ Can have drastic effects on page design. ๏ Each has their place.

max-width, min-width ๏ Set extremes for fluid-width layouts. ๏ Keeps line lengths readable. ๏ Currently unsupported in IE/Win #wrap { max-width: 1200px; }

Framed by % ๏ Helps with keeping a reasonable line length.

max-width:1000px;

Variable fixed-width layouts ๏ Wider layout for wider browser windows. ๏ Javascript swaps class or serves alternate stylesheet when window is narrowed. ๏ Predictability for designers, increased flexibility for reader.

Bulletproof tools

10-second usability test ๏ Take away the design. ๏ Is the site still understandable? ๏ Like an x-ray of the document. ๏ Does the structure make sense?

Unscientific!

Unscientific! ...But easy (and helpful) to add to workflow.

Validation as a tool ๏ 100% Validation is difficult to maintain. ๏ Validation during construction is key. ๏ Eliminates head-scratching CSS problems.

Web Developer Extension http://chrispederick.com/work/webdeveloper/

Safari Tidy

Bulletproof dashboard ๏ 10 second usability test (disable styles) ๏ Turn off images (still readable?) ๏ Validate markup and stylesheets ๏ DigDug Text Test (DDTT)

The bulletproof concept

The bulletproof concept ๏ A catchy phrase to sell books and secure speaking engagements

The bulletproof concept ๏ A catchy phrase to sell books and secure speaking engagements ๏ The positive power of buzzwords

The bulletproof concept

The bulletproof concept ๏ Embrace flexibility

The bulletproof concept ๏ Embrace flexibility ๏ Let go of “pixel precision”

The bulletproof concept ๏ Embrace flexibility ๏ Let go of “pixel precision” ๏ Plan ahead for worst-case scenarios

great design

great web design

Thank you. http://simplebits.com/publications/speak/webvisions/bpwd-wv2006.pdf

Bulletproof Web Design

2 comments

Notes on slide 1

15 Favorites