(UPDATED 2006.02.09) It was my aim to add the term Failed Redesign to the Web-development lexicon, and, through my previous post, I have somewhat succeeded.
Let me dispel a myth that has developed. I wasn’t being “negative,” and the process of identifying failed redesigns amounts to doing no more than documenting publicly-available facts. The sites are out there for public viewing, as is the source code. We who know what we are doing are perfectly within our rights to critique our esteemed colleagues – or, more accurately, kick their arses, since that seems to be what they need.
We’ve tried everything else at this point, haven’t we? As I put it on – get this! – the W3 QA blog, “We tried being nice and we tried the mechanism of losing a great deal of billable time by publishing free or low-cost guides to Web standards. I see nothing to lose by getting in their faces a little. Time, essentially, is up.”
Not only do we need to make sure that developers of nonstandard sites are really and truly aware of their mistakes, we need to kill off any thirst for the kind of sites that people who use nonstandard methods tend to like. You may find this reminiscent of the complaint that gun opponents aren’t just opposed to guns, they can’t stand the people who like guns. It’s a class issue in every sense of the word.
I should be rather proud if I played a small part in killing off any taste for the abominable sites these people come up with. In 2006, it simply is no longer cool to like these kinds of sites and hold them up as some kind of exemplar. Phony Beatlemania has bitten the dust.
Right. Shall we update our list?
Canadian New Media Awards
CNMA.ca flirts with Roy Cohn levels of hypocrisy and unintentional irony. Yes, it is indeed a site for a set of Web awards that uses tables for layout. You couldn’t make a parody site this bad. But it is for real.
Let me just say for the record, as I so often like to say for the record, that CNMA’s Web acumen is actually quite fairly representative of the endemic sea-to-shining-sea mediocrity found in this country in so many fields. We’re great at launching communications satellites (or maybe we were back in the ’70s), but, to use the vulgate, we suck at a lot of other things, and Web development is one of them. (Linguistic footnote: I have pretty much given up the ghost in using “bites” rather than “sucks,” since by any rational measure there is no sexualist connotation to either term anymore. Nonetheless, CNMA.ca does both.)
Bonus hate-on points? Rampant use of Rotis for identity graphics.
And note well the sponsors: Canadian Heritage, Delvinia, and of course Telefilm, the biggest wankers I’ve ever had to deal with in my entire life. Please feel free to quote me on that, directly to Telefilm if desired. (Behind the scenes, I have, in fact, gone to some lengths to persuade funding agencies to give money only to accessible and standards-compliant sites, and even took a meeting on that topic. But that would knock too many arseholes off the gravy train, plus the French-speaking Quebeckers who run these programs can’t tell the difference anyway; they’re the Montreal kind of tacky.)
Errors (HTML/CSS): None and none. They have nominally perfect code producing a shitty site. Semantics are, however, nonexistent, and get a load of this code:
<td colspan="4" valign="top"><div align="left"><img src="images/threelines.gif" alt="Three Lines" width="16" height="10" vspace="2" border="0" align="left" /><span class="boldtext">2006 Presenting Partners</span> </div></td>
New York
New York magazine launched a redesign that rid itself of tables for layout (save for display ads, a persistent problem that developers often feel is not worth fixing). We are also told we can resize fonts, which we could always do before anyway (IE6+px is irrelevant here); what they mean is they have included a widget to do that right on the page.
The developers are surely on the right track and this is a marginal Failure at worst. I particularly like their style declaration for hidden text:
<p class="ineffable"><a href="#content">Skip to content</a>, or<a href="#search">skip to search</a>.</p>
There are, if anything, too many lists, and instead of properly-used headings I note a Lady and the Tramp–style love for h5, as though it were a strand of spaghetti joining star-crossed lovers. I would certainly not call this JavaScript unobtrusive by any stretch of the imagination.
Errors: 209/unparsable
The Dave Meslin Duo
This may seem like piling on and it may also seem like picking on community sites which, like personal sites, can be as noncompliant as their authors want as far as many of us are concerned. (Still, many teenage boys – where are the girls? – produce near-perfect sites. It is merely optional for the hobbyist; we have bigger targets.)
However, Dave Meslin, founder of the Toronto Public Space Committee, has quit that Committee and launched a set of sites with populist political aspirations, which sets them squarely outside the safe area. You want to play in the big leagues, you stand to get criticized.
- WhoRunsThisTown.TO: Tables for layout, inline styles, no semantics whatsoever (errors: 7/no CSS)
- CityIdol.TO: Apart from likely trademark infringement, all the same as above (including exact errors)
And no, I’m not picking on him because he’s the ur-Spacer. Nonetheless, the Committee and Spacing also could use sprucing up, since the Committee’s site in particular is only marginally better than the City of Toronto’s.
Channel 9
Microsoft’s developer videoblogging site, Channel 9, is typical of every Microsoft Web property save for MSN Search: It’s tables for layout and nonsemantic HTML all the way, with added JavaScript out the arse.
I’m sure it looks great in IE6, which appears to be the only browser it was tested in, as the Windows Media videos fail to work on Macs even with Flip4Mac installed. (I get either nothing at all or video with no sound. And if a company with $50 billion in the bank can’t afford to caption its internal videos, nobody can.)
Errors: 8/9
Houston Chronicle
Reader nomination! The Houston Chronicle’s redesigned site has all the big-haired, tailgate-party tables for layout (39) you expect of Web sites refreshed for ’97. Nested tables just for the weather display. Navbars of a elements that simply need to be placed inside list items and styled (and maybe they could get rid of three or four sets of them). Nine iframes.
This, my friends, is a site that does violence to the great legacy of Matt Müllenweg.
Errors: 264/35
D.I.Y.: Design It Yourself
That seems to be exactly what editrix Ellen Lupton has done with the companion site for the new book about “designing your own books, blogs,” etc. Wouldn’t want these people let loose with something as complex as a blog, I don’t think.
Here, we enjoy not merely tables for layout (24) but images sliced into tables for layout. I like pictures of text for graphic design’s sake as much as the next person, but they use too many, frankly. And forget about semantics.
This is not the way to design a site yourself. Nor is it a way to permit your publisher, like Princeton Architectural Press, to design a site for you. (Theirs is significantly worse. Now let’s see what happens the next time [indeed next] I pitch them a book.)
Errors: 73/0
Vizrea
Pace Tantek, whenever a Web 2.0 company comes courting you for cash, do a View Source on their prototype.
Vizrea is a doomed attempt to beat Flickr. Flickr cannot be beat, least of all for the reason that “Flickr,” while misspelled and a word that rhymes with something naughty in Scandinavian languages, is a nice, snappy name derived from an actual word, while “Vizrea” is so thoroughly alien even its letter combinations don’t make sense. (And how do you pronounce it?)
Now, who’s behind Vizrea? Former Microsoft employees. I guess you know what’s coming, then: Tables for layout (seven) and, in general, piece-of-shit HTML, with missing alt texts, no semantics whatsoever, and even an iframe with JavaScript-only link.
Flickr’s code isn’t perfect either. It’s far from perfect. However, Eric Costello understands the concept of progressive enhancement, uses something vaguely resembling semantics, and has lots of space (in fact, arguably too many spaces) for text equivalents. In case you think photo sites don’t have to be accessible – well, if type and design sites do, photo sites do. And besides, we know that visually-impaired kids love taking pictures.
The leader does it right and the upstart doesn’t. This is perhaps the wrong way for the upstart to usurp the leader.
Errors: 83/7
Star Trek: New Voyages
When you’re covered in Wired and you declare that your Web site “has undergone a complete refit and has been given many new features,” perhaps you are asking for attention. This quixotic and admirable project of shooting entire new Star Trek episodes with amateur cast and crew has seriously inconvenient video downloads but, more relevantly, it boldly goes where every noncompliant site has gone before, with tables for layout (four), what are popularly known as “font tags” (eight), and no CSS at all. The News page is particularly awful.
Errors: 33 (requires forced character encoding)/no CSS
CBC Technology Review
Chalk another one up for the Corpse: A new online technical publication that uses tables for layout and hides all its research papers behind a de facto firewall of PDF. (Untagged, of course; as Microsoft Word for Windows exports, they could be auto-tagged.)
Matters are trivially mitigated on the homepage by an attempt at semantics (one h2 and one ul) and nominally valid HTML and CSS. We revert to CBC form on the current-issue page, with code along the lines of the following:
<p><span class="h3">Telecom and Broadcast Networking:</span><br><br><span class="h2">CBC/Radio-Canada: An Early Adopter of IP/MPLS WAN Technology Amongst Broadcasters</span><br>Ziad Shbeeb
<b></b></p>
Errors: 3/nil