Text Overflow and Fluid Design... Does No One Care?

[SComm]

I am relatively new to CSS, about 8 months of experience, and I thought I was ready to make the switch to a purely CSS development method (ditching tables for good) but I have found some disturbing trends in the CSS community that keep me from doing so.

Two main issues that are all too prevalent are:

(1) The complete disregard for visual layout when text is sized by the user

and directly connected to this issue:

(2) Many CSS designs are giving up fluid design (content areas can resize as the browser window or text is resized) in favor of set page width. Both of these issues seem directly related to the limits CSS has with designing multi column page layout.

Often times a simple table structure can accomplish the same visual layout as an all CSS design while still allowing for resizing text and fluid page design. As far as usability and accessibility are concerned a simple table layout with no nested tables would function the same as an all CSS design.

After that very lengthy prelude, the question that is inevitable and seems to pop up from time to time with newbies such as myself:

Is pure CSS design so important to obtain that no one cares if text overflow and set width pages cause the visual design to “break” when resized? Especially when a simple table layout (no nesting) can accomplish the same design, usability and accessibility while still allowing the end user to view the site with a larger font size and/or window size.

I apologize for the lengthy post but this has been an issue on my mind for some time now. CSS purists are preaching more and more that tables as a layout tool must give way to CSS standards but I am beginning to think that being pure may not be the best route to take. I hope that this post generates some good feedback for everyone. Thanks!

[SComm]

Check out an example of what I am talking about here on sitepoint:

Tables Vs. CSS: A Fight to the Death

Look at the final HTML version and the final CSS version. I am definitely not saying the the endless code and nested tables of the HTML version is good but that the CSS version breaks when sized...

[Paul O'B]

Hi,

The complete disregard for visual layout when text is sized by the user

I don't think this is an issue specific to css as I have seen many table sites exhibit this fault also and indeed someone is asking in a thread above this how to stop the text in their navigation table to stop resizing and breaking the layout.

It is an area that often gets forgotten about and we could all do well to think about it a bit more

Sizing in ems and keeping elements relatively sized to one another should help keep the design consistent and maybe we could all do with testing this aspect a bit more thoroughly.

Many CSS designs are giving up fluid design (content areas can resize as the browser window or text is resized) in favor of set page width. Both of these issues seem directly related to the limits CSS has with designing multi column page layout.

I think a lot of people are just copying sites like a listapart that went with a fixed width which I don't really like either. However some people prefer these types of layout so I suppose it does boil down to a matter of preference.

As far as usability and accessibility are concerned a simple table layout with no nested tables would function the same as an all CSS design

From what I can gather a table doesn't present the inherrent usuability of css when used for layout as there is no correlation between cell content as the user might expect.

However I would agree that simple table layouts are fine as long as you don't nest them and indeed will perform better for multi column layouts so I would use tables in those cases if I needed to.

Except its more fun in css :

http://www.pmob.co.uk/temp/4colfixedtest_5.htm

On the other hand some layouts just can't be done with tables and it would be silly to try so again I think it boils down to the right tool for the job. Obviously here in the css forum all the answers are in css but tables aren't excluded altogether.

On another matter the very few problems I have been unable to solve have always had tables in them - but then that just might be me anyway

Is pure CSS design so important to obtain that no one cares if text overflow and set width pages cause the visual design to “break” when resized? Especially when a simple table layout (no nesting)

Again I don't think this is a specific css isue rather than a general web design issue. Whether more css sites break on text resize than table sites do is debatable and I wouldn't really know one way or the other. A lot of table sites have spacer gifs and fixed height backgrounds that will gap open when text is resized in the browser unless the author has provided for it.

I think as time goes by we will see better sites in css and you only have to look at zen garden to see the power of css. The main problem with CSS is unforunately IE and its lack of (and its quirky) support especially in the areas wheres its critical. e.g. min and max width and display:table and display:cell. Css does in fact have a lot of the tools for doing specific table layouts its just that ie doesn't support them.

CSS isn't perfect and there are things that drive me mad about it IE dropping floats when it shouldn't is a real pain and with no real solution other than a series of complicated nestings.

In the end if a hybrid simple table layout does the job then I don't see anything wrong with that

Paul

[maxor]

I think the problem stems from people who don't understand what's really going on with some CSS code that they copy from some tutorial or another site. It seems like people will just grab some code, hack it around and hope that it works, which needless to say doesn't always happen.

[SComm]

Paul,

As usual you have taken the time to give a thoughtful response to a difficult question. Thanks.

From what I can gather a table doesn't present the inherrent usuability of css when used for layout as there is no correlation between cell content as the user might expect.

Could you eloborate a little or direct me to a good resource concerning tables and usability? With my new love of learning CSS comes learning anything I can about accessibility and usability...

[Paul O'B]

Hi,

For a start have a look at section five of the w3c guidelines.

http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/

Paul

[MiiJaySung]

I am relatively new to CSS, about 8 months of experience, and I thought I was ready to make the switch to a purely CSS development method (ditching tables for good) but I have found some disturbing trends in the CSS community that keep me from doing so.

Two main issues that are all too prevalent are:

(1) The complete disregard for visual layout when text is sized by the user

and directly connected to this issue:

(2) Many CSS designs are giving up fluid design (content areas can resize as the browser window or text is resized) in favor of set page width. Both of these issues seem directly related to the limits CSS has with designing multi column page layout.

Often times a simple table structure can accomplish the same visual layout as an all CSS design while still allowing for resizing text and fluid page design. As far as usability and accessibility are concerned a simple table layout with no nested tables would function the same as an all CSS design.

After that very lengthy prelude, the question that is inevitable and seems to pop up from time to time with newbies such as myself:

Is pure CSS design so important to obtain that no one cares if text overflow and set width pages cause the visual design to “break” when resized? Especially when a simple table layout (no nesting) can accomplish the same design, usability and accessibility while still allowing the end user to view the site with a larger font size and/or window size.

I apologize for the lengthy post but this has been an issue on my mind for some time now. CSS purists are preaching more and more that tables as a layout tool must give way to CSS standards but I am beginning to think that being pure may not be the best route to take. I hope that this post generates some good feedback for everyone. Thanks!

If you want too look at a design that is not fixed width, look at

http://jason.hybd.net/Jason.html (Note to mods etc, this is not a functional site, and thus not self promotion)

It's a mock up I've just completed. It makes use of loads of good CSS techniques and is liquid based in IE and elastic in other browsers (like the Mozilla site). It more less works fine in most browsers (things like IE 5.x will mess up a little though, but the site is still useable)

The CSS and HTML is fairly well commented if you want to learn from it. I stringly suggest you look at the skidoo 3 column layout (google it). I based this on that, anlong with the sliding faux column idea. The text shouldn't break up too much when text is sized (though sizing down messes up a little in Mozilla, sizing up should work a few 100% before things really degrade badly).

In IE text should resize with no problem.

A lot of sites go for fixed width because it is easy, however as I've pointed out, you can make good liquid/elastic designs.