Wednesday, July 15, 2009

Table-Less Design

So this was the question of the week: What is table-less design and how do I do it?

Traditionally, web pages were designed using table tags in order to achieve the exact layout desired. It was easy to use and easy to control your look and feel, although quite difficult to navigate when using numerous nested tables. Another drawback is the need to touch every page of your website in order to do a redesign.

Those days are over. The new trend in web design is table-free using only CSS style sheets to control your layout. Personally, I prefer this method. I like keeping design separate for code. Some of the benefits are:
  • the code is easier to read
  • a major redesign no longer requires touching every page of the website
Additionally, if you use standard web tags such as h2, li, fieldset, etc. you not only are using tags that are easy to remember when coding, but you are also improving your SEO. In the case of a team working on a website, using these standard tags also helps maintain consistency despite numerous coders with unique habits. Classes are great, but if you can use a standard tag instead, go for it and you'll save yourself a lot of headaches in the long run and shorten the length of your CSS code as well.
I now mainly use table-less design. My goal has always been to make websites highly accessible and frankly, tables guarantee no matter what browser is used, the site looks exactly the same. Going table-free has a risk in that not all styles are translated the same across browsers. However, you can use extra styles to accommodate this. The key here is TEST, TEST, TEST. I hope to do more website table-free so that frequent and easy redesigns can be easily achieved saving time and money as well as opening up creative possibilities with no limitations.

No comments:

Post a Comment