Web Page Accessibility – Placing Content First With CSS

Search engines give more weight to a web page that has content closer to the top of the HTML document. I am referring to the
source code not the visual content you see in your browser. If you incorporate this in the design of your web site, it may just give you the edge to outrank your competitors.

Most web sites these days are designed with tables therefore the navigation will appear first in your source code. You really don’t want this because you want your main content with all your keywords to be spidered first.

With CSS you can easily structure the content to appear first with the rest of the source code following it.

Here’s an example of a web page I recently redesigned using CSS where the content is on top. It was converted from a table-based design to a CSS-based design for better accessibility.

CSS-based web page

Use view source to read the html code.

Here’s the CSS:

External Cascading Style Sheet

How I positioned the content first.

1. I first structured the HTML in the same order as the order in the style sheet.
2. I put the content div before the sidebar in the source order then floated the content left and floated the sidebar right.
3. I placed widths on the floats for it to work correctly.

That’s it!

Tip
If you are not familiar with CSS and still wish to use tables use the “table trick”

This means placing your navigation on the right side of your document.

Here’s the web page for an e-book I designed using the table trick:

Web Site Promotion Strategies

If you want your web pages to be accessible to as many people as possible plus get high rankings, then incorporate CSS into the design of your future web sites or redesign your current one.

Comments

  1. Peter Murray says:

    Your example does not have the content first – it has a header section. Not the example I’m looking for.

  2. Joel says:

    I wish I could read the rest of Naff’s comment. I don’t see a way to bring the rest of it up.

  3. @Peter: Yeah, in the html the header should be found somewhere after the content and simply placed with position: absolute; top: 0px; using CSS.

  4. Marina says:

    Danke!

  5. james says:

    stuff like this that makes the internet so damn good

Trackbacks

  1. [...] While many sites may not be affected by this knowledge (the first ad is typically the best performing anyway), you should use custom channels to carefully track each placement – make sure the ads with the highest CTR appear first in the source (you can use CSS to juggle this around). As an example, imagine a sample page that has a small ad unit in the top right of the page, and a big unit in the center of the page. The big unit likely performs best.  However, the small ad unit will get the best paying ads, leaving your best placement with lower performing ads.  You want to align your best performing placements with google’s best performing ads. My own opinion is that this is awful for 2 reasons: [...]

  2. Websites…

    Web Page Accessibility – Placing Content First With CSS…

  3. NH Web Design…

    [...]Web Page Accessibility – Placing Content First With CSS[...]…

  4. Accessible Web Design – Creating a Website that everyone can look…

    It’s easy to get carried away when designing a website. Web design is an art. One way to ensure you have a great website is more and more people to your website and gets more hits. Here are some tips to make sure your website works for everyone: …

Speak Your Mind

*

CommentLuv badge