Web Design: Organization
Initially, a site’s organization is an extension of the content. That is, the content determines the flow of information. This is for the overall orgainzation. When it comes to the page, the same is true. There needs to be a hierarchy established for the parts of content: the title, the navigation, the main body, etc.
Accessibility and usability play a large role here as well. The page should be easy to understand, first and foremost. The structure, which includes the hierarchy, should be solid, as in easy to understand. Navigation needs to be identified and identifiable. Headings, paragraphs, and other structural elements should be marked up semantically, and their visual presentation should reflect their semantics. It doesn’t make sense to use a level-one heading ( <h1> ) and make it smaller than a level 2, if size is one of the distinguishing visual cues.
Overall
The overall organization of a page (implying alll or most of the pages of a site) can be broken down into a few main elements. Most often, you have a banner, or header (not to be confused with a headline or h tag, or what’s contained in the document <head>), navigation, the main body (main text, again not to be confused with what’s in the <body> tags), and a footer.
The normal distribution is, from top to bottom, header, body, footer, with the naviagation included in either the header or body. This is not set it stone, it’s just a standard way of organizing things:
In addition to these four elements, there is a fifth that is often used, which is a container or wrapper. This is often needed to get floats under control.
Why?
Using these basic elements just makes sense. They can easily be (and should be) formed by ID-makred divs. These elements can be combined in an awful lot of ways. Take a look at Layout Gala, where Alessandro Fulciniti put together forty combinations for you.
The markup as ID-identified divs is simply the easiest and most logical method. Each of these areas/elements may contain a multitude of other amrkup, and since the div is defined as a block-level generic container, to, “n conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents” [w3c], the div is the optimum tag.
With the surrounding div, it becomes simple to differentiate between elements in one part of the document as opposed to others in terms of styles. Thus, we can speify a paragraph in the footer have smaller text by using #footer p { text-size: 90% }, rather than using classes.
Veerle Pieters, a Belgian designer/illustrator, explains how she did just this as part of a redesign of her site.
