It makes sense to standardise your CSS layout and styles development just as you come to rely upon frameworks for javascript and PHP, I guess. I came upon Elements V2, a nice and tight CSS framework that does not try to do too much but does it well.
I you are in a hurry to produce a new site, it can help you get started on the right path by literally laying down the framework for your content. There is always the danger of such projects to try and be too-helpful at times–the included Lightbox/prototype is overkill. But the mass CSS reset seems to standardise and level the playing field for all browsers so it’s worth grabbing just for that feature alone. Naturally, not a first: css reset.
And of course, from a SEO standpoint – you can then take Elements V2’s layout, move main content div to the top of the source code and the header div to end of the file. You then reposition via CSS and some nested layers… The end result? First bit of text that Google sees on the page is the specific body content – H1/2, titles and so forth. Bits that are repetitive like header and side menus simply do not need to be there at all. This technique is also known as Source Ordered Content or content before navigation. Here is an example SEO content shuffle on a search engine optimisation project I am tinkering with.
A snippet of this non-linear approach to source ordered content content shuffling (takes a while to get your head around the idea):
...
</head>
<body>
<!--Main Container - Centers Everything-->
<div id="mainContainer">
<!--Main Content-->
<div id="mainContent">
<div class="content" id="main">
<h1>Welcome to <strong>ASAP Cleaners</strong>...
...
...
</div>
<!--Footer-->
<div id="footer">
...
...
</div>
</div>
<!--Header-->
<div id="header">
... links here
... more links
</div>
...
and here is what it looks like in reality:
I am not going to go into details and bore you with tedious explanations on how to float elements. Just visit the source ordered content example and view the source.
To an extent, I already do this on the http://fragged.org blog itself – what you see as left side menu actually follows behind all the posts in the source code. I cannot really measure how this works in comparison to a normal linear source. I guess some experimentation will be required but that’s for another post 🙂
Word to the wise: if your pages’ source code gets to be quite big in size, you may consider not using the “content before navigation” method as your page links may be disregarded by some crawlers (with a 100k or so limit for source size on each page). Also, there is an accessibility consideration–some say source ordered content is being harsh on people with disabilities (er, blind) who use reader software (it cannot find the menus, allegedly) so be careful.
[…] fair – I used to prefer table based design until not so long ago when I discovered the benefits of shuffling content via CSS for SEO in order to get the more relevant text further up the source code of the page. And that’s […]