Structuring your pages: Part Ia

Previously, in Structuring your pages Part I, I took you through the mental processes that go into structuring the underlying markup. What has since been pointed out to me is that I only touched on some of the "other" structural considerations.

The one primarily emphasized in the previous article is probably the most common: tradition structural demands. That is, typically, in print and on the web, there are common structural elements: headers, footers, content blocks, navigation bars or sidebars, etc. These can logically group the content contained within. Moreover, each of these elements have some meaningful and often logical relationship to their placement in code.

There are several other structural considerations, which I merely brushed on:

• Design considerations
• Search engine optimization
• Unstyled content readability
• Design flexibility
• Sub-structural elements

"Design considerations" might seem an odd one considering since the goal is largely one of separation of content and presentation. However, I think everyone needs to remember that CSS based designs are not 100% separation, it is simply a step in the right direction. Much further, of course, than tabular designs, but still require a great deal of embedded design. The whole idea of embedding structure into you content, in fact, is somewhat a step away from content-presentation separation.

In fact there are two components to structural layout that bare on design elements: amount and placement of elements. It almost goes without saying that with a minimalist structural markup philosophy, you're never going to achieve complex designs. This goes to the "design flexibility" point as well.

If your goal is the epitome of flexible layouts, ultra-skinnability, come CSS Zen Garden, then you're necessarily going to want more structural elements which in turn can be styled to a designer's needs. This flexible layouts also bears on the types of containers a content producer might use in content markup (Part II of this discussion).

"Search engine optimization" was briefly discussed with the placement of the navigation element. While SEO might bear more on content markup, it should also be reflected in your structure as well. Consider the obvious question: "should I place my header at the top or the bottom?" It seems quite silly for a number of reasons, but there are lots of good reasons to place the header at the top. For SEO the most obvious reason is that it probably contains the most important elements of the entire site's importance: your title. Burying your title at the bottom means it's last in terms of the page's importance. That's simple information theory.

Burying your title also bears on the "unstyled content readability." While CSS can place your header visually at the top, if you wanted to, there would be no control of how the page is viewed without styles. Searchbots, those little things that go around an index your sites, view pages without styles. So do many accessible browsers. And so do many people with visual impairements.

UCR also means that if your repetitive navigation appears above the content, someone without styles turned on has to skip over, or read over, all the navigation every time they want to read your content. There are a number of solutions, including skip navigation, but it is something to consider when structuring your page.

Another obvious consideration are sub-structural elements. I have largely outlined structural elements that might be best classified as "super structure" elements. Or, in continuing the skeletal analogy, what might be consider the "skull" and "spinal cord" of the human skeleton. However, even the human skeleton has specialized bones for particular super structures. This might be akin to grouping I discussed at the end of part I in the "more structural elements" section. However, I think you can make the argument that this concept of grouping can be taken one step further.

Imagine that the content section, within the normal content, might have a section dedicated for "news". The news section could contain a header declaring the section name. In addition each news story might have a sub header for the title and by-line, a paragraph long description, and a list which might include publication date and other information. Every story and the declaring header should probably be grouped within a structural element.

What seems very obvious about sub-structural elements is that they need not appear on every page, but it is still a structural consideration.

I am also fairly certain that no discussion could bring together a comprehensive list of every structural consideration. However, you should be able to see that with every splintering, from super-structural to the ones mentioned above, the value of the consideration exponentially decreases.