Dan Cederholm - Bulletproof Web Design
======================================
Family visit to London - had plans to travel the world, but he arrived early so
he's at home
Will be talking about flexibility in design and worst case scenarios.
Email - "I love your site, Dan - but I can't read it". He'd turned off images
in his browser to save bandwidth. At the time I was using Faux Columns -
putting a tiled background image behind columns on page. Background color was
a dark grey - turned off images and the sidebar text was the same color as the
background and the main content area was hard to read.
Embarrassing, hadn't tested without images on. Apply background colors to any
background images - now works better.
What happens when images are turned off?
Bakers Dozen - what happens if one is removed? So they put a 13th in there.
What happens if something is taken away?
Building in Salem Massachusetts, went up about a year ago, storage facility,
wonder why they put window openings in then cemented over it. Maybe one day it
won't be a storage facility and they'll want windows. Future proofing.
"Bulletproof pants" - comfort equipped, have panels on the side that slide out.
There's an extreme, but they have give and take.
Three ways we can be bulletproof:
- in terms of content, how does the components of the page handle different
text sizes or content amounts.
- in terms of editing - is the page easy to change or maintain. If I hand a
page to a client, can they edit it?
- in terms of environment - what happens if css/images/javascript are off?
"The journey begins by letting go of control and becoming flexible" - 'A Dao of
Web Design' by John Alsopp
Simple Arrow I created one day - box with arrow point on one side and some
white text. 4,362 ways to do this (approximately). Choices I made in creating
this arrow can be applied to anything on a page. Ways that work, ways that are
better, ways that don't.
1. Could just create the arrow as an image, but want the text to be editable.
2. Could use CSS to do this - create the arrow in photoshop, use it as a
background image, place text over top, but if you increase the text size it
spills over. If you turn images off, the text disappears.
DugDug test of increasing text size, heard nobody increases text size,
evaluating with text size. I use it and I have decent eyesite. Acts as a
flexibility barometer - not just t ext size by content amount. Allows us to
use relative text sizes with confidence.
3. Bulletproof - green background, arrow point and white text. Markup is
The background image has a transparent area. The CSS has padding in ems and
the background is vertically centered.
Can also change background color as image is transparent.
Can apply flexibility like this to other parts of a webpage. Cork'd has a
couple of bulletproof areas - starting with header.
Logo on left, tabs on the right. Could use absolute positioning but when you
increase the text size or if the tabs area becomes larger than we expected it
can spill over, it's outside flow and so doesn't affect rest of page.
Use opposing floats, and think of header as self contained module that affects
the rest of the page.
Self clearing floats - common to have a floated element that sticks out the
bottom.
Could clear floats after the section, but better to self clear so it's
independent - whatever comes afterwards we don't need to worry about it. Box
uses :after to put a period after the content, then hide it. Then there's a
line for IE5 mac - using inline-box. Then there's some voodoo for IE.
http://positioniseverything.net/easyclearing.html
Keeps everything independent. You can think modularly, can move them around.
Netflix.com - DVD sharing site. Have a lot of rounded corner boxes, were
thinking in fixed heights when they built this, bump up the text size and it
spills over. Can recreate this in terms of being bulletproof - two areas that
need to be flexible - like a vertical sliding doors, use background images that
are bigger than they need to be.
There are breaking points, but a little bit of breathing room is better than
none at all. Don't want to make images so large they drown the page.
Using a border-bottom - combining borders and background images is useful to
making things flexible.
Accepting the box
-----------------
Like to think about things we can do to the box that are simple, don't require
extra markup, don't require extra markup.
Screenshot of clearleft.com - dogear background image in the corner - it's a
box but it's very simply not a box, subtle addition there.
Hicksdesign - sidebar has a rounded corner on the bottom right of each box,
background color combined with one background image. Subtle modifications.
Fit into design, easy...
Odeo - sidebar box design I did for odeo - two rounded corners - background
image on div with background color, then a subtle gradient fade image on
heading.
Start to see shape with two rounded corners a lot. See it on conference
website. 2 rounded corners is very easy.
Cameron Moll's portfolio. Sidebar box is not a box - has ornamental cap, tiled
background image, cap on bottom. It expands, it's a box but more than that.
Reusable ornamentation - heading style - border on top, then a background image
underneath, image was much wider than it needed to be - in the css we set it as
the background image and have it centered. The reuse it in the sidebar. Great
as I can change column widths or reuse it in other areas that aren't as wide.
Tundro - heading style with a line that sits behind text, heading tag with a
span (don't kill me) - image that's two pixels tall, centered vertically, span
has same background as page, get an effect where it's floating above the line.
Bulletproof navigation
----------------------
ESPN - Wanted to do google tab interface, originally did them as images, but
they wanted the number of results on the tab, had to use CSS, gradient
background.
Microformats site navigation - had two elements - and - had two
corners. For hovering, had an li:hover, in IE you get a square box, which is a
fine compromise.
Haveamint.com - has hyperlinks that look like buttons, just background color
and border on 2 sides, simple, flexible.
joyent.com, similar effect
corkd.com - can attach icons to hyperlinks - toolbar at the top of each page,
knew I wanted to attach icons, knew I wanted to be able to remove or change
them. Added a class to each type of action - add, recommend etc, then added
icons to each class. Then can change it all in the CSS.
Bulletproof Layout
------------------
Not going to go into fixed vs fluid. When executed well a fluid layout can be
betterproof. Can have drastic effects on page design, each has a place.
Rollyo - fixed width homepage, not a lot on page so no need to be flexible.
For search results when for fluid width center column.
One of the problems with fluid width is line length - when browser is stretched
to the max, columns can be hard to read. Can use max width to contain that.
Currently unsupported in IE/Win.
Vertua.com - nice technique that uses percentage margins on either side - as
you change the window size the side panels change. Nice alternative.
Do something similar on my own site - simplebits.com - margins made with
percentages, but also a max width for browsers that support it.
When max-width isn't supported this is a nice alternative.
Variable fixed width layouts - wider layout for wider browsers, uses javascript
to use an alternate stylesheet or changes a body class. Cameron Adams and
Simon Collyson both use this on their sites.
Bulletproof tools
-----------------
10 second usability test - take away the design, is the page understandable
with the default styles?
mlb.com - turn CSS off and it becomes pretty unreadable. Not using it for
layout, things just fall apart.
mcafee.com - turn css of and you can see the document structure. Well thought
out and well structured.
Easy test, unscientific, not really usability testing
Validation as a tool - true validation on an entire site is difficult to
maintain, but validation during construction is key - eliminates head
scratching css problems.
Web Developer extension for firefox, dashboard that allows you do do a lot of
things - turn off images, styles, validate.
Safari Tidy - automatically validates the page you're looking at using tidy,
error icon in bottom right, really handy.
Bulletproof dashboard, take away css, turn off images, validating markup, dig
dug text test (need more buzzwords)
Bulletproof is:
- a catchy phrase to sell books and get speaking engagements
- the positive power of buzzwords
embrace flexibility, let go of pixel precision, think in terms of the web as
its own medium. Plan ahead for worst case scenarios.
Making your great design a great web design.
Not necessarily always the same.
http://simplebits.com/publications/speak/atmedia/bpwd-atmedia.pdf
Q&A
---
Techniques of flexibility are useful when doing internationalisation.