A guide for website owners trying to decide whether or not CSS layout is right for them
By John Potter
What is CSS:
CSS stands for Cascading Style Sheets.
“Cascading” because if you use an external Stylesheet any changes you make to it will affect all pages using it.
“Style” because it controls the look or style of things, and
“Sheet” because the files are called “Stylesheets”.
If you haven’t already heard using CSS for laying out web pages rather than HTML tables is a big trend right now. I and many others have been using CSS to define styles of fonts and such for many years now, but controlling the actual page layout has, in the past, been done with HTML tags and tables. Now websites are moving to the use of CSS div tags to control layout.
I will confess at this point that I am not going to answer the question in the title of this entry, but attempt to educate you so that you can make your own informed decision. You should also know that I am somewhat new to CSS layout myself. I used it to create this website and one other (www.escapekey.net). I do feel that although I have not yet completely mastered CSS layout I have more than sufficient knowledge and experience now to speak on the topic.
Your first logical question to me would be…”Why did you choose to create this site and another using CSS layout?”. The answer is that I saw the winds of change. Although I didn’t see all of the benefits of using CSS layout when I started these two projects I had seen that CNN.com, MSNBC.com, CNET.com and many other heavy hitters in the internet trade had switched to it. I’m not one to blindly follow the crowd, but this trend was becoming so overwhelming I could not ignore it.
Now on to what I have learned…
CSS layout and HTML tables layout each have their own advantages and disadvantages. First I will list advantages, then explain a bit more.
Advantages of CSS layout:
- Potentially better search engine placement
- Some advantages when doing a liquid design layout
- The ability to present alternate version of displaying the same page for different devises or uses
Advantages of HTML tables layout:
- Faster development speed (in my opinion)
- Handles grid type layouts (like you see in Excel) better
CSS layout doesn’t necessarily reduce the amount of code necessary to display a page on the internet, but it does move a great deal of the code used to define how that page looks to an external file (style sheet). The search engines don’t count the code in external files against key word density. Key word density being how many words on a page of code (out of the total number of words including the code) are relevant to what someone searched for. This means that by moving some of that code off of your page’s file you could potentially see improvement in placement on search engines.
If you’re creating a liquid page there is a pretty neat trick you can do with CSS. You can create a grid type table that rearranges itself based upon the width of the window it displays in. This technique is now used on some of this sites pages...for instance the Panoramic Photography Portfolio.
You can attach multiple stylesheets to one page for multiple uses. One can be the page you normally see, while one can be for printing, one for wireless devices etc. To see this in action try doing a Print Preview of this page. You will see that I have changed the page so that it prints without unnecessary graphics and background colors.
So far I have found CSS layout to take on average twice as long as HTML tables layout. I’m sure this will be reduced with experience, accumulating files for reference and better editing tools, but the fact remains…it is taking me longer by a considerable margin.
Making a grid type layout is one place where HTML tables layout really shines in comparison to CSS layout. Creating a simple grid which doesn’t do anything but be a grid layout is simpler and faster using conventional methods than CSS layout.
I would say that if changing to CSS layout I would take advantage of the opportunity to completely redesign your site. The labor involved will not be greatly increased by changing design at the same time.
Generally I’m enthusiastic about change and the evolution of the web. So far CSS layout hasn’t won my heart, but I see the winds of change blowing and I’ve learned from experience that when it comes to the internet it’s better to be an early adapter than to wait and try to play catch up. With wireless devices becoming more prolific and easier to use having your site ready and indexed as such could make a significant difference in its popularity and anything that can help your placement on search engines is always worth serious consideration. Due to all these facts I will be encouraging my clients to go with CSS layout from now on.
