Compare that to a container that has a width of 1000px. 1000 is a nice, easy, round number. Dividing by 1000 results in clean percentages and better still, dividing by 1000 is something we can do in our heads: just remove the zero. A 140px column inside a 1000px container is 14%. A 500px column in a 1000px container is 50%. 320px is 32%. Easy!

Check it out.

However, I am following along via Twitter, and saw this announcement by Jeffrey Zeldman, web design godfather and co-founder of An Event Apart:

.@simplebits just unveiled Pears pea.rs, an open source web design pattern library/WP theme. #aea

Pea.rs looks like a convenient little tool for web designers to bookmark, a library of sorts where commonly needed HTML/CSS patterns for common page elements like navigation, lists and such can be quickly grabbed and used. I’m sure you’re all so amazing that you don’t need it for your markup, but I also think for prototyping some page elements this might be a good resource to go-to to quickly grab and paste. You might also find a few new ideas on how to arrange your markup or CSS, too.

Check it out.

There was also a Moby Dick quote about a cannibal floating in the sidebar that had gone past its expiration date.

So I had two choices: Turn the site into something for the cannibal whaler community, or open a text editor and get cracking at some new CSS and markup.

About fifteen minutes after sketching some prototypes for blubberandlongpig.com I decided I’d made the wrong choice and went for the redesign option.

I had three basic goals:

1. Reduce the site’s clutter, making it as minimal of a design as I could feasibly manage while preparing for future site features.

2. Make it feel a little more grown-up than the last version. Which is admittedly a funny thing to want from a website featuring a comic squirrel.

3. Make it easy and pleasant to read.

In the end, I’d like to think I’ve managed to capture that. At Mindfly my position involves more coding than pixel-pushing, with the designs I’m working on coming from very talented designer co-workers (my design philosophy seems to be “use the color green” which has its limits). As such, I don’t usually “design” often. In the end, if you were to ask me why I made any choice here, I’d say “Because it looked nice to me.”

There’s still some work that needs to be done. The about page hasn’t been restyled entirely yet (and its content is bound to see some major changes) and comments are a work in progress. I’m planning to replace the old captcha with something less invasive like a honeypot.

Still, I’m rather proud of it. It’s not a responsive or flexible design, but it loads decently in the iPhone and seems to fit well for most monitors. I’m planning on doing some testing to see if I need to add some better support for other small screens and devices (in which case media queries would definitely come in handy.)

I hope you like it.

If any Herman Melville enthusiasts think I missed the boat by passing on that Queequeg fan site, feel free to let me know. For the rest of you, I’d love it if you share any opinions you may have about the new look.

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.

“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?

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.

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?

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 immediately liked it.

(I also liked the fact that he read a quote from my Cuddling With Cufon post. It made me all warm and sappy.)

I liked the title so much, with its jackalope-like nature, that I tweeted about it. Immediately Jin Yang fired back with the fact that Jason was wrong, and the proper term was devsigner.

As a skills-hybrid (granted, very developer-heavy and designer-light in my case) I like the idea of fun terms to help describe those of us that simultaneously try to comprehend typography use as well as learning the newest AJAX trick. So the question that remains is what term is best? Designeloper or devsigner?

Obviously the only way to know for sure is to put the terms in a cage match on a deserted isle where they’ll determine the fate of two dimensions in a tournament to the death. But since we don’t have that option, I’ve made a poll. Please consider taking the time to answer on it.

(Poll after the jump.)

[polldaddy poll=1639857]

(My apologies if the poll looks funny. I’ve never used this particular tool before.)

1. RDFa – Yes, the syntax is complicated at first. But the next phase of the web is symantic, and microformats, though convenient, are only a stopgap issue, and RDFa will be a powerful way to express relationships for computers.

What really irks me is that HTML5 won’t support RDFa because Ian Hickson opposes them, and he functions as the sole gatekeeper to the standard. This annoys me on a number of levels: why is a web standard that will effect billions of future sites being controlled ulimately by one person; and why would someone seriously think the leading semantics format we have not be needed for a web that is clearly and rapidly heading towards a Semantic Web?

I’ll rant more on that in the future.

2. Accessibility – there’s a lot of things that I’ve been doing right for accessibility, but Derek Featherstone pointed out a lot of potential pitfalls with AJAX that I need to start payingca lot of attention to.

Ok, the writing on my phone is driving mad, so I’m going to sign off now. More later!