Fluid Thinking

By Peter-Paul Koch

Times have changed for the better since the advent of Web standards. We can write a script or a CSS declaration, confident that Mozilla, Explorer and Opera will interpret it in roughly the same way. That confidence is a tremendous luxury, when compared to what we faced even a few years ago.

Not all incompatibilities between modern browsers have disappeared, though, and we ought to pay attention to the few remaining ancient browsers, too. What should we do? Hack the incompatibilities out of existence? Browser-detect undesired software and cast its users into oblivion?

…Or can we cater to incompatibilities and unusual browsers by flowing around the problems?

A weighty decision

A year ago I coded a site that looks distinctly worse in Netscape 4 than in more powerful user agents. I did this on purpose. I wanted to use modern CSS to apply an old-fashioned design without worrying about crappy browsers.

Nonetheless, it was a weighty decision. I’ve been educated with the axiom that any design should render perfectly to the last pixel in any major browser, and dropping Netscape 4 compatibility would have been inconceivable.

I kept looking nervously over my shoulder, expecting snide remarks that the design was badly implemented and that I didn’t know what I was doing. Fortunately, no one else connected to the project thought of checking the site in Netscape 4.

Later I understood that even if they had checked, it wouldn’t have mattered anyway. I’d managed to flow around the problems while doing what I was hired to do: the site was readable and the navigation worked. It degraded gracefully.

Graceful degradation

Apart from being the most… er… graceful term in the Web’s working glossary, “graceful degradation” is a simple but powerful technique. The first step in adapting that technique successfully is fluid thinking: accepting the unpredictability that rules the user interface of the Web.

Graceful degradation means that your Web site continues to operate even when viewed with less-than-optimal software in which advanced effects don’t work (no CSS in Netscape 3, no images in speech browsers). Add whatever special effects you like, just make sure the site is usable without them.

Graceful degradation has two basic rules:

1. Any browser must be able to view the content of the site.
2. Any browser must be able to navigate the site.

View the plain HTML file without any CSS or JavaScript. Is the entire text legible? Is the page content ordered logically? Are all links in proper working order? If so, you have built a fluid, simple foundation for your site.

Now you can add extra layers of complexity, thinking fluidly all the time. How will the site look at a less-than-optimal resolution? Will the site be accessible without the DHTML navigation? What about unreliable CSS implementations? What if some effects work and others don’t? What if everything goes wrong at the same time?

Don’t worry about the answers, asking the questions is far more important. Take an extra day for your next site and half a day for the one after that. Ponder the questions. Before your third site is done you’ll find the answers flowing into your head all by themselves.

Flowing out of the box

Fluid thinking will help you through a quagmire of minor bugs and differences, too. As an example, let’s take a look at the conflicting box models, arguably one of the most complex browser compatibility problems in CSS-based design as it’s practiced now.

• In the W3C box model, the width of a box determines the width of the content area, thus excluding the padding and border of the box.
• The Microsoft implementation measures width from border to border, so it includes padding and border.

Mozilla and Opera hold to the W3C standard, but Explorer uses the Microsoft model, so we poor Web Developers have one more browser incompatibility to solve.

It is possible to switch Explorer 6 to W3C standards mode by judicious use of doctype declarations, and conversely we can switch Mozilla to Microsoft mode. Finally, a CSS hack is also available.

So we’ve got plenty of tools for complex workarounds… but can’t we keep it simple?

The simplest way to avoid box model problems is to make sure they don’t matter much. If your box has a fixed width, a 5px padding, and a 1px border, Explorer will show it 12px smaller than the other browsers. If the design is fluid enough to accommodate this difference you don’t need to worry.

Sometimes there isn’t much room for fluidity. Start by asking yourself: Isn’t the design too complex? Beginning Web designers can show a tendency to think too rigidly and to assume a site must look exactly as they created it. In those cases a quick lesson in liquid design is the best solution.

Conclusion

In my view graceful degradation and liquid design are both subsets of fluid thinking, one explaining how to flow around browser support problems, and the other helping us to let go of pixel-precision in graphical design.

Think fluid. The WWW isn’t a fixed medium. It’s unpredictable. It will do unexpected things to your site, and the best you can do is go with the flow.

Keep it simple. The fluidity of the Web is not the problem, it’s the solution. If you accept that your site will never be viewed exactly as you want it, you understand the spirit of the Web and its standards.

Peter-Paul Koch is a freelance Web developer, writes and maintains the JavaScript Section and is an Administrator of the WDF and WDF-DOM mailing lists.