Kevin Cheng  

OK/Content

March 12th, 2004 by Kevin Cheng :: see related comic

These days, so many people espouse the values of standards compliant web development and separation of form and content that doing so myself would basically be preaching to the choir. Well watch me get up on the podium and give this sermon anyway.

Iíve read all the resources people point to about the virtues of CSS. Be it our fellow SXSW finalists CSS Zen Garden and Asterisk*, W3C or A List Apart. In spite of all the evidence, I was not convinced. The problem, to me, was that so many of the voices were almost religiously fanatical about CSS. If it wasnít done in CSS, it was bad. The whole thing reminded me of Mac fanatics.So it was that I looked on with a skeptical eye and considered my stance. OK/Cancel was not done in CSS. We did everything that made the zealots cringe: BR, B, Tables, you name it, we used it. But as Tom has said to me on multiple occasions, ďit works.Ē Sure we had some complaints about the font sizes being too small but oddly enough, that problem was attributed to what little stylesheets we did use and that further made us apprehensive about making the move.

Finally, one fine weekend, I neglected my course work, my artwork and even my girlfriend and began converting the entire site to CSS. I decided that the only way to make a true argument against it was to have tried it first hand. I finally did manage to do this and published it with very little fanfare. My colleague Joshua Kaufman helped me immensely with his experience and repertoire of links. He also had to put up with my incessant virtual head banging and complaints.

What complaints? Well the fact is, CSS isnít all itís advertised to be. In my mind, there were two major reasons for me to switch over. One was maintainability; if I changed the siteís design, I would be able to do so with a mere flick of the stylesheet. Fantastic! Secondly, the site would be more accessible by devices such as text-to-speech or browser magnifiers.

What I found was that CSS has helped with maintainability but it hasnít been the godsend some claim it to be. Sure, CSS Zen Garden is an excellent example of what can be done with the stylesheet alone but at the core, it is still a very basic design. Once you reach something more complicated, with more interactivity than a collection of links, any changes you make will likely require some changes to how youíve laid out your layers as well. The only reason this frustrated me in the slightest was because of the numerous articles I had read. The extreme enthusiasm some display, hoisting CSS like a float in a parade, makes the expectations unrealistic.

In terms of accessibility, I know that the font sizing issues have now been resolved thanks to a great article on A List Apart. People can now resize our fonts and normally see a consistent font size across browsers. I canít vouch for anything beyond that as I havenít actually tested the site with text-to-speech software. Alas, the comic strip itself will still not be accessible until we provide some sort of full description.

Notice in my list of primary motivation that standardized practice wasnít listed. The fact is, web standards have been a pipe dream since HTML has existed and it always feels like weíre converging but the only way we ever ended up having stability was when MS won. Now MS has real viable competition again and itís become messy. CSS hacks are everywhere. Sure, we can blame MS for not following the standards but outside of the theoretical foo-foo land of the dreamers, in the real world, the one with market share IS the standard.

Nevertheless, that shouldnít be a detractor from using CSS. Browser incompatibility didnít stop us from making web pages when we had to do clear pixel graphics to remedy some inane Netscape table width calculations and it shouldnít stop us now.

The end all be all is that OK/Cancel is in fact better for using CSS. I find it more maintainable from the standpoint of minor changes. Combined with a healthy dose of smart programming and usage of includes, the site is now running smoother than it previously was.

Of course, the real reason I switched was so that Tom wouldnít understand what the heck was going on under the hood (bonnet) and wonít tinker as much.

2 Responses to “OK/Content”
Tom Chi wrote:

The last line was sort of a joke, but Kevin’s right. I’ve been itching to fix the glitches in layout created by the move, but haven’t found the time to grok the mass of new files generated.

The one good thing that can be said about table layout is that everything is right there — it’s a well constrained problem. Now that we’ve moved to CSS-based layout, everything is done with references to files containing attributes for layers… it certainly raises the barrier to entry for confident maintenance. After all, the regressions that you can incur from breaking something are no longer locally constrained.

Anyhow, during SXSW I’ll force him at mousepoint to walk through the files. Then OKC will be beautiful again… j/k.

david g wrote:

Problems with CSS “Standards”:

1) The Box Model (oh, so the width of my box ISN’T the width of it’s content? Gee, thanks! And let’s have a million websites devoted to slamming the one browser that implemented it according to common sense and not the “standard”). The current box model makes it impossible to code two DIV’s floating left with 50% width, and have them still show up next to each other if they have ANY padding or borders. If we have to do it this way, could we at the bare minimum have height:50%-10px, please?

2) The Float model (OK, so we have all sorts of great float functionality for edge-case designs. But sorry, nothing for the run of the mill “image-block in the middle of text” style. Is inline-block a standard yet, and if it is, why is it so erratically supported?)

3) Widths and heights. Okay, the standards compliant browsers finally have min/max widths, but what the hell does the W3C have against declaring heights? This is a HUGE step backwords from tables. Can we please just have “height:fill”, please?

4) Vertical alignment. For some reason, being able to vertically center a DIV inside another DIV is just a really far-out concept to the standards body. Never mind that it’s a day-to-day use case.


Leave a Reply


OK/Cancel is a comic strip collaboration co-written and co-illustrated by Kevin Cheng and Tom Chi. Our subject matter focuses on interfaces, good and bad and the people behind the industry of building interfaces - usability specialists, interaction designers, human-computer interaction (HCI) experts, industrial designers, etc. (Who Links Here) ?