One of the good things about CSS design is that it’s free-form. You can have div elements all over the place to structure content, and with intelligent absolute/float positioning, get them to order themselves logically on screen. An oft-forgotten advantage though about CSS design is that styling with it doesn’t (or shouldn’t) affect the semantic layout of the page. Or: rendering with/without CSS shouldn’t affect the readability of the page.

Stress test this by working with a browser like Lynx/Links, but if you’ve got Opera, the user stylesheet feature can also be set to emulate a text browser. In the absence of tables, text browsers don’t have any sort of positioning at all: your content is rendered exactly as ordered in the source. Which makes source code order important.

Who’d want to go over your sidebar before getting to the content? Go through those myriad links just to get at the real beef? Make it easier by having a “skip navigation” link as done on many sites, or better, have the sidebar load after your real content. If you’re good enough with CSS, it shouldn’t matter an iota with your layout.

The current source code order that I prefer the most is:

1. The header: Title, the <h1> tag.
2. Minimal navigation: the main pages of the site, and/or a spotlight link.
3. The content.
4. Sidebar navigation.
5. The footer.

As an added guideline, avoid repeated links on your site which merely serve decorational purposes. It’s a pain to read through in text browser mode.

You’ll notice that Vysnu follows these directives admirably. Except for the guideline above. You’ll have to wait till I get over em date boxes. Interestingly enough, Sig9 doesn’t. We’ll get to that on the next redesign, promise 🙂