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

… Ah, nerd wisdom prevails in all aspects of life.

Anyway, here yet again, is another example where programming guides me: this time, it’s all about web design and code.

-

Over the last few years, the consensus in the web design community has been to streamline code. In real terms, that comes down to:

• collapsing html
• collapsing css
• … and consolidating css code into one file, to minimize the number of server hits.

… The idea is to speed up web page load times and to reduce web server loads.

This is an important goal and something all web designers should be concerned about. The problem is that if you are concentrating on optimizing your CSS or HTML to speed things up, you are concentrating on the wrong parts of your websites.

The fact is, that most of the optimization opportunities is actually found in your images, Flash movies and other multimedia content – not the code.

What is HTML and CSS code collapsing?

In a nutshell:

This is simply removing white space in your code. So you can take this:

Web design rocks!



Web design rocks!

And cut it down to this:

Web design rocks!

Web design rocks!

… The idea is that if you cut down 7 lines of code to just 1 line, the file will be a touch smaller. And this is true.

This old-school technique was used back in the 1990’s when everyone was on slow dial-up Internet connections and everyone had much slower computers.

Collapsing code was once useful, but like the transparent spacer gif trick … it is no longer needed. Actually, it’s more trouble than it is worth.

What can web designers learn from programmers?

When it comes to code, the web design community is still (generally) not nearly as experienced as the programming community. There are still lessons to be learned by the average web designer, lessons that have been fundamental in software development for years.

… Programmers have known for years that when it comes to code, it is better make it cleaner than speedier, because clean code is much easier to read, write and maintain.

So in our example above, seven lines of code are better than one.

What is ‘cleaner’ code?

Clean code can be broken down to:

• Lots of white space so the code is easy to read.
• Lots of comments so that you can much more easily understand what is going on 6 months down the road.
• Code that is ‘chunked’ into logical groups so that (again) it is easy to update etc.

The rise of object oriented programming is the best example of this understanding.

Object oriented code will almost always be slower (when running) than old school procedural programming. Nonetheless, object oriented programming now dominates the programming world and all the major languages use it including:

• Java
• PHP
• Ruby
• Actionscript

… and many others.

After decades of experience, programmers have learned through hard experience that cleaner code is much better than faster code.

How does this apply to web design?

Well, write cleaner css and HTML that is easier to understand and easier to work with. To repeat the list from above:

• Use lots of white space so the code is easy to read.
• Use lots of comments (in your html and css) so that you will be more able to understand what is going on 6 months down the road. This becomes more important when you are dealing with tricky CSS layouts that require seemingly strange markup.
• Organize your css into logical groups (and pages) so that it is easy to update etc.

Won’t cleaner code slow down my pages?

The fact of the matter is, for the vast majority of websites (%99.99999999999999999) you will not see ANY difference in terms of speed or cost in bandwidth.

… The ‘optimize code to save money’ is a wurban (Web + urban) myth.

Stefan Mischook

www.killersites.com

When I was working on the redesign of the killersites.com, I found (as a starting point) that the templates that ship with Dreamweaver CS3 useful.

Dreamweaver CS3 starter templates

Dreamweaver has a nice collection of bare-bones web templates. One thing I found cool about these templates, is that they contain a lot of notes that describe why they (the web-nerds at Adobe) have certain things in place – like the specific code they used to deal with a given CSS layout issue.

… This is another good way to learn more about CSS.

An added bonus: tested layouts

The templates are solid, in that you can be sure that they have been tested to work in the major browsers.

… This beats having to tinker with this yourself! That way, you can concentrate on the design.

The killersites.com facelift

For my redesign of killersites.com, I used one of the Dreamweaver templates as a starting point. I found that it was well structured, such that it could withstand the changes I needed to make to it.

… Many CSS layouts are fragile, in that if you change just a little bit about it, the whole thing can start to fall apart.

How to find the Dreamweaver CS3 templates

Dreamweaver CS3 ships with many templates that you can access either by the ‘Welcome Screen’ or by going into:

File > New

.. This will open up the ‘New Document’ window where you will be able to choose from four categories:

1. Blank Page
2. Blank Template
3. Page from Template
4. Page from Sample

In ‘Blank Page’, I used a template called: ‘2 column liquid, left sidebar, header and footer’. Not the most exciting name, but it does tell you what you’re getting.

If you are a Dreamweaver CS3 user, or someone just interested in exploring quality CSS templates, I would suggest taking a look at the Dreamweaver templates.

PS: you can download a free 30 trial of Dreamweaver CS3 if you don’t have it already.

And if you are interested in learning Dreamweaver, you can view my free Dreamweaver video tutorials.

Thanks,

Stefan Mischook

www.killersites.com
www.killerphp.com

In a nutshell: css code should be divided up into at least 4 separate pages:

1. page-structure.css
2. text-styles.css
3. misc.css
4. ie-styles.css

How about we call this the ‘killer’ css structure.

Before I go into the details of what each css file contains (if it’s not already obvious), I want to quickly cover WHY you might want to use this basic css structure for all your websites.

Why use the ‘killer’ css structure?

It all comes down to one of the key reasons for using css in the first place:

Grouping code so that it is easier to update and easier to understand.

-

A common mistake

What I see over and over again, are web designers who put all their css code into one css file. This is indeed a big leap forward from using font tags all over your website … but by having only one huge css file, you’ve just created another big messy file to deal with.

To the point

Page-structure.css contains only css that defines the structure of your page. That is to say things like:

- css code that sets whether the page is liquid of fixed.
- css code that sets whether the page is centered or justified left.
- css code that sets up the columns

etc …

I like to put the page structure code in its’ own file because page structure css code is verbose (there’s a lot) and it can get a little black-magical.

What is black-magical css?

We all know that except for the simplest css layouts, it can be a real pain in the ass to get page layout to work in css.

… Especially when floats and Internet Explorer bugs come into the mix.

Anyway, the point is that css for page layout often contains nonsensical (black-magical) code to make it work.

OK, back to page-structure.css:

Another reason to have page-structure.css, is that once you’ve done creating your page structure, you rarely have to go into that code. So why bother having to scroll past it every time you edit other parts of your css?

Personally I find myself tweaking css rules for text, color and images much more than I do page structure css.

Text-styles.css contains css code that only affects text. So I have all my header tags defined along with paragraph tags and classes. Again, when needing to edit some aspect of my text for the hundredth time … I just pop open the very clean and simple text-styles.css.

Misc.css is a style sheet that contains css code that does things other than page structure and text styling. This ultimately is a judgment call, but I typically put in formating for tables, forms, list or special id’s and classes.

IE-styles.css is of course, for your css rules that manage the Internet Explorer bugs. This all ties into the IE Conditional comments strategy.

You may need another ie-styles.css to deal with specific versions of IE. For example, you may have an ie6-styles.css. But thankfully, this is becoming less and less likely since IE6 use is falling fast.

Thanks for reading,

Stefan Mischook

www.killersites.com

Anyway, someone recently sent me an updated version of the script. You will probably want to read the original article before looking at these changes.

From the email:

I did some simplification on the code for zebrastripes. I don’t bother with the last array bit because TR elements have the bgColor attribute.

trs[i].bgColor = ( i & 1 ) ? stripe_colour_even : stripe_colour_odd;

Greetings,

tarjei

The complete function:

function stripe_table(id_name) {

var my_table = document.getElementById(id_name);

/* For debugging */
if ( !my_table ) {
alert(”The ID ” + id_name + ” is not found.”);
return;
}

/* Table may have more than one tbody element */
var tbodies = my_table.getElementsByTagName(”tbody”);

for (var cnt = 0; cnt < tbodies.length; cnt++) {
var trs = tbodies[ cnt ].getElementsByTagName("tr");

/* Walk table row for row */
for (var i = 0; i < trs.length; i++) {
if (! hasClass(trs[i]) && ! trs[i].style.backgroundColor) {
trs[i].bgColor = ( i & 1 ) ? stripe_colour_even : stripe_colour_odd;
}
}
}
}
}

CIAO.

Stefan Mischook

Stefan

-

Grid layout patterns are commonly used in creating software interfaces – in web design we call them ‘tables’.

But today HTML table based layout is generally frowned upon because:

1. HTML tables render/display content in a fixed format/style that might not display properly in certain types of browsers.
2. Tables semantic meaning is thought to represent tabular data – like a spread sheet. Thus using them for page level layout is just wrong … gosh darn it!

There are other reasons why some web designers will say HTML tables suck:

• HTML tables cause code to be bloated and thus pages will take longer to download.
• HTML tables will make your website less search engine friendly.
• HTML tables will make your websites less accessible.

The last 3 points are myths and should be ignored – I covered that in other articles.

That being said, the first point about tables imposing a fixed format/style (where formatting and structure are intertwined – that’s bad,) is very real and very important. It is so important in fact, that I will do what I can to avoid table based layout despite the extra work and problems this can cause.

It’s a terrible shame

Using a grid/table to create UI’s is intuitive, too bad that table based layouts are so controversial … but there maybe is a light at the end of the web UI tunnel: CSS table layouts.

What the heck are CSS tables?

From the W3C:

‘The CSS table model is based on the HTML 4.0 table model, in which the structure of a table closely parallels the visual layout of the table.’

Now in English:

CSS tables are just a set of CSS attributes that you can apply to (probably) div tags to create a ‘table’. Check out this code snippet and things should clear up:

This is an official W3C specification, I’m not inventing anything here!

So why invent CSS tables when we have HTML tables?

The answer is simple young grasshoppers: to gain the advantage of table based layout while avoiding the problems (mentioned above) with HTML tables:

1. HTML tables format content in a fixed structure that might not render properly in certain browsers.
2. Tables semantic meaning is thought to represent tabular data – like a spread sheet. Thus using them for page level layout is just wrong.

CSS tables can’t be used in any browser today, so why mention them?

I have two reasons why I wrote this article:

1. To educate people of this long term possibility and maybe to start stirring things up – it would nice to have this web design tool.
2. To make a point about grid based layouts: they have merit and should be considered.

Stefan Mischook