Archive for the ‘Web Design’ Category

In which I pick on John McCain for Sloppy Web Content

September 7, 2008

In a rare and inexplicable moment of responsible citizenship I decided to look a little into what Barack Obama and John McCain had to say about an actual issue or two. Specifically—and I’m at as much of a loss to explain this as you are—I looked at what they, or rather their websites, had to say about reducing greenhouse gas emissions through the magic of Cap-n-Trade. What I learned is that Obama’s standards for web content (and design, and aesthetics) are rather higher than McCain’s.1

Specifically, McCain’s position statements are full of awkward phrasing and funny capitalization. Here are a couple of sample paragraphs:

To Support The Cap And Trade System, John McCain Will Promote The Innovation, Development And Deployment Of Advanced Technologies. John McCain will reform federal government research funding and infrastructure to support the cap and trade emissions reduction goals and emphasize the commercialization of low-carbon technologies. Under John McCain’s plan:

Emissions Permits Will Eventually Be Auctioned To Support The Development Of Advanced Technologies. A portion of the process of these auctions will be used to support a diversified portfolio of research and commercialization challenges, ranging from carbon capture and sequestration, to nuclear power, to battery development. Funds will also be used to provide financial backing for a Green Innovation Financing and Transfer (GIFT) to facilitate commercialization.

OK, I suppose I’m just being snarky, but that really looks like they copy-pasted from a press release (like this one), removed some formatting, and didn’t bother to check the results. On top of that, there’s a typo (maybe a “Cupertino?”): “process” for “proceeds.” I also think that the constant use of “John McCain” sounds stilted (Obama’s equivalent page refers simply to “Obama”). Maybe “stilted and awkward” is on purpose, to reinforce his public speaking style?

Obama also has longer and better-written descriptions of pretty much all the issues. But rather than talk too much about substance, I’ll mention that not only is Obama’s website uniformly more attractive than McCain’s, even the very URLs are more humanely designed than McCain’s. Mouse over this and this (links to the two emissions-reduction pages) to see what I mean.

By the way, the two of them say pretty much the same thing about cap and trade. Obama makes it clearer that he wants permits auctioned off; McCain says only “Emissions Permits Will Eventually Be Auctioned To Support The Development Of Advanced Technologies.” They seem to have different priorities for what to do with the auction receipts, but that’s hard to tell. Since whatever either might actually try to do would really be done in Congress, I see no effective difference between what they say. The real distinction is that, unlike McCain, Obama probably actually knows what his position is.

 

1. It is probably unwise of me to criticize anyone for sloppiness. “Let one who is without sin cast the first stone” and all.

Advertisements

A Javascript bug in NBC’s Olympics Website

August 17, 2008

Hey, I found a bug! The schedules in NBC’s Olympics website are supposed to be displayable in either Beijing time or your local time. This works only in IE7—so Firefox-using me ran into it the night trying to find out when Michael Phelps would win his last medal.

Here’s the problem:


clientTime:function()
{
    $('tzcClient').show();
    $('tzcLocal').hide();
    var mts = document.getElementsByClassName ( 'timeConvertible' );
    mts.each(function(mt) {
        if(mt.readAttribute( 'title' ) != null && mt.readAttribute( 'title' ).length > 0)
        {
            // etc

The error is in line 6: “mts.each is not a function.”

What’s happening here? The website uses the prototype js library, which provides many nice features (although I’ve decided I prefer jQuery; I’ve been meaning to write about that for a while now). The js developer here didn’t read the prototype documentation cautioning against getElementsByClassName. In Firefox (and Opera), that is a native function, but in IE7 it’s not, so prototype defines it. And prototype defines a more useful version, returning a prototype Array object rather than a native unmunged array. That prototype Array has the “each” function; the native one doesn’t. Firefox and Opera’s superior js implementation leads to a worse result.

Minimalism

June 22, 2008

I’ve been trying to digest the minimalist redesign of James Bennett‘s and Ryan Tomayko‘s blogs. On the one hand, wow, cool, I’m all for ruthless simplification and streamlining. On the other, I sort of feel like I’m looking at a web version of a Dogme 95 movie, adhering to the rigorous asceticism of a borderline-sadistic Lars von Trier, if Lars von Trier were a web designer.

First, what I like. God knows most web pages (including my own; I at least of the excuse of being a talentless amateur) are far too crowded and busy and horrid. Even discounting the worst of the web—epilepsy-inducing flashing ads (because of which I use an ad-blocker) and the horrors of MySpace (is it really possible to actually read one of those sites?)—there is just too much crap on the typical page. Streamlining is good, both aesthetically and functionally.

But.

There is a point to a certain amount of “administrative debris.” Like everything else, the web does have certain standards, even if they’re vague and flaky and stubbornly anarchic. When I land somewhere I expect to be able to figure out where I am—I expect there to be some sort of overall site title up at the top of the page somewhere. Breadcrumbs are nice; they give me a nice feeling of being able to figure out where I am. On a blog, I expect a certain amount of familiar navigational administrivia to allow easy poking about. Landing on James and Ryan’s blogs I didn’t see those things; I was confused for a while. It wasn’t even completely obvious I was looking at blogs.  After having looked at them for a while I’m still a bit uneasy, even as I’m very impressed. I feel a little like I’m visiting an exquisite Mies van der Rohe building, but don’t know how to ask where the bathroom is.

Ryan and James’ basic philosophy, borrowed from the great Edward Tufte, is

The idea is that the content is the interface, the information is the interface – not computer administrative debris.

Anything that isn’t conveying some sort of actual information is ruthlessly excised. There is nothing left to take valuable screen real estate and attention away from the content.

Now that is a noble goal. One of the great things about the web is that hypertext really does allow a pretty close approximation of that, if only web designers can be persuaded to use it (read what RT has to say on the subject). But I’m not persuaded that taking the philosophy to its extreme is a good idea. Not everything you might want in an interface has an obvious analog in the content. Shoehorning links into not-quite-obvious places can lead, if not to outright confusion, to a certain loss of clarity.

Take for example, the approach both Ryan and James take to a “home” link. Rather than using the relatively contentless word “Home,” or even a title, they link through their names. But that’s not what I expect. I expect the name to take me to some “about” page, maybe with some amount of information about the author, but probably not to the familiar place that tells me what the point of this site is and what all might be there—which is what it actually does.

Another problem with this strict minimalism in an environment like the web, in which there just aren’t a lot of resources (e.g. there’s only half a dozen workable fonts you can rely on all your users having), it’s difficult to differentiate your site. I’m not talking about the aesthetic outrages marketers commit in the name of “branding,” I’m talking about simple identification. When I’m web-surfing I want to be able to figure out where I am without thinking about it.

Minimalist web design also has other pitfalls. Given nothing but typography to work with, a minimalist designer really has to get the typography right—and that is difficult. James Bennett’s site, for example, has overlong lines. See also some intelligent discussion of typography in his afore-cited post and its comments.

I seem to have written one positive paragraph and six negative. That is not at all an accurate reflection of my actual reaction! I just had a lot more to say about what I didn’t like than about what I did. If by some miracle the web design world would move in their direction life would be better (and if some of their practices became more standard some of my objections about being confused would go away). Really I’m impressed, and am trying to absorb some good practices from these. But I’ll certainly never be as rigorous as they are. Were I a real designer I’d go for a more softcore approach. Some examples of things I like:

  • The atheist website I’ve mentioned before—although really it could use some paring, and its lines are too long.
  • Anticlown Media’s About page. They’re the geniuses behind The Superficial, I Watch Stuff, and Geekologie (decidedly non-minimal sites, but I like them anyway).
  • Some, but by no means all, of the “examples of great web typography” in I Love Typography, here and here.

James Bennett quotes Antoine de Saint Exupéry rather disapprovingly:

In any sort of discussion of minimal or minimalistic design a certain quote, attributed to Antoine de Saint Exupéry, is inevitably bandied about:

A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.

At first this seems like a brilliant insight into the heart of the design process, but it really turns out to be bullshit. because the point at which there is nothing left to take away is the point at which there is nothing left, period.

A commenter helpfully provides the quote in context:

And now, having spoken of the men born of the pilot’s craft, I shall say something about the tool with which they work, the airplane Have you ever looked at a modern airplane? Have you followed from year to year the evolution of its lines? Have you ever thought, not only about the airplane, but about whatever man builds, that all of man’s industrial efforts, all his computations and calculations, all the nights spent over working draughts and blueprints, invariably culminate in the production of a thing whose sole and guiding principle is the ultimate principle of simplicity?

It is as if there were a natural law which ordained that to achieve this end, to refine the curve of a piece of furniture, or a ship’s keel, or the fuselage of an airplane, until gradually it partakes of the elementary purity of the curve of a human breast or shoulder, there must be the experimentation of several generations of craftsmen. In anything at all, perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away, when a body has been stripped down to its nakedness.

In context, there’s something to this, albeit not necessarily immediately applicable to web design. “There must be the experimentation of several generations of craftsmen,” he says—“stripping a body down to its nakedness” is a laborious process. The simplicity he’s talking about is not merely a matter of stripping things away, but of finding out what is truly necessary, of getting as close as we can to the Platonic Form of whatever we’re doing. Attaining simplicity is not simple.