Fluid Thinking

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:

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

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.

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.