User experience is everything.™
Constantinos Demetriadis

One True Layout

Pure CSS-based layouts have come a long way but they still have shortcomings that fail to address certain design goals without compromising the true separation of content and presentation.

In short, the problematic design goals are these:

Total Layout Flexibility: That is, the ability to order columns logically in the source while displaying them in any order desired. For any number of columns.

Equal Height Columns: Or more accurately, equal height columns without having to rely on faux columns.

Vertical placement of elements across grids/columns: Designers face the choice of relying on elements being a particular height, resorting to tables or simply not bothering.

Read the whole article at Position is Everything

end of article

15 Comments

Comment feed | Back to Top

Alex Casanova
20 December 2005, 00:57 ( Permalink )
Um, the order column logically thing is pretty easy to do already, actually.
Alexoid
20 December 2005, 09:22 ( Permalink )
Alex: Any links to a tutorial? We’ll add it to the article. Cheers.
Roshambo
20 December 2005, 18:16 ( Permalink )
Alexoid: Position is everything has a pretty good tutorial. The whole article is a good read, actually. I recommend.
Alexoid
20 December 2005, 21:05 ( Permalink )
Roshambo: :) Oh-kay.
icebin
4 January 2006, 05:37 ( Permalink )
good.
sb
8 January 2006, 19:16 ( Permalink )
trippy
Ben Hunt
23 January 2006, 09:22 ( Permalink )
I disagree with Alex. It is possible to re-order columns, but only to a limit, which is defined by your HTML containers. And this makes it almost impossible to add new columns. Unless you use absolute-positioning that is..
David Graves
31 January 2006, 18:08 ( Permalink )
I think that reordering, is in fact doing as such and should or should I say can be done. The article makes sence and to the point could conclude the facts are or are not accurate.
Jorge Martínez
3 February 2006, 06:03 ( Permalink )
I only want to say comments as “trippy” or “good” are very annoying. Who come to this site to read articles and find interesting comments – and iF that comments are found then the work and brain of the smart people is forgotten… this sites don’t deserve this.

A lot of articles I find is a base to me study :-)
Matthew
4 February 2006, 07:13 ( Permalink )
I would be interested to find out if this site was designed before or after the One True Layout article series was published. The site seems to be a poster child for the programing discussed in the articles.

Overall, a very good read. Let’s all go to our local printshop and print it out for easy reference!
Paul Wib
4 February 2006, 14:00 ( Permalink )
It’s a great article but the benefits of any order columns, in terms of accessibility, has been questioned recently based on real world usage.
Rafalski
4 February 2006, 16:20 ( Permalink )
The core of the problem to me is that the fathers of css were nerds, not designers and they didn’t understand basic designer needs. Vertical centering in a box element? Equal height columns? What’s that for (from a nerd’s point of view)?
I’m all for standards and I’m using xhtml/css on a daily basis, but it never stopped to amuse me how backwards tableless layouts can be sometimes, compared to what was easily achieved with tables.
Jorge Martínez
5 February 2006, 19:15 ( Permalink )
Rafalski: I don’t understand the english so good – but I imagine you work with CSS but not as the absolut true or the hard-line to follow. iF it’s so, I agree with you. Sincerly to me the CSS makes you have a grat standard, high quality and excellent browser support but with too limitations. Maybe I’m wrong, ‘cause I’m not CSS guru. As Designer I can tell you (iF you agree) the Graphic Design today demands more posibilities, more layouts, agressive or adventured designs, the CSS coding put margins for that. Today in this new Era of Internet, there are more sites looking as a blog or a newspaper… and other sites really amazing and moderns using .js and .css | About CSS: the and css is my headche.
abdagli
7 February 2006, 17:01 ( Permalink )
“Read the whole article at Position is Everything”

there is a problem about url…
Constantinos Demetriadis (uxmag.com)
7 February 2006, 17:05 ( Permalink )
abdagli: Works fine for me… Are you sure?

Comments closed for this article.

About the author:
Constantinos Demetriadis
Art Director, OgilvyOne
Constantinos is employed as Interactive Art Director for OgilvyOne worldwide. In his ever dwindling spare time he works on the development of UX Magazine and Joblet.
Related Articles

One True Layout

Friday December 16, 2005 by Constantinos Demetriadis

Pure CSS-based layouts have come a long way but they still have shortcomings that fail to address certain design goals without compromising the true separation of content and presentation.

In short, the problematic design goals are these:

Total Layout Flexibility: That is, the ability to order columns logically in the source while displaying them in any order desired. For any number of columns.

Equal Height Columns: Or more accurately, equal height columns without having to rely on faux columns.

Vertical placement of elements across grids/columns: Designers face the choice of relying on elements being a particular height, resorting to tables or simply not bothering.

Read the whole article at Position is Everything