Source Ordered Content

Source ordered content means putting your most important content at the beginning of your site's <body> section. There are many theories as to why this is preferable:

  • The page content loads faster because it doesn't have to wait for everything else that appears above it
  • Visually-impaired site visitors using screen readers don't have to listen to the nav menu before the content on every single page of the site
  • It is easier for search engine spiders to tell which content is the most important on a page

The secret to source ordered content (SOC) is all in the CSS; you can put objects anywhere you want on a web page regardless of where they reside in the HTML. Even though your navigation menu may live way below the main content in your HTML file, you can use CSS to put it above, to the left, or to the right. And SOC isn't just about the nav, either. If you have multiple content areas, you should always consider which is most important and put it before the others. This is for accessibility purposes just as much as it is for SEO, as screen readers and Google spiders alike do not "see" your layout in the visual sense; they read the HTML top to bottom and therefore give more weight to the items they find first.

SOC is also good for designing mobile sites, as it helps you keep track of what is most important and can greatly affect your design. You can use include files and display only the most important content on mobile browsers, or just reorder the content using CSS (See this tutorial for more information on building mobile-ready sites).