Archive for August, 2011

Table-less Forms: Are They Really That Hard?

August 24, 2011 Comments off

I probably don’t need to explain the love-hate (and in many cases, just plain hate) relationship Web designers have with tables. If you don’t believe me, a Google search turned up this lovely presentation on presentational tables that explains the issues in a much less hot-headed fashion than what I’ve typically seen before. What I usually read boils down to “Tables are evil, and you should never use them.”

Naturally, this presents a few problems: Some things that are easy to do with tables and presentational HTML are much harder to do with CSS and purely semantic markup. For instance, the A List Apart article, Practical CSS Layout Tips, Tricks, & Techniques outlines a few of them and offers some solutions. There’s just one thing that I have yet to see done to my satisfaction: Forms.

Every technique I’ve ever seen for table-less forms has the problem of sacrificing some of the functionality you get with a table. Sure, they can put labels and fields on the same row and even make sure the fields all line up together. However, most of them use either a fixed width or a percentage width for the label column. A table, on the other hand, will resize the columns to fit the content.

Worse still, some of the supposedly more semantic approaches introduce extra markup. The A List Apart article linked above gives us this mess:

<div style="width: 350px; background-color: #cc9;
border: 1px dotted #333; padding: 5px;
margin: 0px auto";>



Shoe size:<span


Go ahead - write something...


Admittedly, that article is ten years old, which probably explains why it’s a rather extreme example. But come now, rather than just ? Inline styles? More importantly,

? Isn’t that awfully similar, structurally speaking, to a table? I thought part of the objective was to trim the fat from the code, and this doesn’t have too many fewer tags than a table. To be fair, a more recent article from 2006 does a better job (though I’m not sure why the author chose an unordered list), but still doesn’t solve the width problem.

Now some people will tell you that there’s no problem with using tables to lay out forms. After all, they really are tabular: Labels get one column, form fields get another. The label refers to the form field on the same row. Besides, if you look at a real form, i.e. one made of ink and paper, it looks like a table. Besides, they’re quick and simple to create, which is no small consideration when time is a factor.

I agree, to a point. I’ve certainly used tables to line up forms before, and I feel no remorse. Even so, it’s not a perfect solution. For one thing, while you can make a case that forms are tabular enough to excuse the use of tables, that isn’t really the most semantic way to do it. For another, you’re still stuck with table markup and form markup.

What I really want is a method that will line everything up the way a table does, stretch or shrink the label column to fit the text, and minimize the extra HTML. To reiterate, I have never seen a solution that does this, though that may very well be because I haven’t looked very hard. It seems like it shouldn’t be too difficult to create such a solution.

So I think I will. Stay tuned.

Categories: HTML

Just Google It

August 2, 2011 Comments off

Something I see frequently online is people trying to help other people find something online by telling them to search for it. This typically takes a form something like this: “It’s really easy to find. Just Google ‘[name of person]’ and ‘[topic].'” Sometimes they’ll even tell you how many links down from the top of the page. I see three main problems with this:

  1. Search engine results won’t be the same for everyone. Google, for instance, takes your location into account, and of course the company has been toying with using its social networking services to enhance search. (Take Google +1, for instance.) It’s also been my experience that the same keywords in a different order will yield slightly different results.
    • Ads are a bonus problem for people who tell you to click, let’s say, the third result. Not everyone knows to skip the ads at the top, and there’s no way of knowing whether the person posting the number knew it, either. Worse, the number of ads fluctuates.
  2. Things change. Even if everyone in the world using the same keywords would get the same results right now, there’s no guarantee that the same results would appear tomorrow, or in a week, or in five years. In fact, since the Web constantly changes, you can very nearly guarantee that won’t be the case.
  3. If it’s so easy to find, it seems to me that there’s no legitimate reason that the person sharing the information can’t do the search himself, post the link instead of the search terms, and save everyone else a step. It comes off looking like laziness.

The bottom line is this: If you want others to find a particular page on the Web, you should provide a link to that page. That’s the only way to ensure they see the page you had in mind, and it makes their lives easier.