The CSS Experiment

I recently undertook a big project here at If Jesus Had A Website and converted the entire site into a CSS layout from a tables-based layout. You may have noticed a few minor changes, but by and large the appearence has changed very little.

You may wonder why I took the effort to do such a project when it had very little effect. The truth is that it had a much more dramatic effect than you may realize unless you've worked extensively with CSS.

As for myself, I have been working in web development for a number of years now, and I had always been partial to using tables for layout. They were simple, direct, and easy to do layout in for most basic tasks. However, as I became more serious about web design and taking on more complicated projects, I learned a few things about CSS that eventually made me make the change.

The first thing was that, when implemented correctly, CSS will provide better cross-browser layout consistency. This doesn't even mention the fact that it follows restrictions better as well. I can't tell you how many times I've had a table resize itself because text or an image was too large, leading to a complete foul-up of the layout. But along the lines of the cross-browser consistency, for all widths with percentage values the actual values are calculated by the browsers (often on-the-fly). Unfortunately, there is no consistent standard for these calculations. This means that if you put width="80%" in a nested table item, some browsers will calculate this as 80% of the width of the parent item (the table element your new table is in) and some browsers will calculate this as 80% of the width of the browser window. Needless to say, these yield much different results.

Secondly, CSS can allow you to arrange your content in a way that is more optimal for text readers and search engines. In both cases, it allows you to place your main content in your file before menus and blocks. With this site, I can list all of my articles before the menu and other blocks.

Why is this important? For text readers, which are often used for the blind who go online (the text is pulled out with the html tags stripped, and then "read" to the blind surfer with special software), so it puts the items that they are looking for front-and-center. However, with tables, things need to be presented in a certain order, so that leads to the text reader going through a bunch of garbage before getting to your content.

Similarly, search engines tend to weigh their results most heavily on the first part of the page they encounter, and, similar to the text readers, they strip out many of the html tags. Therefore, we want to get our main content as close to the top of our page files as possible to get the most accurate results.

Third, CSS provides so many layout options that its flexibility cannot be overlooked. Chances are, if you have a layout in mind, then there is some way to do it using CSS. Even now, shortly after doing my changes, I wonder why I was using tables in the first place when so many of the things I wanted to do could be done relatively easily in CSS.

Lastly, I just want to leave you with a few CSS layout resources to get you started if you've never used them before. These are a great base to build from:

• Max Design has several very good and straight-forward tutorials.
• CSS Creator is a tool that can help get your basic layout in order.
• A List Apart has a number of useful articles about various uses of CSS that can help you find new or better uses of CSS.