CSS Web Design, A Top to Bottom Approach

Take it from the top.  A familiar phrase used to mean start from the beginning.  In terms of CSS web design and SEO, you want to start your web pages with the most important content at the top of your web page.  We’re not talking about the visual page, but the coded HTML behind the scenes.

Though you may not have put much thought into it, you would probably assume the search engine parser crawls the page from the top down.  We generally ignore how that fact impacts our SEO strategy from the web page coding level. 

With proper CSS design, the style sheet dictates layer positioning on the visual browser page.  That allows the designer to put keyword rich content at the top of the HTML code to be crawled first, without regards to the visual layout in the web browser.  It also allows for the placement of important links where the web crawler will be sure to find them.

Keyword Primacy and SEO

Don’t discount keyword positioning when implementing your SEO web design.  The paradigms of SEO require us to provide descriptive page titles and meta tags.  Take note of where those elelments exist in your page’s HTML code— at the very top.  Web crawlers take into account primacy when indexing your page.

The concept of primacy relies on the logic that the most important information will be presented first on any particular web page— like the title and keywords.  Once the crawler moves past the meta tags to your content, it assumes the subject focus for your page should soon follow.  If it doesn’t, your page indexing and ranking will suffer. 

The logic of primacy falls in line with search engines’ goals to provide reliable search results.  We’ve all seen the old internet bait and switch, particularly in emails.  So making sure that page content is relevant to the page title, and vice versa, plays a role in the indexing alogrithm of most search engines.

Top Down CSS Design Tips

1. Keyword Rich Content First
Layers containing keyword rich content should be the first layer after the ‘body’ tag.

2. Menus and Important Links Come Next
Put your main menu, and any other important links after the keyword rich content.  This assumes you have parsable links.  If you utilize Flash for your menus, this doesn’t matter— we’ll get to Flash in a moment. Parsers find text the easiest to crawl, so putting important links immediately following the most parsable content, increases the crawlers ability to index all of your site’s content.

3. Place Alt Texted Graphics After Links
The important thing to remember is alt texted graphics.  If you have aesthetic graphics that don’t have alt text—  either get rid of them, or find an appropriate alt text entry.  This doesn’t include Flash content.

4. Flash Files Go Last
Put your Flash based content at the very bottom.  The crawler can’t do anything with it anyway, so put it at the very end so it doesn’t get in the way of good content

The SEO Big Picture

In the grand scheme of SEO, our CSS design won’t put us at the top of the ‘charts’ so to speak.  Yet bad design can hinder any good SEO effort.  If you’ve invested in professional SEO consulting, you want to ensure maximum value for your investment.  So look at CSS web design as that leaky faucet that slowly drips, and over time wastes resources you would rather use in more important ways.

Advertisements

1 Response to “CSS Web Design, A Top to Bottom Approach”


  1. 1 adam January 11, 2009 at 6:28 am

    2008 was a wonderful year for web design and technology in general. I hope to see some excellent designs this coming new year.
    Check out Adamssite for some eye popping website templates, web page templates, and html templates.
    Happy New Year,
    Adam


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s





%d bloggers like this: