Why should you care if your website is built with tables or CSS?

Yesterday, I was invited to have lunch at Twin Fish Creative‘s monthly staff get together. Since, I’ve been doing a lot of work with them, I thought I would take the opportunity to explain what I do to their Photoshop files and more specifically how CSS is used.

What’s this CSS?
HTML tags were originally designed to define the content of a document. They were supposed to say “This is a header”, “This is a paragraph”, “This is a table”, by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.

As the major browsers continued to add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification, it became more and more difficult to create Websites where the content of HTML documents was clearly separated from the document’s presentation layout.

To solve this problem, the World Wide Web Consortium (W3C) created STYLES. Styles sheets define HOW HTML elements are to be displayed, just like the font tag and the color attribute.

So what’s the advantage?
Styles are normally saved in an external file which allows us to change the appearance and layout of all the pages in a Website, simply by editing one single document! This saves us loads of time which means money for our clients.

Style sheets also allow us to reduce the amount of HTML code which means smaller file size which load faster and better search engine ranking.

How is code reduced?
Let’s take the following example. Below is a screenshot of a typical navigation.

Navigation Bar

The old way of coding this nav bar using tables would be as follows:

  1. <table cellpadding="0" cellspacing="0" border="0">
  2. <tr>
  3. <td><img name="image1" src="images/home_over.gif"
  4. alt="home" border="0" /><a href="#" onmouseover="image2.src='images/about_over.gif';"
    onmouseout="image2.src='images/about.gif';"><img name="image2" src="images/about.gif" alt="about" border="0" /></a></td>
  5. <td><a href="#" onmouseover="image3.src='images/services_over.gif';"
  6. onmouseout="image3.src='images/services.gif';"><img name="image3" src="images/services.gif" alt="services" border="0" /></a></td>
  7. <td><a href="#" onmouseover="image4.src='images/portfolio_over.gif';" onmouseout="image4.src='images/portfolio.gif';"><img name="image4" src="images/portfolio.gif" alt="portfolio" border="0" /></a></td>
  8. <td><a href="#" onmouseover="image5.src='images/news_over.gif';"
    onmouseout="image5.src='images/news.gif';"><img name="image5" src="images/news.gif" alt="news" border="0" /></a></td>
  9. <td><a href="#" onmouseover="image8.src='images/contact_over.gif';" onmouseout="image8.src='images/contact.gif';"><img name="image8"
    src="images/contact.gif" alt="contact" border="0" /></a></td>
  10. </tr>
  11. </table>

Using css the same navigation is reduced to these few lines:

  1. <ul id="nav1">
  2. <li><a class="home" href="#"><span>home</span></a></li>
  3. <li><a class="about" href="#"><span>about</span></a></li>
  4. <li><a class="services" href="#"><span>services</span></a></li>
  5. <li><a class="portfolio" href="#"><span>portfolio</span></a></li>
  6. <li><a class="news" href="#"><span>news</span></a></li>
  7. <li><a class="contact" href="#"><span>contact</span></a></li>
  8. </ul>

If you’re not convinced that the result is the same, take a look at the example in action or download the files.

How is search engine ranking improved?
Search engine spiders see the same thing we do, words. Open any browser window, click on View and Source (IE) or Page Source (Firefox) and take a look at the code. A Search engine friendly site should be easy to read. If your website is full of code which doesn’t mean much to you, chances are it won’t mean anything to search engine spiders either.