Seeing the sequence.
So how to see your page? Look at the content. Before you decide you want "a three column layout", ask your data what it says it is. What are the general groupings there?
On this page, I came out with four. There's all this rant, so that would be Content. There would be navigation or at least supplemental explanation, so that's Menu. I knew I'd want a fancy logo or some such across the top, so Head. And I wanted Lance Arthur's brilliant WaSP banner ad somewhere. It didn't really fit with the other groups, and it's optional, so I made a Tail div. Almost by itself this formed into two columns, one wide, with top and bottom boxes. I could try other things, but this worked so I stopped there.
My point is I didn't view this page as a layout first. I let the content inform the structure. I looked to the message to decide what the enhancement should be for visual layout. That's the trick: let your message inform each enhancement. And as each enhancement relates back to the core it's fairly easy to not lock out any browser type, because your message doesn't end up in an enhancement layer -- it stays in the core.
So, for example, you can have fun with javascript, without making the common mistake of requiring it for the navigation to work.
Each browser gets your message. Each browser displays the enhancements it can use. No browser is locked out. Because you're building outward from the core HTML, the way the code was designed to be used. The code makes quite a bit of sense once that framework is recognized.
As less obvious example might be my title image. It's nice, goes well with the article in a graphic browser, but is pointless to an aural browser or text browser. It's not really integral in a way that's worth interrupting those readers with an ALT tag. So that image is not in the HTML. It's a background image in the CSS for screen. If I felt it wasn't relevant enough for print copies of this article, I could make a CSS for print media that excluded it. Using background images is a nice trick because it lets you use the visual richness of the screen without providing clutter for other browser types. In this page I've got five background areas to play with; it isn't limited to the body element anymore.
As an afterthought I should probably exclude the WaSP banner from print media; it's a nice image but requires its animation to make sense. In that case I could make it a bg img, and then place a proper sized transparent gif in the HTML to provide its link and ALT text.
You get the idea? Thinking of your page as message and enhancements gives you a way to step back and consider how each enhancement should be applied, and with little worry that you're cutting out one media out by a decision in another.
Otherwise you can end up with lockout pretty quick. Right now there's several personal sites showing off complex CSS layouts. But many of these are pointless, beyond bravado, because there's no logic to their page's message when stripped of this layout; they disregarded how the message plays in the linear form of their HTML. Which is up to them, but if the message doesn't work in the other browsers, they may as well have saved their sweat and used the old table hack, because their page still only makes sense on PCs and Macs.
But they'll catch on to this. These are people who like a challenge. Thinking about your message for a multiviewer web is new. The same bravado will get them to figure out how to have the complex visual structure they like without breaking up in other media types. They'll show the rest of us quite a bit of what the code can do.
CSS layout got a lukewarm response in some design circles because it seemed limited compared to the familiar table hack. It isn't, it's just that we've only started to use it. As various smart-asses, myself included, learn its details, we push what's possible. It only took a few months of messing with CSS to match table possibilities. Now that that's sorted we've got all of the media types to play with. We're no longer artificially locked to PC and Mac.
