CSS based layout

Why CSS based layout is better for your web design project

Wed, 18 Mar 2009 10:06:02 +0200

My job is to create a clean, valid, CSS-based tableless layout for your website. Here are some directions of what "CSS-based tableless layout (or block elements CSS positioned)" means and why it's better to use it.

The website gets easier to maintain and update

Thanks to clean markup and the separation of presentation from content, CSS-based tableless layouts create code that's easy to read and understand. Even complex changes can be made quickly. In fact, the entire look and feel of your website can be altered with just a few new images and an update to the CSS file. The less time it takes to update and maintain your website, the more money you save.

Your website performs better

Because styles are kept separate from the code, CSS-based tableless layouts allow for "lighter" pages. A visitor downloads the external style sheet for your entire site on the first page they come to. Then, when they go to other pages, they only request the content code. Your website downloads fast. Your visitors have a great experience. You save on bandwidth charges.

Search engine optimization is built-in

For search engine optimization, what's at the beginning of a web page's code is more important than what comes later. CSS-based tableless layouts allow for source ordered content. You can front-load all of your keyword-rich content at the beginning of the code, put less relevant header and footer information at the end, and then use CSS to position everything. Search engines give your real content more weight and your visitors see a beautiful website.

Also, because there's less code in a CSS-based tableless layout, there's a higher ratio of content to code. You get a higher keyword density since there's more meaningful content on the page. (Keyword density is used to determine how relevant a web page is to a particular search term.) That can mean better search engine rankings.

Your website can meet accessibility requirements

Much like search engines, screen readers and other assistive technologies depend on a web page's code to describe the page. Imagine if you had to listen to a screen reader recite the same header information on every page of a website because that's what was first in the code. With source ordered content in a CSS-based tableless layout, disabled visitors can experience the unique content on each page first and follow the navigation when they need it. Government websites are already required to meet accessibility standards. It's only a matter of time before these requirements extend to business websites.

Avoid mistakes in HTML because of the clean code

Gone are the days, when just uploading a HTML page could stand as a symbol of elegance. Web design has undergone a paradigm shift over the last few of years and professionalism and standardization in web design have been able to finger point the common human errors in a website.

Aimless coding is a common human error sometimes shown when using a not so up-to-date web editor to build your pages. Standardization of coding using most recent codes is essential in web design today. If you're not sure if your website code is up to scratch you can check using tools such as the W3C code validator tool online, it's free to use and just takes a couple of minutes.

Chances are, if your website was built many years ago, you might be using old code. You should consider updating code so that the search engines can effectively read and rank your pages accordingly. Remember, search engines like fresh new content and up to date coded pages.