The broken web

So I spent the day looking at web design again. I don’t do much of it anymore, but Lethania does and so I tend to get pulled into it. I later ran into this ad, which I thought was kind of funny:

I would be much happier if everyone could start creating flash-free websites. Anyway, today’s ordeal made me think back to the fine old days when everything was a table. HTML wasn’t made to display layout. The nice things about HTML, hyperlinks, worked just fine in regular text documents with some simple formatting, like bold and italic, its creator figured.

The nice things turned out to be really nice though, sparking an incredible development where pages got increasingly sophisticated layouts. The original HTML text format included tables, a fact which was quickly used to hack together all kinds of pages. A table could be used as a grid to stuff things into certain places, and a table inside a table could be used to create more interesting layouts, not to mention a table inside a table inside a table.

Because tables were meant to be (you know…) tables, different browsers rendered them slightly differently. Fine, if all you want is a table of text. Not so fine, if what you wanted was a pixel-perfect design. The solution to this was to add a whole slew of properties to each table, row and cell.

So after hacking together a sophisticated web site layout using table, the result was predictably a complete mess. The tables holding the text in place was mixed in with the text itself, making sites a nightmare to update or maintain, to not even mention changing the design.

A solution was clearly needed, to separate the design from the contents of web pages. So, why not adopt a language that wasn’t meant as a design language either? Sure thing, Cascading Style Sheets (CSS), a language meant for styling rather than layout was adopted during a long and slow process full of bugs, browser incompatibilities and new hacks.

Today’s standard of “good” for the web means using HTML strict (which few do) and control the appearance using CSS. The result is slightly less convoluted than the tables approach, but takes about 20 times as much effort to understand or write correctly, involves just as much hacking and is so fraught with peril that most people simply avoid it, going back to tables or mixing in horribly ugly JavaScript. Or, as seems to be extremely popular with games companies, insist on making the entire website in Flash, even though there’s absolutely no need for it.

So the page we were looking at today needed 3 columns of the same height. Let’s do it the old way with tables, for nostalgia’s sake:

<table>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

Okay. Not too bad. So how to do this with CSS? Generally, you’ll need 3 DIVs next to each other, all with float: left. This makes them each have an individual length though. There are several ways to get around this, but none of them are good. The first involves stretching images across the DIVs as background images, which means you’re now bound to the color of those images instead of a color value. Also, you can’t have borders.

The second way we tried involved a very complicated set of maneuvers using three extra panes and shuffling content out the left side of the screen and then back in. The description for how to do this was about 10 pages long. And oh, it turned out to not work with borders either. Sigh.

So finally we found one way that seemed to work with borders. Only it didn’t, since you didn’t get any bottom border that way. The good part is that you could hack around that by using an image.

So for the old horrible table version, you substitute a mess of nestled DIVs and several pages of CSS, and it doesn’t even work fully without adding a picture where you essentially paint the entire bottom of the border along the page (yes, you actually paint a snapshot of your entire webpage, 1 pixel high). Way to go.

<style type="text/css">
      #container { float: left; background: url(images/example-6.gif)
          bottom center no-repeat; padding-bottom: 1px; }
      #inner { float: left; overflow: hidden; }
      #inner div { float: left; background: #ccc; border: 1px solid #000;
          width: 200px; margin-right: 5px; margin-bottom: -1000px;
          padding-bottom: 1000px; }
      #inner .col2 { background: #eee; }
      #inner .col3 { margin-right: 0; }
      .clear { clear: both; padding-top: 10px; }
</style>
...
<div id="container">
  <div id="inner">
    <div>Column 1</div>
    <div class="col2">Column 2</div>
    <div class="col3">Column 3</div>
  </div>
</div>
<p class="clear">

That seems like a great way to code! Not to mention that part of your design is now locked up in the image.

The best part about all of this is that it’s presented as “without CSS hacks”. Well, if having to use 6 nestled divs, large-number positive and negative margins and all kinds of bullshit like that isn’t an ugly hack, then I don’t know what is. The fact that the art of web design has advanced to the point where the normal thing you have to do is one big hack isn’t encuraging. And then they add the hacks on top of that…

I never liked tables, but at least they worked. In one of those memorable IRC quotes (in Swedish), someone said:

<sycon> imagine 1000 ants, tables are like the cage that keeps them in place, in the right place
<sycon> css is like a child with spasms trying to poke them all into place with chopsticks.

After spending countless hours trying to do seemingly simple things, I think I agree. Something’s still broken with the web, and no one seems to care to fix it. Well, other than inventing more workarounds.

But hey, at least you can draw Homer Simpson with it. So, ok, let the flak begin. Look, a Parrot.

Web Form Verification for Dummies

The standard method for interaction with computer applications has gone from being the command line to being the native GUI, to being the web form. We were awesome at verifying input when it came from the command line — that was simple. Then we were kind of ok verifying input in the native GUI, although quality varied a lot more.

Now we suck at verifying user input from web forms. The current state of code that verifies user input has both managed to take us back to the kindness of the command line when it comes to freedom of input and manages to check all the wrong kinds of things. Why is it so hard to write these checks? I suspect because people don’t really think much about them, and I bet there are more interesting things out there than to write user input verification.

These problems aren’t some beginner coder errors either — they’re rampant on even the biggest sites out there like paypal.

The most common field to get me snared is the phone number field. In 99% of all cases, the site assumes that all phone numbers in the entire world are formatted like US phone numbers. Not, as one could imagine, because I’m claiming to live in America — I clearly just told the site that I live in a European country. So anyway, inputting my actual phone number causes an “invalid phone number” error. Not that there is any mention whatsoever on the site about what the correct format of a phone number is (there are, in fact, even several ways of writing a US phone number).

This sets off a wildly unamusing guessing game of how to “convert” my phone number into a format the site will accept. This practice often costs the sites money as I end up giving up and going somewhere else, frustrated and unable to make a simple online purchase that didn’t really require that phone number anyway, did it?

Passwords

Another highly amusing game is the one where web sites try to force users to choose “secure” passwords by enforcing the formats of passwords. “You must have at least 6 characters, with at least one letter and one number”. Sounds good, except in general these passwords are restricted to only contain letters and numbers. Hold on, isn’t it common wisdom to include at least one non-alphanumeric character in a secure password?

As such, out of my set of passwords, the only password which tends to pass most password verifications is my least secure one. The idea that you could fix a social problem through technology is somewhat funny anyway — “password1″ is not more secure than “password” in any way that really matters.

The same thing applies to the old trick of forcing your users to change passwords every month. This can have two potential outcomes — users append a counter to the end of their password, and increment it every time they are forced to switch, or they keep a post-it note taped to their monitor with their current password. Neither outcome is a net gain in terms of security.

Some sites even let the user set a password which is then considered invalid when the user tries to log in (ebay, for instance,  has done this) — causing a prompt for a new password and much annoyance.

Format wars

Parsing stuff is what computers are good at. So forcing me to input something in a strict format is always a loss. Either separate the fields and force me to select the individual parts of a date separately or actually use all that computing power at your disposal to do your user a favor. Telling me you have no idea what I mean by “2009-12-21″ because you expected “20091221″ is annoying the user for no good reason, even if you told me to not include dashes.

If you find yourself in a situation where you need to verify input  from the web, take an extra minute to consider how you could make things as convenient as possible for the user, which ones of your assumptions only hold true for the region you live in… and when you’re done, whatever you do make sure you tell the user exactly what the expected format is.