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

Ladies and gentlemen, I have three Dribbble invites to give away. I’m sure some of you have seen the various tweets, blog posts and comments about this community of sharing shots of what you’re working on (I know I’ve done my share of such messages). It is, in a word, a great place to share creative juices and get feedback from fellow web designers and other creative types.

I love it.

And I want to share.

To that end, I’ve devised a contest. One of the features of Dribbble is the “rebound”, using a basketball metaphor to describe making a shot (aka, image) that is a remix or inspired by a previous shot. There’s been a few really neat contests inside Dribbble to test this feature, with awesome results. In that spirit, I’ve created an incomplete comic that you can download here. Take this comic, mix it up and complete it. Alter it however you see fit, within the following guidelines:

1. Some of the original art must be present.

2. The three panels must still exist (aka, it fits the standard CSSquirrel strip frame).

3. The comic must involve An Event Apart: Seattle in some way. I’m heading to this awesome event soon, so the Squirrel should get his moment to enjoy the experience.

4. The Squirrel must be in the final product.

That’s it. Those are the only rules. Add in characters, alter backgrounds, create speech bubbles, do interpretive dance, whatever. Go, mix it up, then post it online somewhere (where I can get to it) and send a tweet to @cssquirrel or leave a comment to the post that links to the image. On Monday morning, I’ll review the submissions (along perhaps with fellow Mindfly peeps) and choose the top three comics. All three will receive Dribbble invites, and the #1 comic will appear as CSSquirrel #59! The top three will also appear in an April comic. I know, I know, I’m too generous.

Now, off you go! Your deadline is 8:00 am (PST) Monday, March 29.

I wasn’t at An Event Apart: Chicago 2009. But along with other desk jockeys, I followed along via A Feed Apart. One comment that got re-tweeted about seventy million times during the conference was the following quote by one Jeffrey Zeldman:

“Real web designers write code. Always have, always will.”

When I made a comment about the amount of retweets occurring on this post, I got a reply from Molly Holzschlag (who I respect, but am incapable of pronouncing the last name of):

“Bless my pals at AEA but the entire comment is bait or a very misguided statement to make on the brink of 2010.”

When two people who helped define the industry as it is today have a difference of opinion, I’m left on the sidelines wondering which to agree with. One the one hand, I agree with the concept that design needs to occur more in the browser and less in Photoshop, but on the flip side I suspect Molly has some insights that I’m simply not taking into account.

So I’ll throw it to the web at large. What’s your opinion on this topic? Do designers need to start doing more design in (X)HTML and CSS, or are we coders going too far in expecting the to put Photoshop aside in the early design phase?

As I discussed on Monday, I’m working towards making this site more accessible. I’m starting with creating access to the comic for visually-impaired visitors, although I know that’s likely the tip of the iceberg when it comes to making something truly accessible.

Today I finally set up a system for linking a transcript of the comic via an aria-describedby attribute on the comic’s image tag. As I learned, making a transcript is a time-consuming process. So far, only the most recent comic has a transcript, and it took me well over a half hour to do with little outside distraction. I can understand, then, one major barrier to accessibility being more common on the Internet: laziness.

It’s easy enough for me to consider that my comic has a very small cross-section of people that it’s targeting: web designers and developers. Of that demographic, even less have accessibility issues significant enough to prohibit them from enjoying the comic (or in some cases like deafness, the comic doesn’t have any feature that they’d be missing out on without added support). But the fact is, if even one person is interested in my work, and they can’t experience it because of a barrier that I should be trying to help overcome, then I’m doing something wrong.

Over the next few days or weeks (depending on how much free time I have for the project) I’ll continue to make transcripts for the past comics. All future CSSquirrel comics going forward will have a transcript created when it is first made.

If you’re a person who makes use of screen readers, can you take a chance to examine comic #34 (Squirrel in the Dark) and tell me if the feature is working correctly, or if there’s any other work I should make to enhance it? I’d appreciate that very much.

Sooner or later HTML5 will not be the most interesting topic to wax poetic about. This is not that day.

I’m usually in sync with the web-related posts written by Jeremy Keith over at his personal site, Adactio. He’s usually saying something I’m thinking (albeit with more eloquence than I could muster), or spouts some gem of wisdom that I wish I’d thought of first. As such, it is safe to say that I respect him and, normally, his opinion.

This weekend, however, he wrote firmly on the topic of HTML5 and its process, in The HTML5 Equilibrium. In doing so, he made a sort of sandwich. The opening and closing of his post were two delicious, carefully toasted buns of high quality. But firmly settled in between them was a rank egg salad segment where he detailed his view on the W3C/WHAT WG “split personality”, ruining my appetite for his creation.

I’ve never been able to stomach egg salad sandwiches.

My reaction was spawned by his discussion of the status of Ian “Hixie” Hickson as the dictator-for-life of HTML5, sitting astride a position of absolute power in how the spec is edited. As readers probably know by now, there’s been plenty of friction lately between the HTML5 efforts and every other W3C group known to man as Ian’s been refuting their expert advice in exchange for his own pseudo-expert opinion on a wide range of topics.

Keith comes to Hixie’s defense by stating that although an unelected autocrat is horrible, it can work quite well. He evokes the power of dictatorship by referencing Thomas Hobbes’ Leviathan and quoting Shakespeare’s Henry V. Specifically, he states that by doing so we transfer “moral responsibility” from the populace to the dictator, then goes on to say that Ian has taken this mantle and used it evenhandedly and fairly.

In short, Jeremy uncouples the means from the ends. Leviathan, written in the 17th century, is a text that firmly opposes Separation of Powers and refutes the Right of Rebellion, claims the sovereign’s acts are incapable of being considered unjust, and makes it unjust for the populace to attempt to unseat the sovereign.

In short, do what you’d like, Hixie. It won’t be our fault, because we’ve given you all the power, and from here on out we’re blameless. But at the same time, should we disagree with you, tough for us. It’s all your show now.

And really, that’s what it’s become. The Hixie Show. The amount of “not invented here” mentality that evades the modern HTML5 spec is odious. Accessibility in HTML5 isn’t being decided by experts. Process, when challenged through W3C guidelines, is defended as being “not like the old ways”, in essence slapping the W3C in the face. Ian’s made it clear he won’t play by the rules. When well-meaning experts carefully announce their opposing positions and desire for some form of closing the gaps, Ian and the inner circle constantly express how they don’t understand. This understanding issue has reached a comedic point. When Sam Ruby pressed them on the subject during an objection by John Foliot (as noted here), Ian’s response is a glib “I don’t understand John’s concerns. He hasn’t explained them. He has just made unsubstantiated demands.”

This phrase (“I don’t understand”) is used by Ian so frequently that I’m genuinely concerned. He’s ostensibly a bright man. The usual objections and positions by other parties in the HTML5 dialogue are incredibly well documented at this point, in staggering detail. To claim the inability to understand exhibits one of two traits: Either Ian is a simpleton, or he is deliberately “misunderstanding”.

I don’t think it’s the former. Ian has clearly demonstrated his phenomenal intelligence. Yet, the latter option is part of Ian’s well documented deny, delay, too late methodology for handling people. Engaging in this sort of behavior is disrespectful of his community of peers, and more than discouraging when its coming from our empowered Leviathan.

We must accept this, though. Because it’s the results that matter, right? If we get a HTML5 spec, any HTML5 spec, we should be happy about it. Despite all the assurances to the contrary, I can’t really believe that it’s acceptable to consider a product’s method of construction to be independent from its quality. If so, I should be paying far less for my garments, right?

There’s a thought process here that is so far removed from the 21st century as to be terrifying.

In today’s comic, Jeremy Keith reveals the Leviathan to the Squirrel. Things go badly. But remember, it’s only the Leviathan’s fault, because we’ve absolved ourselves of both power and responsibility.

Right?

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.