Comments on: CSS for Layout. Another Rant

By: BenGerrissen

BenGerrissen — Sat, 07 Feb 2009 12:36:46 +0000

CSS… tables… WHO CARES?
Goverment institutions, Knowledge centers, Enterprise and multi-national companies, basically any client with huge ammounts of data which needs to be accessible by their target audience.

Aren’t we all doing our layouts in Javascript these days anyway?!? :)
Would love to, but javascript layouts to the extend of Ext JS and even ajax driven websites turn out to be very bad for SEO and accessibility unless you make an alternative, in which CSS becomes a major factor.

Tbh. client sided XML and XSLT can easily provide the solution if developed and supported more with search engines jumping on the bandwagon. And even ajax can be accessible in an XML/XSLT driven website as long as you use the links in the XML and not embed data providers in your javascript.

I really need to look into XUL…

By: fzammetti

fzammetti — Fri, 06 Feb 2009 20:41:51 +0000

CSS… tables… WHO CARES? Aren’t we all doing our layouts in Javascript these days anyway?!? :)
-
I’m currently working on a massive project using Ext JS as the foundation and it’s amazing just how little HTML and CSS I’m actually doing now versus what I was doing previously. Oh, there’s of course bits of CSS sprinkled in, but it’s largely to do true styling, i.e., colors and fonts and that stuff. Hell, I’d go so far as to say that the way we’re using CSS now is *MORE* correct in terms of what CSS is supposed to be used for than what we were previously doing when we were doing layout with it too!
-
Isn’t this the future that makes the CSS vs. tables discussion kind of superfluous? I say that only half-jokingly… obviously there’s plenty of need for web development where Javascript isn’t prevalent, but let’s face it, devices of *ANY* sort that don’t fairly fully support Javascript and associated Ajax techniques are shrinking in number by the day. Hell, the otherwise piece of crap PocketIE I carry around with me on my phone is more powerful and feature-rich than any browser that was available to me just a few years ago on my PC! That situation is only likely to improve as time marches forward.
-
I say we all adopt a good, solid RIA framework, Ext JS being by preference but you can choose as you see fit, and stop having this CSS vs. tables debate every few weeks :)

By: NatalieMac

NatalieMac — Fri, 06 Feb 2009 20:20:52 +0000

It’s true that when you haven’t dealt with CSS much, it can be nearly impossible to accomplish what you want. However, tables aren’t nearly as flexible as CSS. With CSS, I can make a three column layout with a header and footer and let the content order be logo and site info, center column, left column, right column, navigation (displays in the header), and footer. You could never do that with tables.

Maybe more projects should hire capable front-end developers who know the ins and outs of browser support and CSS quirks like the back of their hands.

By: ExtAnimal

ExtAnimal — Fri, 06 Feb 2009 14:26:04 +0000

If a layout basically IS tabular, then a layout who’s elements stretch to accommodate content, and to match their neighbours (two big capabilities of tables) is needed.

That’s why CSS is getting display:table display:table-row and display:table-cell.

By: BenGerrissen

BenGerrissen — Fri, 06 Feb 2009 01:05:22 +0000

Document looks like this (visual order):
1.) Portal navigation
2.) Banner (with page title)
3.) Site Navigation
4.) Content
5.) Banner adds.
6.) Footer (disclaimer/privacy etc)

More solid to do this with tables.

However, for better SEO rankings (of your entire sites content and not just the frontpage!) it’s appearantly better to have the following structure (SEO Specialists hired by clients frequently demand this):
1.) Page title
2.) content
3.) Site Navigation
4.) Portal Navigation
5.) Footer
6.) Adds

SEO is not just about getting your website up high in search results on the obvious topics, but to push all your site’s content pages up high on the search listings. The visual presentation and interface, is not the logical order.

This is moderatly easy with floats whilst still keeping your layout grid and content components decoupled. This is also doable with tables, but the means of achieving this makes the use of tables redundant to begin with…

Also when you work with portal or complex cms systems, you get several layers of HTML, your layouts gets cut up into pieces and each piece will be seperatly maintained and changed over a period of time according to the customers whishes. I’ve seen it all too often in my career, that table layouts actually cause so much maintenance issues in these kind of environments, it actually doubled or even trippled the workload. Whereas with CSS, all your content components are portable and exchangeable by default (unless you’re really bad at CSS/HTML).

Another reason not to use table layouts and designers will most likely agree with me, is that it makes it very hard to theme your pages. If you use CSS layouts, you can just make a new stylesheet without touching your templates and basically reorder the visual presentation. If you use tables, you’re pretty much stuck to the dictated table order and can only theme your pages by creating new templates and restart the whole frontend process all over again. This was the whole point of Zen Garden…

The number 1 reason imo. not to use tables, is that it prevents you from actually learning CSS well. Everyone can write HTML and CSS, but it’s like chess, it takes dedication to master it.

Tbh… I want you all to keep using tables… It makes guys like me make the big bucks… So… erm.. proceed and forget what I said…

By: samuraixp

samuraixp — Thu, 05 Feb 2009 23:38:44 +0000

link at the top of the article is broken…

By: ajaxery

ajaxery — Thu, 05 Feb 2009 18:13:10 +0000

@westonc:

I agree for the most part. I guess I was trying to say that tables are generally bad for accessibility. Although from what I understand, most screen readers are highly customized based on user preference. There may be a tables-based algorithm that deals with them just fine. If you look at it logically, the screen reader would read the site from the top down. It would expect there to be header tags for each major section. Starting from the top, that would be page title, then page navigation, then page content, then a sub-nav (if present), then the footer. Usually people would tab through these sections very fast to find what they are looking for. I personally don’t think tables work well with this approach.

Maybe when I’m 80+ years old and blind, I’ll finally understand.

By: nixar

nixar — Thu, 05 Feb 2009 16:46:36 +0000

Just one word: XUL

‹hbox› and ‹vbox›, along with the ‘flex’ parameter, beat your puny tables or CSS hacks.

By: Nosredna

Nosredna — Thu, 05 Feb 2009 14:13:11 +0000

aljames, great idea. But do you serve something else for people without JavaScript?

By: Jordan1

Jordan1 — Thu, 05 Feb 2009 11:35:02 +0000

Joeri said:
The false dichotomy between CSS and tables is not the issue here. The issue is that you’re asked to build a house, and you get to choose between a crooked hammer and a bent chisel. Both tools are sub-par compared to other development platforms.

And while the crowd that stands for all things goods cheers, “crooked hammer” and shuns “bent chisel”, the crowd that stands for all things logical asks, “what benefit is there of using top-grade concrete when your building a house on shallow foundation.”

By: aljames

aljames — Thu, 05 Feb 2009 10:13:53 +0000

Here are a couple of blog posts I wrote on this.

1) Why neither CSS and tables are the right job for layout: http://onewheeledbicycle.com/2009/02/05/page-document-layout/

2) My ideal solution (that will never happen):
http://onewheeledbicycle.com/2009/02/05/html-layouts-ideal-solution-idea-1/

By: Joeri

Joeri — Thu, 05 Feb 2009 08:53:42 +0000

The false dichotomy between CSS and tables is not the issue here. The issue is that you’re asked to build a house, and you get to choose between a crooked hammer and a bent chisel. Both tools are sub-par compared to other development platforms.

By: aljames

aljames — Thu, 05 Feb 2009 08:51:03 +0000

Hmmm… I think that CSS is great at styling documents, thats what it was invented for. However a PAGE is the union of the DOCUMENT (the content) and the LAYOUT (the navigation and overall page layout). The most semantic solution would be to separate the layout elements from the content. I am currently experimenting with a system that applies the layout (table layouts for simplicity, reliability and lack of gotchas) in javascript before the page is rendered. So, the HTML sent over the wire is clean and table free, but the layout (using tables if you want) is applied client side. Thus search spiders and screen readers still see the nice semantic document, but browsers see the nice layout… Interesting idea?

By: drewlesueur

drewlesueur — Thu, 05 Feb 2009 08:50:33 +0000

Sometimes, while trying not to use tables, we end up using unsemantic wrapper divs or get a pseudo-table out of a series of ul elements or divs, etc, which is also unsemantic.

I think tables are great.

By: Nosredna

Nosredna — Thu, 05 Feb 2009 05:32:07 +0000

@ajaxery. I was using Chrome. Firefox’s scaling is very nice indeed. Still, table based layouts are usually more robust with magnification of text. And we often end up with fixed, rather than fluid, designs with css. And we often get fonts that won’t size.
.
I’m hearing that devs love css, but I’m seeing limited designs as a result.

By: westonc

westonc — Thu, 05 Feb 2009 05:28:53 +0000

I’m referring to the misconception that using tables for layout necessarily has a negative effect on SEO, accessibility, and semantics. You implied that anyone who’d use table for layout is unaware of these effects. I haven’t seen any evidence or argument that supports the idea these effects are a central issue.

Particularly SEO. No reliable source of information I’ve encountered has gone beyond suggesting that specific semantics (title, headings, links, in some situations alt text and title attributes, a few other very specific tags) and well-formed markup have real impact on the searchability or ranking of the site.

Semantics I’ve addressed in a number of comments above, and I get mixed reports about screenreaders (including second-hand remarks from actual blind people stating that *frames based* sites of all things are actually an advantage), and as I said earlier, even something as simple as Lynx has been able to work with the dichotomy between different types of tabular markup as far back as 10 years ago. (see http://lynx.isc.org/current/README.TRST )

The bottom line seems to be that despite a lot of handwringing over the repurposing of tabular markup, it doesn’t seem present a real obstacle in practice.

By: ajaxery

ajaxery — Thu, 05 Feb 2009 04:41:14 +0000

@Nosredna:

I’m curious where you see this (url?). Text-size increases work just fine for me in Firefox for IBM and GE sites. In IE8, I see some issues on the IBM site using ‘Largest’ text size. And GE doesn’t budge at all. I know there’s IE6 limitations on text-size increases when you use ‘px’ instead of ‘em,’ but for the other browsers, it should be fine up to a point. But if you zoom the entire page, everything should be fine. IE8, Firefox, Safari and I’m sure other do this by default (ctrl +). I’m sure someone with poor eyesight would opt for a full page zoom over just text, but I don’t know that for a fact.

I didn’t work on these pages at all.

@westonc:

“Yourself included, apparently.”

I’m sorry, what are you referring to?

By: westonc

westonc — Thu, 05 Feb 2009 03:10:52 +0000

using tables for layout is simply the wrong way to do it.

This is a catechism, not an argument.

front-end builders who are aware of accessibility, semantics and SEO as it relates to page structure.

Yourself included, apparently.

By: Nosredna

Nosredna — Thu, 05 Feb 2009 03:08:40 +0000

On the IBM site, two increases in text size (Chrome) is enough on some pages to obscure words behind pictures. Probably wouldn’t happen with a table layout.
.
GE doesn’t let most text scale, but some does an overlaps other text, make both sentences unreadable.
.
Not impressed.

By: Nosredna

Nosredna — Thu, 05 Feb 2009 03:04:34 +0000

@ajaxery,
.
No problem. I don’t want to go back to the bad old days of tables. But I’m not happy with css either. I just get the feeling that the css guys are so zealous they’re not even listening anymore.
.
I think it’s really instructive to look where the smart guys use tables and try to figure out why. Here’s what I’ve come up with. I just went back and looked at the “good” Fortune 500 sites, and I looked at some other sites that use just a sprinkling of tables.
.
1) A lot of the pure css sites are fixed, not fluid. They are very brittle. They either don’t let you increase the size of the font, or they fall apart badly when you increase it. Sites with tables are less brittle, since the table adjusts so well to content.
.
2) Even sites that are almost all CSS have certain common uses of tables. The classic is, say, 5 or 6 equal-sized images in a row. Or Twitter’s left/right division, or the small bits on stackoverflow.com.
.
In my ideal world, there’d be a way to split divs into proportional parts, EITHER left or right (not both). That would get rid of almost every “useful” table I see around. Honestly, I think that’s all we need. Should I write it up in a blog entry? Would I get anyone thinking, or would we just get more yelling?