Ten Steps to Convert Your Website to CSS

Step One:
Have fully functional table based design. Have an entire clique of web designers tell you that it’s not “future compatible”, or that table based layouts are bloated, or that using non layout elements like tags to space things is a crime against design. [Seybold]

Step Two:
Look around the web at sites of CSS evangelists who swear up and down that not only can CSS do everything that tables can, it does it cleaner, easier and better. [From HTMLDog: “With a combination of positioning, floating, margins, padding and borders, you should be able to represent ANY web design and there is nothing that can be done in tables that can not be done with CSS.”]

Step Three:
Become convinced that this is the wave of the future and resolve to convert your own sites to CSS. Look around the net and try and find introductions and explanations of CSS that aren’t confusing.

Step Four:
Discover that most web sites that attempt to define “floats” and “clears” are far from clear and leave you floating in uncertainty. They are written by people who have long forgotten what it’s like to be a beginner. They will either be too simplistic or too complicated. Or that most of the CSS pages that have layouts you’d like to emulate have very little explanation of how and why it’s laid out that way, because you’re supposed to just understand by looking at the code. [FooterDemo1 – Thanks to the person who put this web site up, as something is better than nothing. Don’t mean to be unappreciative, it’s just that I could not get this example’s effect to work and I had no idea what it’s doing.]

Step Five:
Resolve to learn CSS the way you learned HTML. Look at someone’s source code, download it, tweak it, and find out what CSS does and how it works by experimentation. Spend weeks on this step, because it is very important to discover that any minor tweak to personalize or customize your code will make the CSS go completely screwy in all sorts of ways that will have you spending hours just getting back to where you started without having learned much in the process.

Step Six:
Convert your web sites to a form of confused beginner’s CSS, resolving that first you’ll get all your content in and then you’ll make it better and better. Look for help on mailing lists or similar forums where people will assume you are just lazy because your code is chaos. Remember, being told to “RTFM” is supposed to be a “hackers” way of being helpful. At this point you can choose to take this advice and go back to Step Four, or proceed to Step Seven. [Actual quote from a response on the css-discuss mailing list “First of all this page is a mess… If you want help, you need to clean this up as much as possible before asking people to look at it…”]

Step Seven:
Start to compromise. If you are lucky, at this point you have some web pages where the CSS looks something like the table based design you started out with. But you’ve long ago given up on having a “footer” that will stick to the bottom when there is little content, and get pushed below the fold when there is a lot of content (Silly you – you thought “bottom: 0px” actually meant that your DIV would be at the bottom of the page!).

Although you assumed it would be easy in CSS because it was easy with tables, and you’ve seen sites where it has happened, the CSS code to create this is mind-blowingly complicated. Any attempt to download and use such code will be an exercise in masochism. It looks nothing like the CSS the sites for beginners told you that you were going to use. [From The Elusive CSS Footer: “It is a real pain in the rear. I know because I ran into the same problem for a project I am working on.”]

Step Eight:
Just when you think you’re settling down into a slow and steady learning curve, this is about when you start getting emails from everyone who uses your site describing all kinds of variations on your layout as it has been interpreted by their varying browsers and platforms. This stage is the most important of all, the one where you realize that CSS support is far, far more random than any HTML workarounds that you’ve been dealing with for the (insert personal experience here) years you’ve been making web pages. [Excerpt from an email from a user of one of my sites: “…the new color and stuff on the homepage looks good, except on my computor [sic] some of the pages are cut off at the bottom and have big gaps in them.”]

Step Nine:
If you were smart, you made backups before step one. If not, this step is spent putting your web sites back into table layout format. [I actually haven’t done this yet. I’m still stubborn enough to keep trying to make my web sites work with CSS.]

Step Ten:
Wait for CSS to achieve the browser support and abundance of learning resources it needs in order to live up to its promise. When calculating how long this will take, remember that the time estimates of evangelists (of any technology) must be converted to metric (double, and add thirty-two) in order to be anything believable. So consider “Meyerizing” your web sites around 2007.

Leave a Reply

Your email address will not be published. Required fields are marked *