Layout - Refactoring HTML: Improving the Design of Existing Web Applications - page 183

Move Content to the Front
When reading the raw HTML from start to finish, the main content of the page should be the very first thing
encountered. Sidebars, headers, footers, navigation, and such should follow.
<div id="left">Left sidebar</div>
<div id="content">Page content</div>
<div id="right">Right sidebar</div>
<div id="content">Page content</div>
<div id="left">Left sidebar</div>
<div id="right">Right sidebar</div>
Motivation
Search engines often treat content earlier in the page as more important than content later in the page. You
usually want the unique content on the page, not the navigation, advertisements, logos, and other froufrou.
Putting content first is extremely important for accessibility. Screen readers see the page as a linear sequence
that starts at the beginning and continues to the end. Pages laid out as two-dimensional columns are big
problems for blind readers. For these readers, especially, it's really important to put the crucial content upfront
rather than making them wade through several dozen irrelevant links first.
Potential Trade-offs
Insisting on having the content first does make designing CSS stylesheets with positioning more difficult. You'll
likely need to modify any such stylesheets to account for the new content order.
Mechanics
To the extent that static content such as headers, footers, navigation, ads, and sidebars are repeated from page
to page, there's usually some constant string you can search for, such as id="sidebar" . If your pages are
structured very consistently, you may even be able to automate moving the secondary content after the main
content. More often, though, you'll need to find these issues manually unless all the pages are generated out of
a CMS or database of some kind. If that's the case, you just need to update the template.
The biggest problem is likely to be reorganizing the CSS stylesheet to support the new content order. CSS is not
as independent of content order as one would like it to be. However, the techniques given in the first section in
this chapter for converting from a table-based layout apply here as well. There is one common problem I did not
address in that section: putting the header after the main content. This is tricky, though it can be done. If you
don't want to update the stylesheets just yet, you should at least install skip links, as discussed in the next
chapter.
However, if you do want to go whole-hog, the trick is to absolutely position the header at the top of the page
and then give the content and sidebars enough of a top margin to slide out of its way. This is not a perfect
solution. It does tend to let the main content bleed over the header at very large font sizes, but it's adequate
for most sites.
Imagine we've added new div s for headers and footers, as shown in Listing 5.15 . The footer is actually inside