If you’ve been struggling with CSS based page layouts (as apposed to using tables) and you’ve been smacking your head against the wall to get things to work … believe me, you’re not the only one!

No, you’re not stupid … CSS for page layout is.

What?! CSS is flawed?

Indeed. CSS for page layout sucks hard because the logic behind CSS page layout is weak at best, and perhaps, even flawed. I can say this with experience in other languages like Java and even VB. Not that I am saying CSS is a programming language.

Anyway …

For web designers used to the craziness of CSS layouts, they would be flabbergasted at how easy creating layouts/views/screens are in VB or even Java when compared to CSS.

What’s the main problem with CSS?

The main problem with CSS (and HTML) is that it was not conceived as a user interface technology. Rather, it was considered and engineered as a document/page technology.

Think about it, we talk about web pages and not web user interfaces.

Despite the original intention of the Web being a bunch of documents, today the Web is largely a bunch of user interfaces. Yes, most web sites these days are much more like a user interface that we see in software than they are simple ‘pages’. So therein lies the core of the problem:

CSS was designed to style pages and not to build user interfaces.

-

So what has happened?

Well, because web designers realized the advantages of CSS for laying out pages, they figured out how to bend, stretch and sometimes break the very limited CSS technology to create modern web pages.

The problem is that you have a bunch of methods and practices that don’t really make much sense … logically speaking. That’s why when you are new to CSS, it is hard as heck to create many common layouts as compared to doing it in tables.

Think about it, a center aligned liquid layout with three columns is a snap to do with HTML tables. With CSS though, it took the community a long time to figure out how to get this to work.

… It shouldn’t take the efforts of a community to get common layouts to work. That is a sure sign of a broken technology.

Even the CSS nerds know it.

Like most human beings, nerds are loath to admit when they’ve screwed up. So it’s pretty telling when you see the invention of CSS tables. Yes, CSS tables are basically tables created with CSS rather than with HTML.

CSS nerds finally realized that for user interfaces, you need a grid structure sometimes … tables are essentially grids. Problem is that CSS tables are not YET widely supported in the major browsers.

So why not use HTML tables if they are so easy?

Because you would be missing out on the two big reasons for using CSS for page layout:

1. CSS based pages are much easier to update and maintain.
2. CSS based pages are much more likely to work any many devices like iPhones, PDA’s, your printer etc…

I want to comment on the touted advantages of CSS. First, most devices today have powerful browsers that can read just about any type of web page (CSS or not) … so you have to question the 2nd argument. You also hear other arguments about why you should use CSS:

• Your pages will be lighter in KB’s.
• Your pages will be forward compatible.

… Both these arguments have proven to be what I said they were years ago: total crap. So forget them.

So if HTML tables should not be used and CSS is crappy for page layout, what is a nerd to do? As always, I try to come to you with real solutions. Check it out …

The Big Two CSS strategies:

1. Use templates
2. Use IE conditional comments

Comments:

Since nerds have already gone through the trouble of figuring out the nuances of CSS, you don’t need to reinvent the wheel! Use a template and just build out from there.

If any issues should pop up where Internet Explorer is not working handling/displaying the CSS like FireFox, then just use IE Conditional Comments to solve the problem.

Thanks for reading,

Stefan Mischook (a.k.a.: The web design heretic)

www.killersites.com

This entry was posted on Saturday, September 13th, 2008 at 10:57 pm and is filed under Professional Web Design, Real World Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.