In early 2004, we converted PlanetJailbreak to use Cascading Style Sheets for page layout. While this wasn't without its teething problems, we think the change was for the better, and we've explained all the advantages below. Many gaming sites are still using table-based layouts: we hope our site demonstrates some of the possibilities of CSS, and that the following might encourage other sites to follow suit.
Faster downloads
Pages made with CSS instead of layout tables are usually considerably smaller files, up to 50% of the size. That means visitors are reading your content sooner, not downloading tons of tag soup.
Smart downloads
Show your visitors the things that matter first. With CSS positioning, PlanetJailbreak loads the main content of a page first, with the menu sidebar loading afterwards on the left hand side of the page. The first thing you see is the meat, not the links.
Graceful downloads
Fancy visuals are nice, but not when you're waiting for them to display. Cut-up image techniques look ugly when you only see part of the a complex masthead. We've not compromised on visual appearance, but using CSS instead of tables to place images for the rounded box corners means that the site gracefully improves on a slow connection. Think of it like interleaving in GIF files. Without the round corners, you see plain boxes, rather than boxes with their corners missing. On a slow connection, you don't notice the site is not yet complete untill the rounded corner graphics pop into place as you read.
Fluidity
Everyone want to view the web in their own way. Using CSS, the layout of PlanetJailbreak tolerates a wide range of font sizes and window widths. Try it! Now think about what happens with a table layout. Most will restrict the width to quite a high minimum, and force cumbersome horizontal scrolling below it. Increasing the font size of the browser tends to to break table layouts, in particular combinations of graphics and text.
Semantic pages
We've stuck to strict semantic documents on PlanetJailbreak. The H1 element is the title of the site: "PlanetJailbreak". We've used image replacement to cover it up with our logo, but the source HTML is still strict. The next header is the name of the page in a H2, for example, "News", and after that come H3 elements for each subheading.
All this means that search engines love our site, because the first three things they see are: <h1>Planet Jailbreak</h1>, <h2>News</h2>, and <h3>Nearly release...</h3>, the most recent headline.
Maintainability
We used the term "tag soup" earlier, and we meant it. Pages made with tables to lay out content are ugly to work with in source. Using CSS cuts down dramatically on the number of tags and the amount of nesting.
Our menu sidebar items composed of DIV elements and lists (with the bullets removed), and this makes it very simple to rearrange them or add new items. The different levels of indentation are taken care of in the stylesheet, no matter how many elements are in each section. Unlike tables, where you either have extra, empty TD elements, or colspan attributes that must be kept in sync. Save yourself a headache!
You'll see another good example of this on our gallery pages. The "Gallery Float" technique allows the images to fill up the visitor's web browser window, no matter what the width. But this technique really shines over tables when it comes to maintenance.
Each image and its caption is within a DIV block. The whole gallery system is contained within another DIV block. Sprinkle on some CSS, and that's it. From the maintainer's point of view, it's just a long list of elements, that can be rearranged with the drag and drop of a mouse in a text editor. Headings can be added to break up the grid with a single element too.
