CSS Hierarchy.

A common mistake I find quite often is the hierarchy of information on websites. Its common sense to put the most important information or the most accessed information at the top where it is easy to get at.

Don't be fooled into thinking there is only one view of your site. There are two types of hierarchy built into your site.

• Frontend: hierarchy created by a CSS style sheet.
• Backend: hierarchy created in your code.

95% of your audience will see number 1, a CSS stylesheet usually controls your frontend hierarchy. This means no matter what order your content is in, a stylesheet can override that order through positioning.

The other 5% are users who cannot see your CSS stylesheet.

Reasons for this may be:

• their browser does not support CSS;
• they are using a plain text browser like Lynx Viewer;
• they are using a screen reader like JAWS;
• Your CSS stylesheet is unavailable or faulty.

Lets have a look at how this hierarchy will look without a CSS stylesheet. It appears in the right order, menu at the top followed by the main content.

Now have a look at kottke, its a great site with the CSS stylesheet in place but lets see how it looks without it.
Why hasn't the hierarchy structure followed through from the stylesheet view?
Why is the menu now half way down the page in a not so noticeable spot?

CSS driven site's content can go anywhere, so when kottke was coded, the menu may have been put in last therefore it situates further down than say the blog. Another reason may have been the implementation of a blog tool like Movabletype which may have pushed it down further. That is why you should always test in every situation possible.

A simple way around this to move the important content to the top in your code. If you dont un-nest any division tags and simply reorder your hierarchy you wont have any problems. Remember you are not changing the appearance of your stylesheet view, you are only changing the structure order when a stylesheet isn't available.

Now all types of visitors will view the same structure of your content no matter how they see your site, from a PDA to the latest version of gecko.

One more tip before I leave you to re-arrange.
You can style your plain code. The trick is we only want the styles to show when the stylesheet doesn't.

For example, the following will add a horizontal rule:

Add to your code.
<hr class="breaker">

Add to your stylesheet.
.breaker {
display: none;
}

The display: none; part simply hides the horizontal rule from the stylesheet but displays it if it can't find or access the stylesheet.

Hope this has been helpful and will help make the web an easier place to be.