CSSquirrel A look at web development and web design by Kyle Weems

This Monday was the third annual Blue Beanie Day, which promotes and celebrates the use of web standards to create accessible, semantic web content. Therefore, it provides a fitting backdrop to the Curious Tale of Max Weir. I’m not here to bash Max, as he’s received enough of that already. Rather, I’m spinning out a sort of parallel narrative that will cast a poorly timed comment into the light of folk lore for future web designers to consider.

On Monday one Andy Clarke, British rock star of the web design world, posted an open letter to Taylor Swift on his blog. This letter expressed his admiration for her as a musician and a gentle critique of a serious problem with her website: it is almost completely inaccessible to those with visual impairment or the inability to use a mouse. He details it quite thoroughly and politely, aware that as a musician (and not a web designer) she likely had no awareness of the issue or even touched the code of the site. This post provided a great example of the purpose of Blue Beanie Day, pushing web standards awareness to those who need it.

All was well until around comment #9 on Mr. Clarke’s post, by one Max Weir. You should read the linked comment for the full text, but the gist of his missive is summed up by the following line: This site is an interactive flash experience and thats all there is to it, there are designers who think accessibility, web standards etc and those who focus on creating a immersive experiences only.

This comment by a man who’s Twitter bio is “Design is form and function on equal level”, posted on an accessibility blog post on Blue Beanie Day, formed a nexus of baleful energy that summoned from the deep places one of the dreaded behemoths of nautical lore, the Beanicornupus. Identifiable by its massive blue beanie and gossamer spiral horn, this ravenous monster consumes the flesh of designers who think that “cool media experiences” are more important than ensuring a site can be used by impaired visitors and would consider that making a site this way is a valid business choice.

Poor Max didn’t stand a chance, suffering many grievous wounds at the hands of the commentators even after Andy tried to call them off. Like Captain Ahab, Max underestimated the beast. Today’s comic portrays his final moments, swallowed up by the Beanicornupus, calling out his defiance at the very end.

Max’s gruesome fate can provide a cautionary tale for us all. Web standards aren’t some sort of optional flavoring for some websites. They’re needed by every one of them. Those who choose to ignore that will face mockery from their website creator peers, and their clients will lose customers who aren’t able to access their sites. Although we’d like to think that only musicians, big uncaring media conglomerates, and our grandmothers don’t know the gospel truth of web standards, the fact is, as Andy said (when asking his commentators to stand down): It’s sobering that on Blue Beanie Day where we, who pride ourselves on our support for standards and accessibility, pat ourselves on the back for a job well done, must not forget that the job that Jeffrey started with Designing With Web Standards is far from done.

Today’s comic features contest winner Andrew Poppelaars in the midst of squirrel-spawned hi-jinks involving Andy Clarke, his underpants, and a bathrobe.

Yes, there’s a bit of an homage from this to the very first CSSquirrel comic, which portrayed Andy in an underwear-related situation at AEA: New Orleans in 2008. (I swear I’m not a stalker.)

Andrew’s entry into the CSSquirrel contest did not include an AEA presenter as requested, but (a) it was funny and (b) it was the only entry. Note to self: one-day contests on the weekend don’t get much results.

I’m not at An Event Apart: Chicago, which is currently going as I type these very words. Yes, this makes me very sad. I can only dream of the pizza bar, or the MT party, or more importantly, the loads of awesome web peeps coming together for some sort of geek gesalt where good ideas are spawned.

Good ideas like A Feed Apart. I’m really grateful this thing exists, as it lets me live by proxy as if I were somewhere in one of the rows of the conference, freezing in the morning sessions and digesting lunch in the later ones. As a public request to the AFA gents: Any chance at blending in some sort of Flickr feed to this? I’m sure there’s plenty of iPhone pictures cropping up, and it’d help enhance the experience for those of us visiting by proxy.

To those of you at AEA: Chicago, continue to enjoy. And if any one of you did happen to slip into Mr. Clarke’s water closet…

One of my regrets for this year was my inability to attend An Event Apart: Boston or @media ‘09. I’m sure each conference was full of great speakers, tons of new ideas, and an atmosphere alive with fellow professionals sharing thoughts about what they love about their jobs.

In particular, though, I’m sad that I missed Andy Clarke’s “Walls Come Tumbling Down” presentation (warning, link goes to a very long presentation transcript.) He expressed a good deal of nervousness about how the topic would be received, which implied it was going to be pretty eye-opening considering his usual bravado. It’s something I just had to see… if I had the funds for traveling, attending, and food and board.

As I don’t, I didn’t see it. Which is sad. Fortunately for me, he posted the transcript and slides online (see link in prior paragraph.) It’s a long read, but it’s worth it for every single one of you to go take the time and check it out. It’s good. It’s great. It pushes on a lot on updating the web design process to reflect not only the state of the modern web, but also the state of the modern economy. It’s so good I wish I could build a time machine, go back to earlier this year, and do the presentation myself to sound as clever as he does.

My short-lived attempt at building a time machine ended when I discovered that DeLoreans are slightly beyond my means to purchase. So instead, I had to content myself with creating a 80’s themed comic that portrayed my agreement with what Andy is preaching. I think today’s comic proves two things: 1. Andy Clarke would probably fit in quite well with the pastels and whites of undercover Miami cops and 2. Some things can’t be built with just a picture.

Let me focus on that last one in more detail, because it’s something I’ve encountered in my own career and talked about before, but keep encountering.

In the example listed in the comic, you can’t expect a speedboat to be built from just a drawing. By the same token, there’s a vast majority of products that require a design that is more than just an image. This is something we accept as common sense in our everyday lives. Have you ever had a home built based only on a picture some guy drew, rather than blueprints from a contractor? No, of course not!

So why do we expect modern web sites (which are more often than not actually applications) to be something your developer can make or your client can easily grasp with a static visual proof/comp? Yet, all too often, this is exactly what we show clients. We finish making a pretty picture in Photoshop set to just the right width, then get our clients to sign off on that. It’s then handed over to your developer (or whatever you’re calling the guy making the code) with little to no cues for how the site responds to a changing browser resolution, how it interacts with the user, etc.

As a result, an iterative process begins. The developer interprets the designer’s vision. It goes to the designer, who naturally will find issues caused by a disparity of vision on how the site interacts, or whether it has a fixed width, or whatnot. Then they mark up their preferred changes, and send it back. This goes on until the designer is happy enough to show the fledgling site to the client, who almost invariably will have a problem with it because it wasn’t what they imagined when they looked at the static picture they were shown!

So it gets revised… again.

Finally, it all seems well, until the client’s mother sees the site on their old e-machine running IE6, and they want to know why it looks different. Where are the rounded colors, the transparencies?

Time and again I’ve heard of this happening or experienced it myself. Why is it still occurring? The web is interactive. The web is different from browser to browser. The web is sometimes seen on a screen slightly larger than a postage stamp. We know this. In order to properly design for it, we need to move beyond habits we inherited from print.

Andy proposes designing in the browser, showing the client how it changes depending on a browser’s support, and how it might interact with different widths, etc. For some designers this could be a pretty radical step, as accustomed as we’ve become to using Photoshop’s powerful toolset. But on tighter budgets in an increasingly complex Web, we don’t have a lot of choices in the matter.

I could repeat Andy point for point, but let me just play the role of fan boy and tell you that he’s brilliant. He’s saying what we all understand: We have to change how we design for the Web. It’s even more crucial in this economy than it was a couple years back. Go read Walls Come Tumbling Down. Even if you’re not in a position to adopt all of his suggestions (or even if you disagree) you’ll come away from it improved.

I don’t need to write too much about this particular topic, as I’ve ranted about it in the past, but I couldn’t help but notice Andy Clarke’s micro-rants on Twitter about Opera’s recent bad behavior towards Microsoft (see here, here, here, here, here and even here for some samples of his thoughts). I was hoping to see a blog post manifest from him that I could read while laughing deeply, perhaps even shooting milk from my nose. Alas, Andy’s better sense took hold and he did the smart thing and went and watched Star Trek.

I also saw Star Trek. It was good. It was better than good. Go watch it, you’ll love it. I promise.

As it stands, I’ll take a swing or two in his place. First, let me direct you to today’s comic featuring Andy Clarke, wherein a couple of cheap shots are made at Opera’s expense. Then, continue reading.

First, I’m aware that browser usage statistics are like a dark art, much akin to necromancy and astrology, where accuracy isn’t really achievable. But the fact is (and take a look at Wikipedia’s page on the topic) that Opera according to some of these browser usage sources does in fact have less users than Netscape.

That’s right, there’s still people using Netscape. How scary is that? I wonder if they think grunge is alive and watch reruns of Family Matters while downloading websites on 14kbps modems. And just to reiterate, there’s more of these people (according to some sources) than there are people using Opera.

Beyond that, Google Chrome is the new hot browser in town and has already exceeded Opera’s user base in less than a year. That’s right, less than a year.

Look, I’m not saying it’s the number of users that count. After all, IE6 is utter rubbish and it’s still being used by too many people out there. What I am saying is that instead of wasting your company’s public image whining about the fact that Microsoft is doing us all a favor and forcing IE8 updates over their update system, you could be spending time looking at your own browser and figuring out why among other things a browser that has been dragged along for a decade by AOL then finally shot in the head (aka, Netscape) still has more users than your product.

Instead of making absurd suggestions that your competition serve your product via their update service, maybe you could look at Google Chrome and devise how it so rapidly out-paced you in such a short period of time?

Microsoft’s browser, even its newest version, isn’t even close to the coolest browser on the market. I don’t like Internet Explorer, and I only use it to check website compatibility in my job. But I don’t use Opera either, and that’s because (among other reasons) it has thus far convinced me (and the rest of the world) that it’s not worth the effort of installing and using rather than Firefox, or Safari, or the other web standards-compliant browsers on the market. It’s enough to make me wonder why we consider Opera part of the Big Four (now the Big Five). At this rate, with even terminated browsers giving Opera a run for the money, should we expand that name to the Big Six?

Is Opera a good browser? Yes. If that’s not the reason that it’s being ignored, than what is? Perhaps a lack of add-on support. I’ve always felt that Opera’s too busy telling people how to surf the web, and not spending enough time figuring out the features people want. Firefox isn’t popular on accident.

But I’ll tell you the number one reason why I don’t use Opera. It’s because of the company’s public behavior with their legal actions and petulant whining. The rank-and-file employees are talented people creating a worthwhile (albeit, not standout) product. But the big shots on top cost the company their credibility every time they make a cheap, transparently spiteful shot at the current market leader.

And lest I let the others off the hook, shame on Mozilla and Google for getting involved with the EU nonsense. Focus on your products, not on begging the government to get people to install your browsers for you.

It only took me about four and a half months from the moment the idea was conceived, but finally the first CSSquirrel comic has been produced.

Initially my inaugural venture into the world of a web design webcomic was going to provide a gentle mockery of Opera’s failure thus far to produce a developer add-on in the vein of Firebug. Then, of course, they dropped the Dragonfly bomb. Robbed of my thunder, I’ve moved to something both more ridiculous and risque.

Which is to say, Andy Clarke’s underpants.

Well, it’s not precisely about underpants. I’ve recently fallen to the web developer trap that is Twitter, and like some voyeur into the world of the notable I’ve started following the twits (tweets?) of luminaries such as Clarke, Zeldman, and David Shea, among others. Buying into the premise of Twitter as a micro-blogging tool, I’d hoped to see the insights their bright minds would produce about this whole web design thingy.

I’ve definitely seen some insights, but at 140 characters or less, it seems Twitter is more adept at detailing what someone’s had for lunch, absurd overheard remarks, or links to Flickr photos. (Incidentally,  the whole blending of Twitter and Flickr and other such apps ties nicely into Zeldman’s topic of the vanishing personal site that I’ve been meaning to weigh into. File that under ‘Topic for Later’.)

So I’ve felt less like an enthusiastic pupil and more like a peeping Tom. Has this stopped me?

… No. No it hasn’t.

What I didn’t expect to see, and am fascinated by, is the sort of weaving tales that a group of Twitter feeds create when a bunch of users are discussing the same topic or are at the same convention. In particular, An Event Apart New Orleans 2008 was an event that I didn’t have the pleasure to go to, but did have the pleasure to experience indirectly through the various tweets of the designers present. It was even more enhanced by the various Flickr photostreams linked to by the participants, showing smiling pictures of famous designers, hazy pictures of jazz bars, or neon-lit photos of rainy Bourbon Street.

For a guy who was struggling with misbehaving forms on a chilly spring workday, it was a delightful diversion to refresh my follows every now and then via Twitteroo and see what was going on.

What was forming were stories. One that caught me the most was what I’ve dubbed the “Ballad of Andy’s Bag”, a gripping tale that starts here with his touchdown in New Orleans, and then shows the breakdown of a man’s mind as he’s robbed of his luggage for almost two days before being finally reunited here.

I decided this little tale could use some immortalization, and perhaps a disturbing implication of stalking, thus I’ve formed the monster that is this comic. I’m not sure if it was entirely wise for me to launch things off with a sketch of web design’s British folk hero in his knickers, but sometimes these things just write themselves.

Although it’s my intent to continue to provide comic forays into the web design world (probably on a weekly basis), it’s not my plan to show mostly nude designers regularly (I don’t think the world is ready for Jeffrey Zeldman displayed as such).

Please feel free to enjoy