Source ordered content: The best kept secret in web design
As a professional web developer, I’ve put together quite the toolbox of tricks and code snippets. The one tool that’s been with me from the beginning is source ordered content. When I first stumbled onto it some eight years ago I didn’t think it would work. Search engines penalize websites for keyword stuffing, cloaking, and a host of other code-related cheats, “but you’re telling me I can put the markup of my website in a different order than how it shows up in the browser and search engines will love me for it? That’s crazy talk!
Crazy, but true.
What is source ordered content?
There are two ways to arrange XHTML markup. First, you can order the code to follow the way a browser renders the page visually. If you have a tableless web design with a header at the top, left-side navigation, right-side content area, and a footer at the bottom, the basic markup would look like this:
<html> <head> <title>Ordered To Match Visual Page</title> </head> <body> <div id="header"></div> <div id="nav"></div> <div id="content"></div> <div id="footer"></div> </body> </html>
And the style sheet would look something like this:
#nav {float: left;}
#content {float: right;}
#footer {clear: both;}
The second option is to use source ordered content, also know as “front-loading” or “content before navigation”. Source ordered content means that the order of the content is established by the XHTML markup, i.e. the source code. It’s not tied to how the page looks in a browser. The example markup above would turn into something like this:
<html> <head> <title>Source Ordered Content</title> </head> <body> <div id="content"></div> <div id="nav"></div> <div id="header"></div> <div id="footer"></div> </body> </html>
Notice the content div is first, even though the header is the first element you’d see in your browser. It’s followed by the navigation, the header, and then the footer.
The style sheet would look a bit like this:
#header {position: absolute; top: 0; left: 0; height: 100px;}
#nav, #content {margin-top: 100px;}
#nav {float: left;}
#content {float: right;}
#footer {clear: both;}
Obviously more is needed for a real layout, but the basics are there. The header is taken out of the display order and moved to the top of the page with absolute positioning. To keep it from covering the content and navigation div’s, a top margin is added to them that’s equal to the height of the header. When the page is viewed in a browser, the layout looks as you’d expect and no one’s the wiser. Sneaky, sneaky.
The benefits
For the extra work it takes to style the layout, there are big returns, including:
Improved search engine optimization
Search engines don’t care what a web page looks like. They only see the underlying code. They also place more emphasis on text at the beginning of the markup than on material that shows up later. That makes source ordered content integral to search engine optimization. You can feed Google, Yahoo!, and MSN your unique, keyword-rich content first and put elements that repeat from page to page at the end of your markup. The result: improved search engine rankings for your targeted keywords.
Better accessibility
Source ordered content allows a website to be delivered in the way that best serves the visitor’s needs. Disabled visitors rely on screen readers and other assistive technologies that use the markup of a web page to communicate what’s there. With front-loaded content, they get the unique material on each page first without having to skip over the header and navigation on every page. Regular visitors, on the other hand, experience the same website as they would any other.
Quicker loading content on slow servers
Back when dialup connections were the norm, visitors would wait up to eight seconds for a page to load before they went somewhere else, which lead to the aptly named “eight second rule”. But today, according to usability expert Jakob Nielson, “the real rule is actually one second“. Speedy broadband connections are everywhere, and visitors expect instantaneous page loads. Because the content area is first in a source ordered layout, the browser can display the main text right away while images and scripts download. This gives the perception that the web page is delivered quickly even when there’s a wait.
Better targeting of AdSense advertisements
AdSense advertisements are context sensitive. They work on the theory that a visitor is more willing to click an ad that’s related to what he or she is reading. So Google sends out a special bot to read and interpret your content, then they find ads that match the subject of each page. With your articles front-loaded, it can be easier for the AdSense bot to determine what the page is about and deliver more targeted advertisements. Better targeted ads mean more clicks and more revenue for you, the publisher.
If you haven’t already, give source ordered content a try. I’m sure that once you do you’ll find that it’s one of the handiest tools in your web design toolbox.
About Jason Garrison
Jason is a freelance web designer and developer who has a healthy obsession with web standards. When he’s not knee-deep in code, you can find him in a meditative state communing with the universe.
