The following are my panel notes from @media2006. As I am not the fastest typer I have paraphrased what was said. Should you notice any mistakes please do point them out in the comments for corrections.
Flexibility in web design and preparing for worst case scenarios.
Frustrated Reader: "Love you site, Dan - but I can't read it";
He had been turning images off to save bandwidth, and I was using faux columns and when he turned off the image the sidebar text was the same colour as the background colour. This was embarrassing as I hadn't tested without images. bullet proof it by putting background colour equivalents on your backgrounds.
Bakers dozen. One extra to allow for mishaps.
This is a storage building in the town where I live in Masachusetts. They have allowed for windows so if the building ceases ton be a storage facility it will be easy to add windows.
bullet proof pants with expandable waist.
Bullet proof paths:
Content:
text-size
Content amounts
Editing
Content changes
maintenance
Environment
device/browser
...
John Allsopp "A Dao of web Design"
Green arrow with text in the middle.
There are 4362 ways to accomplish out goals
ways that work
ways that are better
ways that people don't talk about
Solution 1: use an image. Can't do this as I wanted the text to be editable
Solution 2: use the arrow as a background image, but it doesn't work as the text will spill out as you increase the text size. Also white text on a white background can't be read. Images off nothing can be seen.
Text-size increase or decrease is a good way to test a site for different things. It's also a flexibility barometer. It also allows us to use relative text size with confidence.
Solution 3: Heading with a link for the text. The background image is much larger than it needs to be soa s the text size increase is used more of the image is seen. Use padding so that the whole thing becomes clickable. There you have a bullet-proof arrow.
Cork'd
thinking about our header as a self contained unit. We can use floats to float the logo left and the tab navigation right.
Self clearing floats.
div.box:after {
contentL ".";
display: block
heightL 9
clear: both
visibility: hidden;
}
div.bos {display: inline-block; }
/* from ie/mac */
- html div.box etc...
This allows you to think modular. You don't have to worry about moving things around.
Thinking in fixed height if the text-size is increased then the headings explode.
Bullet proofing it. Give the heading and the content area flexibility. This is like a vertical sliding doors. Images are created larger than they need to be so they can accommodate more than one line of text.
There are still breaking points but you can give yourself a bit of breathing space.
I'm using a border-bottom to create the border at the bottom of the heading instead of the previous example which used an image.
Accepting the box.
Screen shot of clearleft.com has a box with a dog-eared corner. Takes away the box feeling.
Jon hicks on his sidenotes rounds the bottom-right corner to take away the box.
ODEO: Two rounded corners design I did for Odeo. One background image on the heading and one on the container. This shape you start to see a lot.
Cameron Moll's portfolio. He has a sidebar that's not a box it has an ornamental cap and a tiled background image and the bottom is a another ornamental cap.
Re-useable ornamentation. A swash in the background image made bigger than needed so it can be re-used any where and it's centered using 50% and this gives me the flexibility.
Tundro: A line behind the heading text. H2 with a background and the span contains the text and that masks out the background for the line. When you increase text size it will always work.
Bullet-proof nav. Tabs for ESPN these were originally image tabs. But they wanted to show the number of results in the tab so I needed to use CSS to do this so that it would always accommodate the text whatever the size.
Microformats has two rounded corner nav tabs. IE only gets a square box on hover due to the lack of :hover on anything other that a link.
Joyent.com , nice link hover effect.
Attaching icons to links in such a way that they can be changed in the future. I used a class for each icon. If I want to change the icon of the colour of the text I can do so by using just CSS
Fixed vs Fluid.
Rollyo is fixed width. There's not a lot on the homepage that we would gain by being fluid, But for search results we went for fluid as the content is more heavy.
max-width keeps line-lengths readable.
You can also use precentage margins on either side. See vertua.com Helps keep a reasonable line-length.
I do a similar thing for my site and I use a max-width of 1000px for those browsers that do support it.
Variable fixed width layouts. javascript changes classes based on the screen size. As screen size is reduced the columns drop down under-neath the primary content. See Simon Collison for example. (SC: or for a CSS free version check out my own drop-column layout :-) )
10-second usability test. Take away the design.
Bullet Proof dashboard
MLB.com when you turn the CSS off it becomes pretty unreadable.
Macfee.com turning CSS off the site is still well structure and easy to read and use.
Turn off images
Validation is useful while you are developing. Web developer extension is really really helpful. Safari tidy is great for seeing errors in safari. It will tell you line number where the problem is.
DigDug text test. Increase text size to check the flexibility of a page.
The bulletproof concept.
A catchy phrase
The positive power of buzzwords.
Embrace flexibility
Let go of pixel precision
Plan ahead for worst case scenarios.
Great Web design.
http://simplebits.com/publications/speak/atmedia/bpwd-atmedia2006.pdf
Additional note and an apology:
A question was asked by a member of the audience asking whether anyone was using a layout similar to Simon Collision fixed resizable layout but without the javascript.
I raised my hand to point out that my site uses exactly this method, the only problem was that due to my first sentence being mis-heard it came across that I was just trying to pimp my site which was not intended, so I apologise for that.
If you would like to see more information on this layout, please see my write-up on the construction of this site: Drop-column layout.