Likewise, Gruber points to this promo image for Microsoft’s new Zune HD:

Notice anything?

Guys, I have a secret for you: you control both the software and the hardware. It kills me that someone would take the time to take lovingly-staged product photos or actually lay out ads with this on the screen. If the designers who put together the billboard had written, “Now Available: BlackBerry Stor…” they’d be fired on the spot. Is there any excuse for this?

I’m the designer of today’s MIT homepage image (http://www.mit.edu). This is super exciting for me, as I’ve been a fan of the MIT homepage for quite some time, and to get to do a homepage design myself frankly makes me a little giddy.

The design promotes our new site for the Transportation @ MIT program, which is built on the same design foundation as the MIT Engineering site with some tweaks.

Once today (Wednesday 3/4) is over with, I’ll post a screenshot for posterity.  I’m also planning to interview Rebecca Macri, the MIT homepage team leader, about what I’m sure is a fascinating and crazy job.  More on that later.

Update:  Here’s the screenshot (click to view full size).

The birds on the right edge belong to this photo from Flickr user freshelectrons.  (MIT didn’t include the credit because the birds aren’t visible on smaller monitors, and they didn’t want to get a million “what birds??” emails.)

One sad note during the weekend was the passing of Paul Newman; he died on September 26th, the day before our ceremony.  Although Oz Farm is off the grid and there’s no cell phone reception, the news spread slowly across the farm on Saturday.

Paul Newman was a great, admirable man in all sorts of ways, from his commitment to social justice to his lifelong and devoted marriage.  But he’s on White Whale’s radar because he was an alumni, frequent donor, and great friend to Kenyon College, whose site we redesigned earlier this year.  I was fortunate enough to be asked to design a homepage graphic to serve as a tribute, and it’s now live on the Kenyon homepage, along with a moving tribute page and a photo-by-photo description of the homepage graphic.   To create it, I paged through countless photos, which really gave me a sense of how long and how deeply Paul Newman has been a part of the American consciousness.  (The folks at Kenyon did the important work of securing all photo permissions, which I know was no picnic, given that since Paul’s passing copyrighted images have spread across the web without proper attribution.)

So I surprised myself this morning when I came across the Oregon State Fair’s Web site and was so impressed with its design, functionality, IA, and writing that I actually wrote a glowing, completely unsolicited email to their marketing director. (By the way, I found her email quite easily.)

I know the team that developed this site left no rock unturned. I can tell immediately. There are no weak links: They spent just as much time making sure the writing was spot-on as they did refining the design.

It’s a complete package:

• The design – great, catchy, beautiful, perfect for a state fair
• The IA – clear, easy to navigate, with a touch of unique flair (Big Tomato) that does the double duty of reinforcing brand
• The writing – smart, clever, knowing, funny, succinct
• The functionality – I love My Can’t-Miss List (such a great use of shopping cart technology) and that the big Purchase Tickets graphic on the top of every page

Even when our involvement on a client project is limited to design or strategy, we always emphasize the equal importance of these four elements. But of the four, writing is often overlooked until well into the project. As a result energy and resources are in short supply when the time comes to focus on content. I look forward to the day when all the RFPs we receive include a section on writing; when Web committees allocate a line item in the budget to content development before the project even starts.

I don’t mean to overemphasize writing, but as the lead IA strategist and content developer at White Whale, it’s something I fret about all the time. I let the other guys worry about functionality and design. In the end, sites succeed when it all comes together.

I haven’t been to a state fair since I was in high school but I’m going to this one. Amazing what a great Web site can do.

I wrote a blog post the day the Kenyon College site launched, and had intended to do something more splashy. I still might. We at White Whale are all very, very happy with how the Kenyon site came out, and are very proud of Kenyon’s able Public Affairs staff, who did a great job of implementing our CSS/XHTML designs into a sometimes unforgiving CMS; we’ve been there to help, but most of the finishing work was done on their end. So— Shawn, Patty, Rebecca: congratulations again.

But I’m really writing to talk about something specific that is happening to the design, which in my view is the most exciting thing about it.

At the beginning of this job, we brought the whole company to Kenyon’s campus for three days of meetings to talk about every imaginable aspect of the job. In those early meetings, whenever the conversation turned to including student-generated content on the home page, everyone expressed hesitation about whether Kenyon’s close-knit culture was ready for that kind of open channel. We pretty much assumed that Kenyon’s home page content (text and images both) would be under pretty tight editorial control for the foreseeable future.

When we finalized the site design, we suggested that the photo wall that dominates the home page might allow for the opportunity for student submissions. Although nobody was really sure if people would use it, the decision was made to include a “Submit Photos” link on the captions for the larger photos that result from clicking on the thumbnails. And they decided to give away a gift certificate to the cafe for any submissions they accepted.

And lo and behold, it’s starting to happen! If you click on the very middle photo in the wall (of two graduates); or the sixth photo in the top row, or the last photo in the second row, you’ll see photos submitted by students. This is just the beginning of what will eventually be something really interactive and exciting (and we’re building Kenyon a special page, as a farewell gift, to contain it all).

Now, make no mistake about it, I’ve been a type-nerd for some time now (just ask Jason, as I regularly harass him about his use of emdashes). Up until last semester though, I’d only been reveling in the work of others and the rules they discovered along the way. Our typography course began with our instructor drilling us—seriously drilling us, pop-quiz style—on instances of good and bad typography/typographic rules. Whether it had to do with inappropriate leading or kerning, or using a forward-slash (a virgule: /) in the place of a true fraction bar (a solidus: ⁄ [you can type this on Mac by simultaneously pressing Option-Shift-1, but not on Windows {of course} without the glyph palette]), we had these rules pounded into our heads throughout every class.

While this was all interesting—and certainly entertaining considering the instructor’s vehemence for inappropriate/bad typography—about half way through the semester, we finally got to the really good stuff: learning FontLab Studio in order to build our own fonts. As with nearly any design, this process began with sketching a few ideas for typefaces (typefaces are essentially the way that the letters look, whereas fonts are comprised of code that tells a computer/printer/etc. how to render these letters).

From there, our instructor chose which typeface we were to pursue, thereafter asking us to create three and a half inch tall refined drawings of all letters A–L—then M–Z, and finally a–z & 0–9 during the consecutive weeks. These were all drawn on drafting graph paper, and had to be perfect, no smudges, no erasings, etc.

With only three weeks left in the semester, we had to learn FontLab well enough to translate these drawings into beautiful fonts, complete with metrics and kerning pairs. This turned out to be an amazing amount of work, but I found myself falling into this sort of font-zen as I built my font, transcended time and space to the point that the sun was rising before I realized I missed bedtime.

After making my way through the hellish 30 pages of filling out font information prior to rendering my font, there was something beautiful and almost… numinous about seeing something that I designed and created reveal itself on the screen every time I touched a key. In the end, everything turned out beautifully and Inflectia was born of immaculate conception; a beautiful nouveau-inspired sans-serif featuring the elegant thick-to-thin stroke and old-style figures of many serif fonts (dude, how many sans-serif fonts have old-style figures?), one of many Graves Foundry™ fonts to come.

download Inflectia.

As of June 2008, this notion is so deeply buried in the conventional wisdom about Web page design that just about nobody ever thinks about it anymore; the idea of using a table for anything other than Tabular Data is met with scorn and derision from developers.  And so the lowly <table> tag sits alone in the lunchroom, friendless, with nobody to talk to except its perpetual hangers-on <td> and <tr>.

Now of course, we don’t use tables for layout at White Whale.  Ever.  How could we?  It’d be like driving an SUV, listening to a Zune, or voting Republican— it’s something cool people just don’t do.  We (as a company) couldn’t design a site with layout tables and look at ourselves in the morning.

But I don’t like conventional wisdom, and as a result I often find myself thinking about tables— in particular, how there are some things you can do with <table> that you can’t do with <div>, no matter how hard you try.  (At least across all browsers, and without using Javascript.)  

What makes it worse is that these are some REALLY, REALLY SIMPLE THINGS.  Like attaching a footer to the bottom of the viewport, or the bottom of the content area, whichever is appropriate.  Like displaying two columns of content, and having the width of the two columns be determined by whatever makes sense for the amount of content they contain.  Like setting a content area at, say, 10% width, unless your content contains a word like “supercalifragilisticexpialidocious,” in which case the content area won’t get any narrower. 

Now, I know not many people read this blog, but if this were a serious CSS design blog (which we modestly hope it someday may be), I’m sure we’d get commenters tossing out <div>-based solutions for all these cases.  I am pretty good at CSS, but I’m certainly not a black belt, and it wouldn’t surprise me at all if there are some decent solutions out there.  But here’s the thing—all this stuff is built into <table>.  And all browsers get it.  Automatically.

<table> is a relic from a simpler time, when there was a general idea that common sense ought to govern how browsers render Web pages.  <div> is a creature of the present— all it knows is rules.  It knows nothing of “common sense.”  As a result, much of CSS design— even the high end stuff— becomes an attempt to duplicate in CSS behavior that comes naturally to a <table>.

Here’s a quick site I did last summer for a kickball league we started in Oakland.  If you resize it a bit, making the page really small, really big, etc., you’ll see how there’s a 250px wide side column, a title at the top that changes color as it crosses the color line, and background images pegged to page bottom.  I must have spent four hours getting that to work in CSS, without success; once I decided to use a table, I coded it in five minutes.  

But of course, that’s a personal site; we could never have done that for a client site. Now, those of you who know us know that Donald is the most standards-obsessed Whale; he handles all our initial CSS buildouts once designs are approved.  We often have conversations like this:

Jason:  Why isn’t the buildout done yet?

Donald:  Grrr!  I’m having a hard time getting (insert awesome design feature here) to work in IE6.

Jason:  Well, you know, you could use a table for that.

Donald:  No I can’t.

Jason (knowing D hates when I ask this):  Why?

Donald:  Because tables aren’t accessible.

Jason:  Are you suggesting that an audio browser isn’t able to interpret a one-row table?  Do you suppose, then, that this page, which uses a table for layout, is inaccessible?

Donald:  It’s just not best practices.

Jason:  Well, if it can be rendered by a screen reader, and it works across all modern browsers, and actually involves less code than a CSS solution, how is that not best practices?

Donald:  People will laugh at us.

Jason:  OK, fine.  But if we don’t get it solved by tomorrow afternoon, I’ll use tables and code it myself.

And then Donald stays up all night and figures it out.

The fact is, I’m fine with <div>; I just wish sometimes it had some common sense.   And just like a former cigarette smoker might occasionally step out behind the house and indulge in the guilty pleasure of an old bad habit, I reserve the right to use tables occasionally in my own work.

We work with a very small number of clients at any given time, and as a result we don’t get to enjoy the experience of a site launch very often; it sounds ridiculous, but our last site launch of major consequence was the Haverford site, which launched almost nine months ago.  We’ve certainly been hella busy since then, but this is our first flower to bloom in 2008.

I’ll have more to write about this later, most likely in an article for the main WW site.  I don’t think anyone reads this blog yet besides the other White Whalers, but just in case, to mark the occasion: here’s the first collection of Kenyon design ideas that we posted for internal discussion, on October 23, 2007.

My sincere thanks to everyone at Kenyon, everyone at WW, and everyone else reading this blog (which basically means you, Mom).

• Even when it is a perfectly acceptable size and is not screaming “THIS IS THE NAME OF MY COMPANY!!!”, they ask “Can you make my logo BIGGER?”
• After painstakingly designing the whitespace of their design in the interest of facilitating a bit of visual respiration, the client notes that there “should be more content because the page feels empty in spots”.
• And then we have the infamous “The headlines need to be brighter and much larger”

In my Saturday morning internet perusing (it is at times sadly amusing that this is what has taken the place of cartoons in my adult life), I stumbled upon this; apparently our brethren have taken to satire as a vehicle for alleviating their work-related frustrations. While its easy to laugh about now, I am truly thankful that White Whale has largely pulled me from disputes over these issues; out of the several WW clients that I’ve been involved with, I don’t remember any of these issues being major points of dissent; here’s to having higher ed. clients!

Editor’s note: Yes, Douglas, but that’s because we usually make the logo really big anyway.

As you can see from all the cellphone pictures I took in 2005, the limitations were originally technological; my cell’s camera just took crappy photos.  But if you look at all the cellphone pictures I took in 2006, you can see that the quality’s actually pretty decent.  I’m not doing much creative with the camera, though; just taking snapshots.  (Of course, some of the snapshots came out OK.  And in case anybody’s wondering:  (1) that is NOT real blood; I used to be the captain of a kickball team called Trauma Center.  (2)  Yes, that’s White Whale’s VP running a marathon.  (3) Like the rest of the world, pretty much all I took pictures of were dogs, babies, and my friends.)

Lately, though, I’m finding that I use my new phone in a more active way: to snap quick shots of things that seem like they might be relevant to Web designs I’m working on.  At last January’s SEED conference, I listened to Carlos Segura talk in an incredibly inspiring way about finding design inspiration from the everyday world; he apparently carries his camera everywhere, and he showed some really hilarious and amazing photographs.

I’m not the sort of person who carries a camera everywhere I go (unlike Donald); but I do have this cell phone, and lately I’ve been learning to whip it out when nature inspiration calls. We’re currently working on a design for the Lewis & Clark Web site.  LC’s natural environment is so unbelievably stunning that we’ve got to convey it on their site, ideally in a beautiful, non-cliched way.  (We’re not there yet as of today, June 1— but by the time you read this, we’ll probably have it figured out.)  Walking the dog the other day, I just began to notice how much natural beauty I was surrounded by even on my residential Oakland streets. The cell phone came in handy:

I doubt any of that will make it into the site design, but at a time when I felt like I needed to gather some inspiration from natural forms, my little VX8350 came in handy.

He is also a fantastic doctor, and broke the news of my deviated septum in a very caring manner.

It had been a successful launch—the community was happy, the committee was happy, even the board of trustees was happy.  And throughout the inevitable cycles of revisions and adjustments, the design had kept its integrity.  So the designer was happy too.

As they walked, they talked leisurely about the process, and how they’d come to know each other well, and how in some ways the designer felt like he’d attended the client’s school himself.  In fact, although the director of communications would never know this, under his dress shirt the designer wore a T-shirt bearing the name of the school whose campus he now walked across.

“Working with you has surprised me,” said the director of communications.  ”I never thought a Web redesign could be an enjoyable process—every other director of communications I know has said it’s torture—but lo and behold, we made it, and it wasn’t that bad!  Sure it had its rough spots, like anything else, but on the whole, I have to say, I really had a good time.”

“I did too,” said the designer.  ”This isn’t always an easy job, and of course there were times that we got frustrated, but you really did a great job of managing everyone’s expectations, including mine.  Thanks for sticking to your guns on some of those hard decisions—the site will do a better job for your school because of it.”

They walked a little longer in silence.  Then the director of communications spoke again.

“There’s only one thing that continues to bother me.

“You and your team have been so responsive and attentive to us through this entire process, and I’m thankful for that.  But in reviewing the history of our project, examining the path that we’ve walked together, I have noticed that during some phases of the project, there was only a single set of footprints.  And what’s worse, these were the most difficult parts of the project— when the first round of comments on the redesign blog were really negative, or when the president wasn’t sure she liked the green, or when IT said they weren’t going to support PHP.

“As much as I like you and your company, I can’t believe that you would leave us to walk alone during such hard times.  Why did you choose the worst parts of the project to desert us?”

The designer thought hard about this, and then smiled.

“My friend, I can understand why you would think that you’d been deserted.  It is a terrible feeling to think that someone you depend on has forsaken you.  But we would never do that.  In fact, during those difficult times, White Whale was carrying you.”

The director of communications stopped walking—directly between the chapel and the dining hall, and in the shadow of a large statue of the school’s founder—and considered this.

“That is extraordinary,” said the director of communications.  ”It’s above and beyond anything I would have asked for or expected.  Did we pay extra for this level of service?”

The designer looked the director of communications deeply in the eyes, and smiled.

“Yes.”

Really? There isn’t even enough imagination left to make up a story to entertain a half-asleep five year old? At what point did we stop pretending that sticks were really swords made in the explicit interest of vanquishing evil? That the grass was lava and if your balance slipped from the edge of the sidewalk you’d be burned alive? That fist-sized rocks were merely feasts in disguise?  Sure, they are childish activities, but when we stopped inventing explanations for why the stars shine, or what the tooth fairy does with all of those teeth and why she/he is willing to leave something valuable in return for them (they of course grind each tooth up with a mortar and pestle, thus rendering it fairy dust, duh), the world through our eyes lost some of its magic.  Instead, our fantastical wonderings were replaced with worries; the plaguing questions that we never utter aloud but rain on our thoughts throughout the day, questions about whether our hair looks good today, or if we are wearing the right clothes, what’s going to happen in the television show ____, or if we are cool enough, or interesting enough, or rich enough, etc. Not only was the magic ripped from our gums, but the subsequent worries only compounded with each passing year; what college am i going to go to? who is going to hire me? how am i going to pay this car payment? does my spouse still love me, etc?

There is an inherent irony in this: when I was little, I wanted nothing more than to be a grown-up; I couldn’t grow up fast enough.  I couldn’t wait to be able to see over the counters, to put my feet on the ground when sitting on the couch, to have a girlfriend, to drive, etc.  These sorts of excitements enthralled me at their very thought on nearly a daily basis for years and years, but now I find myself craving the wonder and excitement—and most importantly the imagination—from childhood. Now, don’t get me wrong, I very much enjoy the freedoms that adulthood has granted me, but what if we could integrate the best of both worlds? Would it be weird to see an adult swashbuckling the air with a stick? Tightrope walking the curb? Hell yes, people would think that you’ve lost your marbles (which was never much of a deterrent for me, but I’m not your average bear either).

So these poor, imaginationless parents, frantic with worry about inventing a few characters to verbally dramatize; I just felt so sorry for them, that in chasing prescribed dreams they’ve simply forgotten—or become too tired—to just think differently for like twenty minutes a day, that their source of inspiration comes solely from reality, or even worse: their nightly programming sessions. Let’s just pick up a brush and some cheap watercolors; let’s create some totally crazy arbitrary story; who cares if no one ever told you how to paint or invent stories, you’ll figure it out along the way, and best of all you’ll figure it out in your own way(s), and guess what? You can’t be wrong! When can you ever say that in adulthood? It’s just a matter of starting to think imaginatively again, and no ‘your sister didn’t get all of the artistic genes in the family’, everyone is totally creative, or at least has the aptitude—you just have to tap back into the creative pathways and let them branch back out; to stop stifling creative thought before it even has a chance to bloom for the sake of facts that you’ve been forced to memorize.  Its like saying you can’t run thirteen miles: of course you can, but probably not easily unless you’ve worked up to that point by running a little here and there.  I mean, in all likelihood none of these aforementioned parents are going to bust out some J.K. Rowling in their first try, but think about how their general approach to life could change if they simply instituted a twenty minute creative sparking session every day…

This message brought to you by my May Day inner-spirit.

The newest fork in that path has wound to my latest creation: The Veganomicon.  Sounds pretty damn cool already, doesn’t it?  So this new site will be a valuable restaurant resource for vegans and vegetarians alike, and will be similar to what yelp does, but take it a few steps further; those steps being all vegan listings, user profiles that will feature recipes, and a few other magician’s tricks that will remain unuttered prior to launch.  The domain (www.theveganomicon.com) has been secured, and the site should launch by June 1st.  Nothing like bending the rules for the powers of evil (yep, vegans are the devil, myself included, and the whole world is going to hell with The Veganomicon as its chauffeur; want a ride?).