Content first layouts can increase search engine visibility by placing your header and navigation area after the main content area in HTML. CSS can reposition the elements so they appear at the top of the page.
What is a content-first layout?
Most pages look like this to a search engine spider or screen reader:
My website home about contact links The best website ever. As you can see I am the best ever.
With CSS, we can arrange this search engine-friendly page —
The best website ever. As you can see I am the best ever. My website home about contact links
to appear the same as the above page would to a normal user.
How to build the template
- Example of a two column layout with left-hand navigation.
- Two column layout with right-hand navigation
The navigation follows the content, and the header follows them. Putting the navigation second is easy; you float both the content and the navigation right. Set position:relative on the wrapper, and absolutely position the header to the top. Set a height for the header and set a top margin equal to that height on the navigation and content. For more details, check the examples.
Why content first
The first thing the search engines see (after the title and meta tags) is the name of your website and the names of your pages. For usability's sake, the anchor text in my navigation is brief and easy to understand. For SEO, it's horrible. Feeding the spiders an H1 tag early in the HTML gives them more unique details about that page faster.
Accessibility of content-first HTML
There's been heated discussion about the accessibility of content-first templates. Some say it would help users with screen readers get to the content faster, not having to bypass the header & menu. Others argue it would present more difficulty because it's not the norm. I've never used a screen reader before, so I can't say.
Consequences of Content First
The biggest consequence to me is that your site will not be friendly to the other people who work on it. Not a lot of people will think to look at the bottom of the page if they want to add a link. If you use includes, most of your page will be in the footer include, which I admit has confused me a few times (even the ones I made myself).
All in all, it can be a pretty odd method, but it's fairly easy to do. Who knows, you may find some clients asking for it!