Full CSS Versus Table based layout

I think this is one of the biggest technical issues affecting many web designers at the moment. Many designers (probably most) have now switched over to full CSS design, also known as CSS-P. Its potential advantages are a more useable, flexible and compliant design, however from my experience this isn’t happening yet.

There are really three ways to build a site in terms of mark up:

HTML only
This is the old school way of building websites. Lots of ugly font tags all over the place, and a method of building sites that really is quite dated.

Full CSS
Semantic mark-up and a clear separation between design and content is what this is all about.

Hybrid
A mixture of both above.

Traditionally, here at Voodoochilli we build sites using a hybrid of both methods. Although many so called purists may look down on this, we find it works best for us for the following reasons:

• No need to “hack” the CSS to work on internet explorer and other browsers
• We work with many programmers/technical people who only use HTML
• We take the best from both HTML and CSS

My case for keeping with tables for the moment

I have built a few sites before using full CSS and have never had any real issues. In fact once I got into it more I began to full realise the power of a CSS only approach. This all changed quite recently when we were commissioned to build a site for client that relied heavily on a CSS drop down menu. We have worked with many of these menus before, but for some reason we were getting all sorts of errors on Safari and Internet Explorer 6. This in turn was causing all sorts of layout issues. It took an entire day of employing various “Box model hacks” and other little dirty tricks to try and force the different browsers to display the site the same. Had we have used tables for the general layout, and a CSS drop down menu this would not have happened (as we have done this many times before).

This made me realise that despite all of the hype about CSS-P, the browsers still aren’t ready, and with about 30% of windows users still using Internet Explorer 6 its going to be like this for a couple of years at least. In my mission to solve some of these issues I tried to find a way of installing something like Safari on a PC. Of course this isn’t possible, but it is possible to run Konqueror using something called VMware-player. Konqueror is an oddity like Safari in that it uses KHTML and so in theory should render the same. After a massive 800 MB download and a big installation process I could finally make sure the site would probably work on a Macintosh running Safari, and after uninstalling internet explorer 7 and downgrading I could test out explorer 6. Great!

Tables have been with us for decades, and although they were not originally intended for design purposes, they do the job. I know when I piece together a design using both tables and CSS exactly what it will look like when it renders. With CSS-P it seems to be a complete hit and miss.

My case for full CSS

Recently I met another designer who said that he really liked my designs and the sites I have worked on, but he had viewed the source code and noticed too many <td>s for his liking. That made me think. Most web clients don’t have the inclination or even knowledge of HTML and CSS to question let alone view the source code of a webpage. However, web designers could use this sort of thing to try and take work from you. With all of this buzz about Web 2.0, it’s the sort of thing that can scare people. Everyone wants the latest and greatest after all. Although I don’t like this argument, and I am inclined to rebel against it, it must be noted that it is a serious one.

The main argument in favour of CSS-P is that overall the process and end product of semantic based layout is a more powerful, usable, accessible and flexible thing. I am all in favour of separating content and design as this is something we do with our Content Management Systems. Separation of content and design means changes to a site can be made universally, and easily. It is also said that if we all work together and use CSS-P, the browser companies are forced to keep the way they render standardised. Explorer has always been an exception to this rule, but version 7 seems a whole lot better than previous attempts.

Another argument in favour of CSS-P is that CSS files are cached and therefore, bigger sites will save considerable bandwidth. There has also been the suggestion the CSS-P sites perform better SEO wise.

The middle way

As mentioned above, typically the sites we have built in the past have an element of CSS and tables. I would say it’s about 50-50. We rely heavily on CSS to define much of the colours, background images, margins and fonts. Nearly all of the content we host is stored in a database so there is still a separation of content and design. We also split the pages into various php files enabling the easy and immediate updating of a sites entire structure and design. Sometimes we even create dynamic CSS files which is another subject I might talk about some other time.

Conclusion

As always, we have projects on the go. I am not going to let this recent experience with CSS-P completely ruin the idea for me and will probably design the next few sites in the same way to see if I can pursued myself that its for the best. I have to say there are probably only two reasons why I am doing this: firstly it’s a challenge. I want to better understand the process and see what all of the fuss is about. Secondly, there is much pressure to move over and be converted. It is very hard to fight that pressure.

Currently I don’t think the browsers are ready, and I think the Hybrid method is best for the way we work, but I know that will change and I am going to be ready.