use semantics to guide design

Looking back, I realize that, yes, much of it was essentially chance. Or trying to make the columns the same height. Or what the designer had eaten that morning. But not all sites were done this way, and the sites that had other reasons for grouping were usually better.

Then I looked at the code for one of my favorite sites, and I was shown The Way: describe semantic containers.

By describing the containers semantically, instead of geographically (ie: #user_context instead of #left_gutter) you can give yourself a map and create a layout that’s both easy and logical.

my example

For example, on my site, I wanted to break the footer into sections. But where to put the copyright notice, which had previously been centered on the bottom? Easy: put it in the #footer_legal section, with the other legalese.

Another one of the four footer columns was described as #footer_standards, but then I wanted to add a link to an "about the site" page, which is not a coding standard. Instead I changed the column to #footer_techy and included all the technical links, including standards and site-information, divided into sub-sections.

logical design is ease of use

By describing semantically, you not only make your own design choices easier, you make navigation easier for your users.

Semantic descriptions force you to group semantically related content. So if your readers are looking for your privacy policy, but find your copyright notice first, they should be in a "legal-looking" section, and be able to find your privacy policy easily.

Of course, this isn’t limited to design elements within a page. On a larger scale, you can use semantic groupings to make user-interaction easier. As Eric at Internet Duct Tape suggested, you can use mind-maps to model user interaction, and also to model site organization.

So pay attention to your content. Use semantic ids and classes to your, and your users’, advantage.