If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

(See benefiber.com)
 
The choice is so clear. Tables or CSS? Tables are gritty. CSS is a smooth supplement to the structure of your site’s design.

When I first started out with the eCommerce application I purchased to run my online store, I became frustrated by the fact that everything was either table or control driven. I continued building my site until the time I got so frustrated I decided to have a major re-think. I wanted to design my site the way “I” wanted it and not the way the vendors wanted me to.
 
I spent time getting to grips with and learning CSS inside out and have to say it has made a huge difference to the configuration and manageability of my store.

Using CSS, you can…

• Write faster loading, dramatically smaller pages
• Speed up site maintenance by separating the content from the layout
• Write Device-independent pages that will work on everything from a PC to an Internet-enabled refrigerator
• Write search-engine friendly pages that can actually be understood by search-engine spiders
• Write more accessible code, which is now a legal requirement in some countries 

By ditching most of the tables and controls I found in my online store application - such as a deeply embedded Top Banner, Top Sub Banner, Left & Right Nav and Footer - I managed to reduce the amount of table and control code. I was successfully able to build my site using CSS rather than the built in tables.
 
I now only use the original code within the shopping cart aspects of the site. Everything else is controlled by CSS. Apart from reducing the total amount of code and thus making my store more “spider” friendly, it has dramatically increased the page load time and has made for an easier to manage/ more configurable site as I am no longer a “table slave.”
 
Compared to other coding languages and deeply nested tables (which get confusing to work with), CSS is relatively easy and there is wealth of information and “how to” guides on the Internet regarding it.

To get you started there is a great book called Designing Without Tables at http://www.sitepoint.com/books/css1/

You can also take a look at the W3 Schools site at http://www.w3schools.com/css/default.asp to give you a solid grounding. 

What’s Up, Doc?
I should mention that once you adopt a CSS approach to your store you should understand the importance of using valid DOCTYPES to ensure that all browsers render your pages the same. There seems to be a lot of confusion regarding DOCTYPES, but below is a small intro into the subject.

The standard DOCTYPE you could get with your storefront application may be in ”quirks” mode as it does not point to any particular standard. In other words, it tells the browser to render the page the way it wants to. You may find your DOCTYPE at the top of HTML in your pages:

The above example DOES NOT tell the browser to conform to a standard and only when including a standard (placing a URL to a standard located at  http://www.w3.org/ -  see below) are you telling each browser to adopt that standard and display/ render the page according to the standard given.

I have noticed that the “transitional” DOCTYPE is the only one that actually works successfully with my own storefront application and an example of the DOCTYPE is as follows:

A technote about DOCTYPES can be found at: http://www.htmlhelp.com/tools/validator/doctype.html

Special mention: If you have built your site using quirks mode and only now want to change to transitional (using the URL), the chances are you will have to realign and change many aspects of your site. Therefore it is always best to start out using the correct DOCTYPE from the beginning.

Good Luck to you all!

Contributed by John Kenney
Flowers Delivered in the UK
http://www.flowersdelivereduk.com
(edited for readability by Jonathan Catoe ~ Open Your Storefront)