The Adventures of Cindy Li
@media 2006: Bulletproof Web Design Dan Cederholm
June 16 , 2006
Speaker
Dan Cederholm
“Love your site, Dan–but I couldn’t read it."-Frustrated reader
Dan i Love your site but you can’t read it at all.
He turned off images and couldn’t read it.
Faux columns to create the illusion so there was equal height on both sides.
The background was a dark gray so the problem with the guy that turned off the image. The sidebar text was the same color as the back.
So a simple fix is always apply background images for anything you use on CSS.
Images off and the background colors apply. So first question you ask yourself…
So what happens when you turn off the images off your site?
Baker’s dozen what happens when one of them is removed. So I put in a 13th cookie. Taking something away are things still intact.
Another real world example
They put in fake windows. Maybe it won’t be a storage facilitya nd they will want windows and the windows will be there so they are thinking ahead. It might not be a storage all the time.
Bulletproof pants
Comfort Equipped (TM) expandable wasiteband) as you get wider then the pants expand but there is a limit.
Bulleproof paths
Content
- Text size
- Content amount
Editing
- Content changes:expandable pants
- Maintenance
So when you are designing things. If you are designing a module that can accomodate other things
Environment
- Device/browser
- Scenarios: like the baker’s dozen
“The journey begins by letting go of control, and becoming flexible.”
4,632 ways to accomplish this goal. (approximately)
Web design in a nutshell
The choices I make in creating this can be applied to anything on a web page
Sorry guys battery died...plugging into wall
We can change the background color because the image is transparent. So there is a bulletproof arrow.
Now we can apply this:wine community page
Logo on the left and osmething on the right the tabs on the right on opposite ends and we could use absolute positiioning but when we increae the text size on the tab. The area becomes larger than we want it to be. It is opposing floats.
The self contained module and the flat is that way of doing that.
Self-clearning floats is pretty goodd. The box is only as tall as the text.
What we really want is to wrpa around everything. Clearning floats after this section clear floats.
Self clearing floats: it helps you think that the box is independent of everyhthing else on the page
The CSS can do that is a little weird but if you want to read this positions articles. The box uses this after to put in a period after the box and clear all floats and hide it so that the period. This is for IE mac and this (code he has on the monitor)
It makes you think modular.
Think modular you don’t have to worry about where it goes. You can move it around the page.
Netflix sharing site
They have lots of boxes. This is the code for the boxes
They are using nested tables and thinking of fixed type
So the header portion is really for one line of text and when we bump up the text for two lines and it starts breaking.
Bulletproof it
<div class="box>
<h3>Gifts and Specail offer</h3>
<p>Content..</p>
Header area the top area and has the rounded corners at the bottom
Vertical sliding doors
We have images that are created taller than they need to be. They can accomodate more than one line.
Here is a bulletproof version of that.
We can increase the text a few times and you can see the header area is taller than it needs to be there are breaking points and if you go up a couple of times but there are breaking points but a little breathing room is better than none at all.
We’re using a border at the top
Accepting the box
That is a fixed width rounded corner box
Other things that we can do w/the box that are simple that don’t require extra markup
Verbose
Clearleft.com
Screenshot…
There is a box and there is very simple dog ear background image on the top corner
What’s great about that is its a box but its simple not a box its a little subtle addition there. Similarly Jon hicks design....
Side notes area there is a box on every other list site . It is just a rounded corner but its simple
Subtle modificiation:
it has varied background image
its great because its so simple and easy to do and very easy to fit into teh design of the site.
This is a sidebar box for ODEO
There are two rounded corners
Background image on the div and coupled on the green w/the background
If that says something much longer than browse, it is easier to accomodate
You see this shape and flip it around and you can see it on the @media site
two rounded corners very easy
Cameron moll’s portfolio very nicely designed
He has a sidebar here which is really not a box either. It has an ornamental cap on it
It is capped off. It will expand it will tile and expand it is a box but it is more than that.
Reusable Ornamentation:
Background image underneath
Wider than needed:
In the CSS I could have it centered 50% and reuse it in many places
that image is a lot wider than it needs to be and I can change the column widths and use it in areas
Tundro
Iceberg base comapany
Heading style here where there is a line that sits behind each text.
This is a heading tag witha harmless span.
The image is 2px tall that is centered vertically here.
For the span there is a padding behind each text. That will mask the image behind. So there is a little image floating.
Navigation:
ESPN search, Some tabs behind ESPN search.
It is a good example they wanted to do the google tabs search result.
The espn we can create this as image tags. We can combine this for the border on each side and using a gradient image behind there. The search result can accommodate that.
It is simliar to what I create graphically.
For hovering I want to give it teh same effect so I could use hover on the element>
For internet explorer that doesn’t hover anything ....
Hyperlinks:
are an easy way to stay flexible
haveamint.com
he has tehese hyperlinks that look like buttons all ti is a border and sides.
Gyent.com.
When you hover it has text around it
Attaching icons:
We can attach icons to hyperlinks so ther is a heart next to each hyperlink, we can change them change the color and everything so I added a class to each type of action to the edit action to the edit, add, recommend class and attach teh icon to each class so that way we can remove the icon and change the text you can do that with the CSS.
Layout. The big fixed version
It is very difficult to do at times
Fixed vs. Fluid
Rollyo
this is the homepage that is fixed width that is not a whole lot about making this fulid
There isn’t a lot
We went fluid w/teh central column
One of the problems w/fluid is line length.
Max-width, mini-width
Text extremes fixed with
the side panels will
These margins are on each side and you make them sit on each window
A max width for each as well.
The whole layout is centered.
So when it isn’t supported its nice to put % on each side.
Variable fixed-width layout:
Wider lwayout for wider browser windows
Javascript class or serves alternate sylesheet when window is named
Predicitability for deisgners, increased readability for readers.
Cameron Adams:
devloped this four coulmns and you squeeze the window down and the four columns are safe.
It is a nice alternative now too
Bulletproof tools:
Different things while we’re working on different sites
10-second usability test
take way the deisgn
Is the site sill undersandable?
Like an x-ray of the document.
Does the structure make sense?
So you turn CSSS off on theis site and becomes unreadable
When you turn the css off you can see the list and the navigation and you can see clearly that this is well structured an easy test.
It is unscientific and usability testing.
Unscientific!
but easy (and helpful)
Validation as a tool
100%validatioin is difficult to maintain
Validation during construction is key
You can see more images
Turn off page colors and validate automatically
Safari Tidy
for safari users that automatically validates the page you are looking at looking at Tidy
Safari Tidy
and you look at teh line number and double clicking and you can see what you need to fix
The bulletproof dashboard
10second usability test (disable styles)
turnoff images (still readable)
Validate and stylesheets
DigDug Text Test (DDIT): to test the integrity of the page and the amounts of content within the page to summarize
The bulletproof concept
Catchy phrase to seell books an secure speaking engagements
The positive power of buzzwords to use a term to group a set of techniques or ways of thinking about things for it to spread
embracing flexibility and letting go of pixel pushing
let go of “pixel percision”
Plan ahead ofr worst-case scenarios
Great design into Great web design those aren’t necessarily equal and the same to keep in mind
simplebits
.com/puiblications/
