About CSS fluid layouts

Use CSS sensibly and avoid CSS layouts

Summary:

There are issues when using CSS layouts for creating multi-column pages.

I suggest to keep simple tables for splitting the screen into columns or to use JS behaviours for modifying the page onthe fly (page morphing).

Article:

If you are involved in web developemnt of some kind you are probably aware of the new way of writng web pages, thanks to CSS new design patterns. The basic idea is to write html pages with:

  • page structure in the html
  • look and feel (colours etc) in the css style sheet.

That's at least possible because all browsers ("all" meaning the ones used by 99% of people) now support a decent level of css.

So that's a new trend: forget putting colours in the html and put as much as possible of decoration in CSS.

This is the hot thing among html developers and that's really cool.

However as for every trend, we sometimes a step too far… Yes that is another example of the human brain pattern: we have found a new model and we becomes zealous… anyway..

The point here is: today it is cool to maximise the css side of pages and minimise the html part. And we use "CSS layouts" that are menat to replace html tables. So what does that means?

Before CSS, we had to heavily rely on table to display information invarious parts of the screen. Now we can replace most tables by css positioning rules (basicall x,y coordinates + ability to "float" areas around others).

And some smart blokes have come out with a few ways to take advantage of these features so that we can create columns in the page just by changing the css: we change the width of a text part, decide to make it "float" on the left or right and we do the same with other parts, and hurray"! we have created a multi column page without any html table..

Isn't it great? well yes and no… I know I know, I am supposed to say yes yes yes… css bla bla trendy, cool etc.

But I come from normandy in france, and there we say maybe yes, maybe no.

And that is exactly the answer I would like to say here. But her.. why?

The reasons we shouldn't abuse our html pages with css layout is because:

  • they are much more difficult to develop and tune (yes try it!!). It takes quite a few tests to really acheive the result we could get in 2mn with a simple table. I know because I have ot pay more for html development since I started using them..
  • they are not stable: it is like the box of chocolates in Forrest gump… With CSS layouts, we never know what we get  on screen (specailly on screens of our users). Havent you come across these sites where a part of the content is missing on the right or left and you find it at the bottom of the page, jsut like an old sock would fall on your shoes?
  • we need to express in too many details every size of the layout,
  • we cant have columns with the same heights if one column is going to be much larger than the others. It doesnt work in Opera for example.
  • CSS layouts often break page % measures. For example in a CSS column, a width of 100% doesn't necessarly mean 100% of hte width of the actual column, but sometimes 100% of the width of the whole page (or parent of column). This makes it difficult to add a dynamic web component in the column as the component no longer knows what the maximum size it can use on the screen…
  • this stuff is great with static pages, but static pages are something we dont do anymore, do we? Nah! Now we get the whole stuff from databases and apply some templates to create the content that we put somewhere on the screen. And funny things happen when a piece of content is larger by only 1 pixel than the size we have carefully definedin our css stylesheet. CSS layout break designs in dynamic pages!!!

The only case I would recommend css layouts is when we have a page that is aligned completely on the left side (as opposed to centered on screen) and we know exactly what we will put in the template.. So should we avoir using floating parts in our HTML? Of course not! "Float" properies are great for floating images asoide of text, for creating flexible tables (ex. a phto gallery) where we DO want the parts to move down when the screen size is reduced, etc. So in micro templates, that's a great way of doing things, but not in overall page structures.

Ok, so what's the right way to do it then?

1) structural approach to page layouts: 

Well, what we want is to create a layout with several columns right? Well I cant see why we can't express that in html. HTML is about structure and css abotu decoration. It seems to me that chossing to have column is a structural choice and not a decoration choice. And if we want to switch to another type of structure, it is easy with a template engine to do so.

2) use "page morphing", based on css/js behaviours

But if we want to really hide the page structure away from the HTML, we could use instead JS/CSS behaviours instead of strict CSS (I'll explain this method in following posts). Just like we can apply CSS properties to part of the HTML document using selectors, we can also rewrite the DOM with JS by using the same CSS selectors.

The advantage of this technic is that we are no longer limited to CSS capabilities and cross browser support and can then implement columns (or any other effect) in whatever HTML/CSS way we want without relying on CSS "float" property.

NB. CSS/JS behaviours are starting to be used with the release of the "behaviour.js" (check google!). It provides a true cross browser alternative to IE CSS behaviours (HTC etc.) and mozilla behaviour. This system, coupled with CSS and JS is going to provide a true revolution is the way HTML pages re going to be implemented. In short it is about replacing some bits of the HTML page by components, tranforming a simple HTML page into a very sophisticated DHTML page. It is a bit like CSS but with the ability to tranform the DOM instead of adding decoration features on it…

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: