Anyway, in the process of checking the weather at Middlebury I visited the Weather Underground site— I understand it’s one of the leading sites out there, for this sort of thing, right? — and was confronted with the following site design, whose ghastly, horrifying awfulness may haunt my dreams tonight:

This should serve as a reminder to you UI folks: Keep fighting the good fight, but remember: people are willing to swim through some pretty scary and shark-infested user interfaces to find a bit of information.

I was a late adopter compared to most people— it’s only in the last month or so that I’ve been taking an active interest in it.  (The day I started to get into using it, they mentioned it on the Daily Show.)  Now I use it to communicate with clients, friends, or students at the schools we’re working with; to shoot the breeze with my co-workers, some of whom work in distant cities; and sometimes simply to spout off about whatever, just like everyone else.  I used to Twitter a lot about Twitter.

Mostly I think of Twitter as a way to reinforce White Whale’s fundamental message: that five people can run and grow a moderately successful business, and in the process change nothing about the way we express ourselves: in a nutshell, that the people we are online are the same people we are in person. (I think the same goes for my four co-workers Tonya, Alex, Donald and Janie.)  We don’t practice much message control because we don’t really have much to hide. (Whatever I do have to say that’s worth hiding, I express on symmetrical networks only.)

Although the 140-character short form initially seemed too restrictive, I’m now finding it a great source of inspiration.  Here is what I think is perhaps the most perfect tweet ever written, by my old friend @johnpavelkehlen:

I don’t know about you, and maybe it’s just because I miss my old friend’s company, but I can imagine myself dining with John and his friend in his little garret pretty easily reading that, and he didn’t need a single extra character to express it.  As John himself reminded me, brevity is the soul of wit, and never has that felt more technologically true.

Having said all that, I worry a little about the effect Twitter is having on me.

For one thing, I’m on much more than usual these days.  I move through the world with an active and engaged brain. I see things as I’m walking to work (today it was an odd misspelling on a sign) and think, should I Twitter this? (I’m convinced that the verb is “to Twitter,” not “to tweet.”)  A thought occurs to me.  It feels sorta profound. Is it profound enough to become a tweet?  And if so, will it affect my follow cost?

I like to think that when I’m working at my best, I have a fairly sharp eye for detail and nuance; thanks to Twitter, I carry this eye around with me much more than I used to, and these details and nuances hang around.  I’m worried LOST is going over the top with this “judging Ben” thing.  I enjoy Bonterra’s organic Zinfandel. I really love my bank.  Which of these things should I broadcast?  (answer) In a nutshell, I never thought I’d spend so much time qualitatively evaluating my own thoughts.

So after a day spent out in the world this way, I sit down to dinner with my wife.  Am I going to Twitter about how great dinner was?  Or what a wonderful evening I’m having?

Of course not.  Because that’s my time, not yours. But the temptation is very strong!  And I don’t always resist it.

I am learning to control the impulse to chronicle my leisure time; this is largely because White Whale is my company, Twitter is partially a work thing, and if I let work bleed into every corner of my life it would destroy me.  But I can tell that it’s changing people, and I’m not sure it’s always for the better.

I see people, friends of mine, twittering about how they just woke up, or they’re happy, or it’s a beautiful day.  Is the chronicling of that experience (and the cognitive and physical processes required to make it happen) interfering with the plain appreciation of the fact?  I can’t see how it doesn’t.  Here’s a guy who Twitters a hundred times per day. (Don’t ask about his follow cost.)  People like that used to be considered wackos or oddballs (like 2004 presidential candidate Bob Graham, a compulsive diarist)— now they’re just high-tech, plugged-in people.

But does anyone worry about the long term effects of this way of relating to the world?  It seems like the opposite of ADD— Attention Surplus Disorder.  I wonder if the most active Twitterers among us ever will ever enjoy the pleasure of a blank mind, an hour spent staring into space, etc. What we now think of as “vegging out” is what they used to call “relaxation.”  Actions that now might be considered downright yogic— like simply not speaking for a couple of hours— used to be the norm, I’m sure, at a less frantic time in human history.

For now, it’s fun.  I like keeping tabs on what my friends are eating, reading, listening to, or coding.  It’s an enjoyably odd feeling to know what very casual business acquaintances think about certain TV shows.

But in the long term, will the people who engage most deeply with technology lose the ability to exist quietly in the world it’s brought us?

Note: 140 characters exactly in that last paragraph. Bam!

This is it!  This is the blog post where I’m supposed to introduce myself as the newest member of White Whale.  But who reads this blog the most? Or at least in the finest detail? – probably my coworkers.

So: Donald, Alex, Tonya, Jason–how truly serendipitous.  If the four of you ran a bookstore, or a bakery, or played in a metal band, I’d likely want to join you.  Luckily for us all, I’m a higher-ed Web designer, and you are a purveyor of higher-ed Web sites.  That part worked out perfectly, and I’m proud, so proud, to join you.

But wait!  To those readers who aren’t Donald, Alex, Tonya, and Jason: I’ve been listening longer than you know!  I’ll have some catching up to do with @grether.  I’d like to schedule a garden tour with @davidmsilver.  Southwestern, I grew up on your 9-hole course!  Let’s talk about it.

And finally, what to the bystander, the late-night link-follower, or the potential client?  Well, introduce yourself.  This certainly feels exciting, doesn’t it?

Great!  Let’s get to work.

One of the parts of the job that’s been really fulfilling for us is following the work being done in David Silver’s Digital Media Production class— it’s great to see all the exciting stuff they’re doing with Flickr, Google Maps, Twitter, blogs, and the intersections among all those media.

Something I’ve been working on for a while— ever since hearing about the class’s Google Maps assignment— is a map that would incorporate all the individual students’ Google Maps of San Francisco.  If done right, this will result in a USF-driven map of the city, with students’ words and pictures populating a dynamic map that would give prospects a true students’ eye view of what’s happening.

So today I have a proof of concept!  I’m using a Web app called MapChannels to integrate Google Map feeds; it’s a little unsatisfying to rely on a third party for this, as I’m sure it’s something Donald could code in a few hours, but he’s doing more important stuff, so it’s MapChannels for now.

I’ve used Twitter to locate the students’ maps, and one by one I’m adding them to this master map.  This definitely feels like a beta, but it’s still pretty cool:

San Francisco, mapped by USF students

At the far end of this spectrum is the new Skittles.com. For a brief time last week, the Skittles homepage was nothing but a little Skittles navigation widget with a twitter search for “Skittles” in the background. Everything any twitter user had to say about Skittles was up there in real-time. Now, the homepage jumps between Wikipedia’s Skittles entry, the YouTube Skittles Channel, and the Skittles Facebook page. “Pics” links to a Flickr search for “skittles”, and the Twitter search is still under “chatter”.

Now, we know you’re not selling candy. And unlike Skittles you probably don’t have the benefit of total brand recognition. But there’s an important lesson there.

Your audience can spot “marketing” miles away. And they tune it out. Your message is still important and we’ll help you get that across in the right way (it’s classic “show, don’t tell”)–but you’re going to need to sprinkle some student voices around. First-person is in. Total control is out. Authenticity is the new black.

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.)

Of course the writing we do in this blog is important to us from a marketing perspective— it’s the only “marketing” of the company that we currently do.  If you’re reading this, and if you are neither a WW employee or my mom, then you’re part of that process.  If you work for a university, we like to think maybe someday you’ll consider hiring us for one of your Web projects.  If you’re already a client, then we hope reading our blog will help you get to know us better, and increase your engagement to our collaboration.

But that’s not why we write on the blog.  We write on the blog because we’re geeks, and because we have lots of ideas that we bat back and forth around the office, and once in a while one of them gets batted out to the public.

What this means for us is that writing on the blog is a kind of balancing act.  We really do not want our blog to come off as a “corporate blog”— if it were, nobody would read it.  Nobody expects the Chrysler blog to criticize the auto industry bailout; it’s a corporate blog, of course it’s going to reinforce the party line.  We don’t want to create a steady stream of posts about how wonderful we are.  At the same time, this isn’t the sort of blog where we’re going to spout off about every tech-related thought that crosses our minds.  I think that putting the tabs above the address bar in Safari 4 is a fantastic idea, a long-overdue UI improvement, and a Google Chrome ripoff, but I don’t need to clog the airwaves with that observation.  Instead, all of us at White Whale share the tendency to make our posts simply epic— filled with bons mots, interesting insights, nice turns of phrase, and a neat conclusion that illuminates something we’ve done worth sharing.  (Of course, this post is no exception.)

These two poles— “OMG safari 4 is a total Chrome ripoff” and “Here’s a story about the way White Whale does things…” characterize the well-known microblogging and what you might call macroblogging.  (People use that term already, of course, but without much focus.)  Of course the top tool for microblogging is Twitter (where you better believe they’ve got something to say about that tab bar), but Facebook status updates are obviously a kind of microblogging, as are IM status messages.

Our new client relationships are leading us deeper into this world.  For example, we’ve just met David Silver, a USF media studies professor with a well-trafficked blog and a busy Twitter account, and we’re hopeful his students will eventually collaborate with us to some degree on the design and content of USF’s new site.   Through David we have learned about “thick” and “thin” tweets: simply put, some tweets convey only one bit of information (”I enjoyed LOST last night”) where others convey multiple layers of information (”here’s a link to some photos from our trip to Uruguay, and let us know if you like them”).  Our clients at Lewis & Clark twitter too, as does Southwestern’s News Office, as of a week or two ago.

Now, because we don’t have dedicated marketing staff— and never will— we can only develop the content that we have time to create.  So if blogging is the main way we reach people, how should we do it— over Twitter?  In blog posts like this one?  Or shorter, chattier posts, Daring Fireball-style?

The fact is, we don’t know.  When the muse strikes, there’s no time to decide whether our thoughts are best expressed as thick tweets or thin tweets or chatty posts or lengthy, digressive posts like this one.  But what we do know, I guess, is that if anything unites the people who make up this company, it’s a commitment to the art and discipline of the written word. So in the end I suppose we’ll always wind up erring on the side of verbosity, even if it means we post on the blog less.

And in the meantime, my Facebook status is constantly out of date, but I guess that’s the way it goes.

And by the way, we do all have Twitter accounts, if you’d like to follow me, Donald, Alex or Tonya.

(Update: Corrected a typo in Donald’s Twitter page.  If you wondered why a White Whale employee was so bizarrely concerned with whether Guitar Hero is better than Rock Band: that was detto, not dtetto, which is Donald’s actual Twitter handle.)

It’s really the perfect commercial, and its biggest strengths are the very reason it’s on YouTube and not during the commercial break of Lost. The strongest statements are those that relate only tangentially to Trader Joe’s corporate goals and messaging–yoga moms, tons of unread signage, cases of water next to the exit–or even negative ones–paper bags that rip, the sold-out bakery sections, repeated gripes about discontinued items.

I don’t often shop at Trader Joe’s. But these are all things that give me a flash of recognition. And the line about the overcrowded parking lot doesn’t make me feel like I should go somewhere else and avoid the hassle–it makes me feel like I’m somehow part of a Trader Joe’s community that has shared this same experience. It creates an emotional connection. And it actually makes me want to shop there more.

The first bit of advice we usually give to our clients is “first-person narratives.” And there’s a slew of reasons that you should have your students and faculty blogging on your website, from the practical (they’ll create content for you!) to the slick (consider your demographics!). But perhaps the biggest reason is that people relate to genuine, warts-and-all messages far more than they do to a catchy slogan that some outside consultants dreamed up.

I can tell you first-hand what messages I respond to as an alum. And–not to be callous–it’s not the emails about providing financial aid or building new facilities that get me. It’s when I’m reminded of what a mixed blessing the meal plan actually was. Or about that required class I spent half the semester hating. Or New England winters. There’s plenty of effective messaging about all the great stuff, too–but without the complete picture, those messages fall flat.

This is not to say that you should write on your website that your dining hall sucks. But you might be surprised at what your community has to say about all those little annoyances. These quirks are an important part of the shared experience that differentiates you from your peer institutions. And presenting that full experience will help your audience–from prospective to alumni and staff–identify with and feel emotionally connected to your school.

I wrote this post in August; it concerns a couple of friends of mine, one who works for iTunes, one who works for Pandora.  Immediately after posting it, I got a frantic text message from my Apple friend, saying something along the lines of “OMG REMOVE THIS POST IMMEDIATELY.  IT CONTAINS CONFIDENTIAL INFORMATION.”  I killed the post, having no real idea why I was doing so.  It definitely seemed a little weird.

Then just a few weeks later, Apple introduced Genius, an enhancement to iTunes that essentially copies Pandora’s approach, sequencing songs based on their inherent characteristics.  That’s when the reason for my friend’s freakout became clear:  Although I hadn’t posted anything about the Genius feature (and in fact didn’t hear anything about it until it came out), my friend obviously thought I had heard something and posted about it.  Apple’s security about new products and features is legendary; if my friend had been tied to the leak of information like that, he’d have lost his job.  (For the record, he never tells me ANYTHING about new iTunes or iPod features, no matter how many cocktails I ply him with.)

So now that Genius has been released, I present the original post, both as a historical artifact, and because I continue to be very pleased with its title.

1.

I have a good friend who works for iTunes. Apparently you don’t say “the iTunes division of Apple,” simply iTunes. It’s a different wing of the company, I guess; he works in a separate building from One Infinite Loop, although apparently it’s closer to the gym, which he says is nice.

Hanging out with my friend, I’ve come to know a little bit about how iTunes’ marketing machine works.  Basically, the primary unit of measure for marketing success is iTunes Music Store user account creation. They believe (and presumably research has shown) that creating an account makes a person much more likely to purchase music eventually, whether or not they purchase anything when first creating the account.

For this reason, the primary iTunes marketing efforts center around giving away free iTunes songs.  If you’ve been to a large music festival of note this year, someone may have handed you a card offering you free iTunes songs from the artists participating in the festival— that’s what I’m talking about.  So you take the card home, open iTunes, go to the Apple Store, enter the 12-or-so-digit code, and your download begins.  But if you haven’t opened an iTMS account yet, well, you have to create one, right?  So you do, and the mission is complete:  the iTunes folks have their conversion.

There’s something about this marketing plan that feels off-kilter to me.  For one thing, it fails to note one important fact of human life in 2008— that if you have an iPod, you use iTunes, and for practical purposes everyone in America has an iPod. At this point in tech history, it’s nowhere near as easy to download free music as it used to be, meaning that 9 times out of 10, if you want to hear “Don’t Stop Believin’”, you’re going to buy it.  Probably from the iTMS.

So conversion is important, but I think you could just as easily proceed from the assumption that iTMS sales growth is tied to iPod sales growth, and that’s not a bad horse to be tied to.

iTunes’ real problem, it seems to me, is that it’s not connected to a Web site.  (The iTunes Music Store isn’t a Web browser, even though it behaves like one in some respects.)  You’d think that the #1 music buying site in the world would somehow protrude into the Internet— that there’d be an itunes.com where you could visit, preview new music, read and post reviews, etc.  Something like Pitchfork meets last.fm, but with everything tied to iTunes.  Reading and previewing music in a social Internet environment, it seems to me, would make it pretty damned easy to spend $.99 for a song— and that, I would argue, is the real conversion point.  Once you get someone in the mindset where they’ll quickly buy a song they like, well, you’ve got ‘em.  Right?

2.

I have another good friend who works for Pandora.   If you don’t know about Pandora, you should— it’s the commercial outgrowth of something called the Music Genome Project: an attempt to categorize all the world’s music in terms of a finite number of variables.  From Wikipedia:

A given song is represented by a vector containing approximately 150 genes. Each gene corresponds to a characteristic of the music, for example, gender of lead vocalist, level of distortion on the electric guitar, type of background vocals, etc. Rock and pop songs have 150 genes, rap songs have 350, and jazz songs have approximately 400. Other genres of music, such as world and classical, have 300-500 genes. The system depends on a sufficient number of genes to render useful results. Each gene is assigned a number between 1 and 5, and fractional values are allowed but are limited to half integers.

What this means to a Pandora user is that Pandora can take information about what you like— an artist, group, or even a single song— and turn it into a streaming, personalized radio station, with songs by bands you’ve never heard of that share qualities with stuff you like.  It is amazing technology in practice— pick your favorite song, hit play, and the fun begins.  As you go, you can rate things up or down, which lets Pandora understand your interests better.  And did I mention that it’s free?

(The friend in question, Kevin Seal, also hosts a tremendously entertaining and educational podcast, The Musicology Show, as part of his Pandora duties.)

Experiencing Pandora for the first time is pretty mindblowing— it’s one of those things that seems too good to be true.  And there’s the rub— it is.  Information might want to be free on the Internet, but there are a million contrary forces to that basic longing— some of them totally baseless and pernicious, some of them perfectly valid.  But in the ongoing battle between the recording industry and the Internet, it’s tough to bet against the old white guys with the deep pockets, and Pandora is, it seems to be, fighting a difficult and losing battle.  Kevin has been pointing me to a Web site, SaveNetRadio.org, devoted to fighting the good fight; it is by no means a lost cause, but it looks like a tough road ahead for Web broadcasters, even for reasonably well-funded and popular services like Pandora.  In an article about Pandora from the Chronicle of Higher Education, Pandora’s founder suggests they may be close to pulling the plug, as fees for Internet broadcasting rise and rise.

3.

When you mouse over a track that’s playing in your Pandora stream, you get some options:

The left and right buttons let you rate the track you’re hearing.  The middle one opens a menu:

As you see, it is technically possible to buy the iTunes track from the Pandora interface.  But it’s easy to see, even for a non-UI expert, that actually *buying* the track seems to be a pretty low priority.  The Pandora-specific functions, like creating a new station, bookmarking, etc. are much more highly prioritized.  And once you do mouse over the Buy… button, you get two options, iTunes and buying the CD on Amazon.  But isn’t Pandora the product of a more highly evolved approach to music where the physical CD is almost completely irrelevant?

4.

Apple should buy, license, or exclusively partner with Pandora. That middle button ought to take you right into iTunes to buy the song.  I couldn’t tell you how many songs I would have purchased on iTunes if that were the case.  If you get into the habit of rating up, rating down, etc, then having that button there just becomes an extra-high rating; man, I like this song so much that I’ll pay the $.99 to play it anytime I want.  Not much of a sacrifice— just about the easiest conversion ever, I’d say.  And given that Pandora is now a free and immensely popular download for the iPhone, well, there you go.

I’m sure Pandora has lawyers writing briefs on this whole thing already, but it seems to me that making the conversion to a sale easier might take some heat off the “giving away free music” charge— the fact is, there’s not a HUGE difference between the one-time-only, unpredictable play of a song you get with Pandora and the 30-second preview of a song you can already get with iTunes.  In fact, a good attorney could probably make a case for considering Pandora not as a “radio broadcaster” but rather as a straight-up social networking/viral marketing tool for the songs themselves.  It has always seemed a weird characterization to think of Pandora as “radio,” even though that’s how they market it.

Now think about how the benefits could flow the other way.  If iTunes were driven by the Music Genome Project, the ways in which iTunes could recommend music for me to listen to would become ten times as interesting.  iTunes itself could incorporate Pandora-like functionality.  Ratings within iTunes could feed, and be fed by, Pandora ratings.  The world would become a better place, and two companies— one with an amazing tool and some great technology, the other with market share and a direct line to 75% of the world’s headphones— could share the love.

PS.

Although this is not a conventional love story, it’s interesting to note that the two friends I’ve mentioned became engaged— to different people— on almost exactly the same day.  Congratulations to both of you!

All of this is to say that when we do take on a project outside the realm of the .edu world, we generally don’t stray too far.  We have recently finished a project for Creative Commons that, even though outside our traditional range, was a great fit for us, and let us try out some of our ideas in a new context.

Creative Commons’ ccLearn project is attempting to do for the world of education what Creative Commons itself does for creative capital in general: to democratize a closed industry by promoting open standards and the sharing of resources, while protecting the rights of creators and authors.  It is a really interesting project, that promises a substantial benefit to society; on top of that, it’s excitingly geeky.

What we were hired by CC to do is help convey ccLearn’s message to a wider public audience.   Currently CC is about as geek-friendly an organization as there is; certainly most anyone who uses technology on a regular basis knows who Creative Commons is and what they do.  But they don’t do too much outreach to the general, non-tech-savvy public; most of the public awareness of CC comes through its integration with sites like Flickr. And even Flickr’s CC info page is fairly technical in tone.

What that means is that in the general public awareness sense, CC works behind the scenes.  And for Creative Commons itself, that’s fine— much of CC’s work has to do with promoting legislation, defining open standards, and so forth, and it doesn’t require a large public profile.

But ccLearn’s mission is different— they plan to be much more directly involved with individuals seeking to produce or consume open educational content.  The fifth-grade teacher who can use open resources to supplement her class materials, or the program director looking for guidance in developing a poetry workshop: these are very concrete public audiences, and their awareness of open education resources will be of great importance to ccLearn’s overall success.

This means that ccLearn needs (to use a crude marketing term) a different brand positioning than Creative Commons in general.  Our job was to help them find that place, and interpret it visually on the Web.

ccLearn currently lives at http://learn.creativecommons.org.  This site serves as the base camp for ccLearn’s internal operations, such as its board members, top contributors, and other stakeholders, and it shares a general look and feel with Creative Commons.  Our first recommendation to CC was to create a separate URL for promoting open educational resources to the public:

opened.creativecommons.org

And with that new URL came a brand:

(The follow-up text is still in flux, as ccLearn decides how best to position Open Ed with regard to CC.)

As part of our messaging strategy, Donald wrote a couple of opening sentences that neatly encapsulate ccLearn’s offering in a way anyone can understand, geek or not:

“Open education brings the ideas behind open source to the world of education. Open ed resources are learning aids, reference materials, and even textbooks that are free to use and free to distribute— whether you’re a teacher, a learner, or a little of both.”

(This kind of friendly, just-the-facts introduction is a particular talent of Donald’s— he wrote opening paragraphs for Southwestern and White Whale’s 2007 site.)

And finally, we created a site design:

… that will allow ccLearn to put a wide variety of engaging content in front of a relatively non-tech-savvy public, while allowing them quick access to basic information about open education and without turning off insiders with “marketing”-ish language.

We handed off the final files, including XHTML/CSS/JS buildouts of the homepage and inside page templates, to CC this week; they’ll be doing the implementation with their wiki-based CMS.  Overall we think it’s a great success, and we’re happy to know they think so too.

To view the buildout version of the site, visit http://opened.babywhale.net.   To view Donald’s buildout handiwork, I suggest you try it without Javascript and/or CSS.  Oh, and click into the search box!

The Overhead Rack 

Worst of all, and most hated by me
as I sit docilely crammed into my seat,
crammed and strapped like a psychotic in restraints,
are these bland-faced complacent graduates
of business school, trained to give each other
and the rest of the poor world the business,
who attempt to stuff their not one but two folding bags
big enough to hold an army of business suits
into the overhead rack, already crammed
with traveling crap like a constipated ox’s
intestine. The blond doors cannot lower,
the hats and hags of earlier arrivals
are crushed. Why don’t the smug smooth bastards check
their preening polyester wardrobes and
proliferating printouts, sheaf on sheaf,
at the ticket counter, or, better yet,
stay home and attend to their neglected wives
and morose, TV-mesmerized offspring
instead of crowding their slick and swollen bags
and egos onto my airplane, my tube in space, my
clean shot home? Like slats of a chicken coop
overrunning with dung are the overhead racks.
If we crash, thus overloaded, the world
will yield up a grateful sigh at the headlines:
one less batch of entrepreneurs to dread.
Oh, kill, kill, kill, I think, watching the filth
strap itself in, exhaling export beer
and nasal exchanges of professional dirt,
these fat corpuscles in the nation’s bloodstream:
oh, would I were a flying macrophage
to eat them all, their bags and all, and excrete
the vaporizing lava into space!

I love to imagine Updike writing this poem on the plane.  

I encounter these guys all the time, and will be sure not to become one.

But that’s not what I’m here to write about today.

Well, in a way, it is what I’m writing about.  Because what we’re talking about here is usability— user interfaces that are easy and enjoyable to interact with are inherently more usable than ones that aren’t.  I might think LiveWhale’s interface is more usable than that of another CMS, but that’s not because that CMS isn’t capable of being used by human beings; on the contrary, top commercial and open source CMSs are used every day by plenty of people without complaint.  I think our interface invites you to use it, which to me is the ideal of usability.  Anyway, as it happens, one of the primary books on Web usability happens to have the worst, most foolish title of any book on Web development anywhere.*

Steve Krug’s Don’t Make Me Think espouses a particular philosophy of Web usability that makes perfect sense. You shouldn’t have to look at a page and sit there thinking about what to click on; the information hierarchy of a page ought to be self-evident. Every day I encounter Web sites that make me think in ways I shouldn’t have to.  Where is the search box?  How do I find directions to your campus?  What’s going on this week?  Often the competing interests at work in a Web design tend to crowd out the simple big picture observations, and the things that ought to be easy get lost.  It’s true, as Krug writes, that people don’t read Web pages, they scan them, and that’s why information hierarchy is so important.  Frankly, I agree with most of what Krug has to say in his book.

But that title!

My company designs Web sites for colleges and universities.  Usually the schools we work for hire us largely in an attempt to improve their sites’ outreach to prospective students; when we’re working on an Admissions site this is an obvious and explicit goal, but it’s almost always a general mission.

We have found, from years of experience, that prospects will become more attached to an institution if they find ways to make contact— let’s call it intellectual contact— with a school.  They fall in love with a book by an alumni author, they meet with a faculty member, they have an interesting conversation on Facebook.  At some point in the process of getting to know a school, something clicks.  A connection is made.

(Obviously some students pick a school on less interesting criteria— its position on the US News list or the likelihood of a Fortune 500 job after graduation.  But we’re not talking about them.)

This process, above all, involves thinking. Constant, engaged, curious, obsessive thinking about a number of schools, the choice of which will have an enormous influence on the kind of person you’ll turn out to be.

In our site designs we try to encourage this, and to create Web environments that repay close attention.  Sometimes this means putting an actual math problem on a math homepage— why not?  And sometimes it means detours, hidden doors, or easter egg-like features that you have to explore a bit to find, such as what happens when you click the motto (”Since 1840,” etc.) on the Southwestern University site, or the mouseovers on the Brown Admission Student Life page.  Building things like this makes our job interesting, it makes our clients (and their stakeholders in the know) feel special.  It’s fun for everyone involved.

But it does make you think. And invariably, at some design meeting or another, someone will ask, “Well, Steve Krug wrote this book, and doesn’t this design violate his main principle of usability?  I mean, that design definitely is making me think.”

I don’t think Steve Krug is opposed to Web designs that invite some intellectual engagement. Especially not for prospective college students, for Pete’s sake.  But the simplistic title of his book waters his argument, which I believe is a good one, down to its lowest common denominator.

I want the Internet of the future to be smarter, more engaging, better organized.  And I want it to make me think.  Otherwise the inevitable availability of Web content on every available surface in our lives will turn us into dull, unfeeling automatons.  (Some people would argue it’s happening already.)  Without an Internet that makes us think from time to time, we’ll end up glued to our chairs, waiting patiently for spoon-fed information from our Internet masters.

And nobody wants that.  Not even Steve Krug.

I also like the idea of “communicate with me”, or “tell me what is going on here”.  This seems like a more personal connection between designer and audience—or product and user—and maybe it’s just me, but I actually really appreciate it when someone teaches me something new.

Enter the idea of communicating in plain English. Wow, I know, what a concept!  If I’ve learned anything in my time at White Whale, it is that clear and effective communication is the key to successful sites and applications—be it through the interface, the content, etcetera (though hopefully all of the above).  Take the first time I used LiveWhale (our fancy new approach to content management) for example.  We had all been fairly busy with client work through a bulk of its development, so outside of a few glances-over-the-shoulder and catching snippets of development conversation here and there, I was basically ignorant of how the thing even worked until it was in beta form.  Rather than walking me through the basics of the app, the LW developers just gave me a login and told me to poke around.  This of course is a form of user testing—albeit on a subject with a more critical eye and ellevated skill level.  Fascinatingly enough, the system was really intuitive, and required no real explanation at all.  This is a product of good interface design and clear communication—every button tells you what it is going to do, every input field is clearly marked, and things are laid out in a logical fashion.  Obviously, I was thinking throughout the entirety of my perusal of the app—as I was learning a new method of doing something—and it was easy to figure out the LW way of content management due to its level of explicit communication.  This follows the principles of “don’t get in my way”, “communicating in plain English”, and “tell me what is going on here”, but never “don’t make me think”.

On the topic of communicating in plain English, I ran across some amazingly easy to understand explanatory videos this past weekend during my usual relaxing passtime of internet perusal.  Stumbling upon these videos is what really sparked this tangent, as I found them so clear and effective that virtually anyone above the age of ten with at least a tiny bit of internet familiarity should be able to understand them without fail—and what is more, rather than being intimidating explanations that answer questions with questions, they are actually really entertaining and straight forward.  No one likes to feel ignorant, or left out because they can’t understand how to operate something that thousands of other people have no problem with.  It would be difficult at this point for someone to step forward and say like, “Hey man, what is this crazy WordPress thing I keep hearing about?”  Or, “What the hell is MySpace, and why is everyone of all shapes and sizes freaking out about it?”  Sure, you can get all of that from Google—or Wikipedia or something—but there is still a certain entry level base of knowledge required for even those explanations, and before you know it, you are left with tons of other questions that need answering—such as “what is a blog?”, or “rss?”  Right, it gets overwhelming when you get your questions answered with more questions, and pretty soon you’ve dropped an hour just trying to figure out what WordPress even does, let alone learning how to set it up and all of that.  Obviously, we are all well ahead of the curve here—and are pretty technically-minded—but I could just imagine my poor mom (an ex-computer programmer mind you, but not so internet savvy) trying to figure all of this out, getting intimidated and frustrated with the whole thing, and eventually resigning to be left in the dark.  Enter Common Craft and their awesome The Common Craft Show video series that even my dear mother could understand (they don’t just focus on web technologies either, there are also videos on how the Presidential Election process works, how to fight off zombies, etc—you know, important stuff).

LiveWhale, our CMS, is essentially a module-based system. Individual modules can be provided to our customers on a per-client basis. Each module is a self-contained element, that “registers” itself in the CMS framework, thereby establishing its functionality throughout. A module is responsible for creating and managing its own data, but if it is flagged as group owned, access to that data is handled by LiveWhale’s users and groups system.

It is, of course, possible for an administrator to manage those users and groups, and should a circumstance arise in which a group should be targeted for deletion, LiveWhale automatically cleans up data associated with that group (whether it is stored in a database or the file system) so that it is not orphaned. (This is in fact the case with any piece of data which “contains” additional hierarchical data.)

The mechanism we have in place for this is simple, but it is also flexible. Each piece of associated data that has to be cleaned up by a parent marked for deletion can optionally be given to a handler deletion function. For example, if a piece of news stores an image in the file system, the handler function is activated to clean that up as well.

Eventually we added a global activity log to our CMS, LiveWhale. Activity is associated with a user and a group, making this data group owned. As it turned out, the group deletion mechanism possessed a flaw. LiveWhale’s internal delete routine initially expected the logic about what a handler function had to do, if anything, to come from the handler function itself. In fact what it needed to do was to first deduce if a handler was optimal for a particular type of data at all. The activity data made this clear, when there was suddenly a need to delete hundreds or thousands of individual pieces of data which were designed to be stored in huge quantity over a long period of time (unlike with news management, for example). Pushing the handler logic up into LiveWhale’s delete routine made it no longer necessary to perform logic a hundred or thousand times when the result was always going to be the same, and a one-off deletion procedure could alternatively be used for the bulk data.

This drives home the point that building something requires either the proper foresight to know how that system has to conform to conditions that haven’t yet come about, or ensuring that the foundation you’ve already built adjusts to appropriately handle new features as you add them. Fortunately, our LiveWhale development process utilizes a variety of monitoring tools and diagnostic tests which inspect the system closely to continually perform a sanity check on the results of code execution over the product’s development lifetime. This was a case where the system noticed the deletion flaw even before I did.

More and more of our clients are moving to the Common Application— in most cases that’s because homegrown applications tend to be unwieldy and hard to manage, and it’s easy to see how tempting it’d be to outsource that whole process— information gathering, account creation, payment collection, reporting, security, etc.— to a third party.  I don’t know if the Common App is a publicly held company, but I wouldn’t say no to a gift of stock options if they were.

However.  Although the Common App is certainly a convenient way to manage the process of college admission, doesn’t it feel like a missed opportunity?

The process of applying to college is an anxious, scary time, as anyone who’s ever done it can attest.  With a very few exceptions, nobody’s going to be accepted everywhere they apply.  So in applying, you know you’ll be rejected somewhere, and the kind of self-revelation required in a good college application adds a fear of exposure to the process.   (At least that’s what it was like for me.)

If that’s the case, it seems that a college or university could do a great deal to alleviate this anxiety— and build a relationship with the prospective student— by presenting her with a thoughtful, friendly, easy to use, customized, streamlined and responsive, online application.

The first step in applying using the Common App looks like this:

Wouldn’t it be better if the first page started like this?

Hi.

It’s great that you’re applying to Middlebury.  Our applicant pool always includes an incredibly diverse group of interesting and thoughtful young people from around the country and around the world.  The students that join Middlebury next fall will become part of a close-knit academic community; we expect a lot from our students, and we give a lot in return.  In other words, we aren’t just looking for the best students, we’re looking for the best neighbors.

We’re looking forward to reading your application. If you have any questions at all about the process, e-mail John Doe, our online application support counselor, at JohnDoe@middlebury.edu.

To get started, enter your first and last name below.

We know from experience that students choose colleges based on direct connections.  Sometimes it’s a friend they made touring campus; sometimes it’s a favorite book by an alumni author; sometimes it’s a discussion on Facebook.  Sometimes university Web sites include tools that encourage connections as well— for example, Haverford will occasionally let a select group of admits or top prospects create student profiles, and we’re working on a project for Lewis & Clark that will let prospective students create customized portal pages just like faculty, staff and current students.

The question is, why can’t that sense of personal contact extend to the application itself? I’ve suggested some of the most typical reasons why colleges go to the Common App— convenience, security, stability, etc.  These are all fine reasons to outsource the application; there are other reasons too.  It is undeniably more convenient for the *applicant* to only enter their information one time and apply to multiple colleges at once.  Web database development projects done in-house are notoriously hard to maintain over time; this is one reason why schools’ own online applications are often a little clunky.  And there aren’t many companies that offer customized application development.

(The reason for this last case are clear.  The perfect online application would be the better mousetrap, and it’s hard to even think about how you’d build a college application without seeing visions of how the world of higher ed would beat a path to your door.)

But it’s my belief that when the right school— unsatisfied with the Common App, wanting to create personal contact with applicants, and without the staff or the time to develop an application in house— meets the right Web development vendor, a few steps might be taken toward an online application that will itself do some of the work of recruiting great applicants.

Consider this blog post a want ad; I think we’re the right company for that job, and if anybody’s interested in talking about it, let me know.  Over the next several days I’ll be posting a few more thoughts on this topic— how an application might reach out and speak directly to students, building connections in the process.  If anyone else has any ideas about what the ideal application might do, please drop me a line.

On the one hand, it’s probably best to let users make mistakes, or format as they wish, and depend on human communication to clear things up— instead of trying to build in a bunch of extra structure designed to cover for mistakes.  It’s our view that the latter approach leads to bloated, overbuilt CMS systems that discourage accountability.  But at the same time, consistency and coherence of communication across a Web site is a really, really important thing— it is what distinguishes sites that serve as good vehicles for an institution’s messaging from sites that are just decorated Web pages.

We’re thinking about this right now because we are considering automatically converting the titles of news items in LiveWhale to Title Case.  The following three news headlines, though identical in content, send very different messages:

1.  White Whale Web Services to Release New Content Management System, Revolutionize CMS Industry
 

2.  White Whale Web Services to release new content management system, revolutionize CMS industry
 

3.  WHITE WHALE WEB SERVICES TO RELEASE NEW CONTENT MANAGEMENT SYSTEM, REVOLUTIONIZE CMS INDUSTRY
 

Although there might be a justification for #3 in a particular Web design, it’s clear that you wouldn’t want a user to enter news headlines that way.  For one thing, caps are just hard to read in many contexts; but on top of that, it’s always easy to {text-transform:uppercase} if you need caps.  My general preference as a design snob would be for #2, but that’s clearly not common practice— as much as I enjoy headlines like this (or this), that style is much more common in European news than American.

It’s also the case that styles #1 and #2 look terrible next to each other:

• White Whale Web Services to Release New Content Management System, Revolutionize CMS Industry
• Other CMS providers cower in fear

So.  Should we let users do what they will, and enter headlines according to any system they prefer?  Or should we legislate something?  It seems pretty clear from the above examples that— at least in the particular case of news headlines— legislating is the way to go.  And if you’re going to require a particular format for headlines, it seems pretty clear that Title Case Is Your Only Option.

So what’s the best way to do it?

You could, for example, simply ask the user to format the headline a particular way:

___________________________________________________
Please use Title Case for headlines.

Or, a bit more diplomatically, you could provide an example:

___________________________________________________
Example: Stock Market Soars on Rumors of Bailout

Alternatively, we could let users enter any headlines they want, and control the front end display with CSS’s text-transform property.  But that’s not going to work either, because these are the only options we have:

Title Case Is Great, But Not If You Capitalize Every Word In The Sentence.  Otherwise It Looks Hacky.  The text-transform property doesn’t have the kind of sensitivity you’d want in a good Title Case headline.  I am personally big on punctuation and capitalization styles that reflect spoken rhythms— that’s why, no matter what Douglas says, I always put a space after an em dash— and capitalizing “the,” “and,” etc. ruins the spoken rhythm of a headline.

So the only approach left— assuming you want to engage this issue at all!— is to automatically convert headlines into Title Case on the back end.  And that’s the whole reason I started this post in the first place.

It turns out that converting to Title Case is nowhere near as simple as you’d imagine.  Sure, we know that you don’t capitalize “the” or “a” or prepositions, etc.  But how about sentences like these?

Read markdown_rules.txt to Find Out How _Underscores Around Words_ Will Be Interpreted

Notes and Observations Regarding Apple’s Announcements From ‘The Beat Goes On’ Special Event

These sentences are from a suite of test cases for a Title Case script originally created by John Gruber of Daring Fireball.  We are planning to use the PHP version of the script to convert some of Southwestern’s old news headlines (originally entered with uppercase headlines) to a thoughtful Title Case, and are considering using it when headlines are created in LiveWhale in the first place.  In the process we discovered yet another odd, fascinating corner of the world of CMS development to geek out in.

In other words, a response to an email I’ve sent with only the reply “Thanks!”

Now, I know why these emails exist— to acknowledge receipt of my message.  But I trust the Web, and so I’m assuming it was received anyway— and whenever the email bell rings, and I see there’s a message from a client or business contact, I stop what I’m doing to open Mail and check it out, and whenever it’s a Thanks! I can’t help but feel a bit prickly, for having interrupted a creative stream for several seconds to find out something I already assumed.  I know it’s a little petty, but when you’re  juggling lots of tasks, a relatively content-free email like that seems superfluous and unnecessary.

Contrast this with an email I got a couple of days ago:

The effect an email like this has is completely different.  By adding just a few extra words to this quick thank-you message, the author let me know that the sentiment was truly sincere: that the letter I’d sent had a positive impact.  The difference is so minor— between spending three seconds on a response and spending ten seconds— but the resulting email really made my day.

So now I’m resolved to do a better job of writing thank-you messages myself; I’ll commit to spending 10-15 seconds elaborating why an email was particularly helpful, timely or informative. If I can’t make the time for an even marginally thoughtful or heartfelt response, I won’t clutter the mail servers of the world with a content-free return receipt.

I’m getting married in a week.  (Thanks, I’m excited too!)  We have to get wedding insurance— something I’d never heard of— for our weekend-long wedding in the wilds of northern California.

Here is the list of exclusions in our policy:

Exclusions: Claims by Athletic Participants, War, Terrorism, Expected or Intended Injury, Sexual Abuse/Molestation, Asbestos, Nuclear Energy, Total Pollution, Fungi or Bacteria, Aircraft or Watercraft, Pyrotechnics, Employment Related Practices, Communicable Disease (Hepatitis, TSE, HIV, HTLV, or AIDS) Collapse of Temporary Structure, Lead Liability, Professional Liability, Use of Trampolines, Cheerleading Pyramids, Sale/Manufacture/Distribution of Athletic Equipment, Use of Saunas or Tanning Devices, Polo, Skin & Scuba Diving, Squash, Downhill Snow Skiing, Water Skiing, Whitewater Rafting, Bungee Jumping, Mountain Climbing, Rock Climbing, Motorsports, Rodeo or any Equestrian Related Sports, Waterslides, Ballooning, Parachute Jumping, Luge, Tobogganing, Gymnastics, All Motor Sports, Violation of Telephone Consumer Protection Act or CAN-SPAM Act.

How can we be expected to have any fun at all if we can’t play squash or violate the CAN-SPAM act?

The rest of WW weighs in:

Who are these people who maintain accounts with Tumblr, Stumbleupon, LinkedIn, Mixxd, and CrowdVine— what do they do all day?  How do they get any work done?  

(OK, I made up Mixxd. But I think the others are real.)

Update: Tony from CrowdVine comments that CV’s network is transient— used primarily during conferences for attendees to let each other know which sessions are “hot.”  That’s a good point— it’s easy to understand how transient, explicitly function-oriented tools can be useful, and if CrowdVine’s efforts really are directed at serving temporary social networks like conferences, I wish them well.  It’s a good idea.

I have heard from several past clients that Hobson’s doesn’t offer much in the way of customer service—  they seem to be a company that earns its money by buying up any higher-ed-related tool with market share and repackaging it as part of a “platform.”  Judging from this email—which, as you can see, showed up in my inbox with no content whatsoever, and a reply-to link to the mysterious “myvippage.net”— they put about as much thought and work into email marketing as they do into innovation and technology.

At the code level, LiveWhale is a framework, which means the same codebase is hit for many different types of requests. The question is then: how to achieve high performance with a codebase that has to perform so many tasks and is therefore code heavy. It makes sense to divide code across a handful of files. The objective here is to only load libraries when you need them. A typical request will only use a tiny percentage of the entire codebase, so there’s no need to read a great deal of code from the filesystem and eat up RAM per PHP request. Also, with a modular system like LiveWhale, it is not explicitly known what modules exist that will need to be loaded. An important optimization is one where only the first request to the server has to perform logic to determine what to load. The results of this expensive operation are cached, and all subsequent LiveWhale requests enjoy dramatic savings in the module loader.

A common problem with application frameworks is that they perform two very expensive tasks with every single page load: 1) initializing a session and 2) connecting to a database. Neither of these two should be assumed. In LiveWhale, a session is started only when a component requires it. A database connection only occurs when/if the first query to it is performed. Making your application sufficiently “smart” about if and when these initializations take place will also lead to dramatic speed improvements.

Less is more. That means you should optimize out any hit to the file system that you can, or remove extraneous database queries. Also, be wary of OO (object oriented) slowdowns. If something doesn’t need to be a class, don’t use one. Remember that calls to an object’s method are more expensive than global function calls. The same holds true for accessing an object’s properties. An obvious optimization is done when dealing with data from a foreign server. Such content should be cached as much as possible, so that rapid hits to your site don’t rely on the performance (or availability) or an external data source. Another tip would be to use error suppression (@) sparingly. This is a known performance hit. There are a number of similar, simple tips available via a quick Google search for “php optimizations”, and there are slideshows available from PHP developers on the subject.

Analyze how your code operates. If you have a function that uses a lot of logic (if/then, switch), make sure you understand what the “common case” is. In other words, what’s the most likely condition that function will come across? Then determine if the function’s logic is conducive to the fastest possible result under the most common case. For example, I had a function that has to intercept a variety of XML structures and handle them in different ways. One particular XML structure (the simplest possible one) was far and away the most common case. Rather than parsing the XML with simplexml_load_string() as I do with all the chunks of XML I receive, I first do a preg_match() to determine if I have the common case. In this situation, I can immediately return a simple result and skip both the parsing of the XML and the lengthy logic that goes with performing operations with it.

Identify “hot” functions. Functions that are called many times, often within a loop, should get the most attention in terms of optimization. First, make sure the function should be called at all, as opposed to using inline code, otherwise you needlessly acquire function overhead. Second, move any redundant logic outside of the hot function. Perhaps the check can be performed just once before the hot code is executed. There are also situations where a function can potentially be called repeatedly and end up with the same result. It might make sense to declare a static variable inside the function, to locally cache content generated by the function. On a subsequent call, it can first check the static array to see if a result already exists, and simply return that if so. This sort of fine-grained optimization will only help when there is a significant bottleneck with a particular function, but it can make a huge difference if done wisely.

Lastly, use XDebug! XDebug is your friend. Among the many things it can do, it will let you profile your PHP code and generate a report about how much time your script is taking overall and within particular functions. Here’s a mockup of the type of information it provides:

In this example, the function LiveWhale->foo() clearly takes the majority of the time for this request. At 38.3% of request time for a single call, it is a good candidate for serious analysis. LiveWhale->bar() is also expensive compared to other operations, and there may be ways to make this function perform better too. The function do_something() takes 6.3% for a single call, on line 41. Another function, do_something_else(), takes nearly the same amount of time but due to the fact that it was called 15 times (at 17 CPU cycles each, so 252 cycles total). Knowing why each function takes the time that it does, and why it might be called so many times, will help you maximize the performance of your application.

Familiarity with what makes PHP code perform well will only lead to the best decisions being made early on, so that XDebug reveals fewer inefficiencies. In the long run, many of these tips become automatic and part of your coding style, but for the best quality, production ready code, a little bit of analysis and thought goes a long way.

But IE stylesheets can only get you so far. When working with a public-facing website design you just need to get it right once: we make sure the structure is flexible and adaptable and forward-looking, but mainly we build to the best standards of the current day. But because development of our backend solution will be continuous (that’s a hint about a major feature, by the way), continuing to tie ourselves to IE6’s sundry limitations would be crippling down the road.

All this is to say that we’ve made a careful and tentative decision to drop IE6 support for the backend web app. The software is seven years old and was buggy when it was released; its replacement is already two years old. Still, requiring a more modern browser felt somewhat risky: about 20% of visitors to the public pages of a small liberal arts college are still on IE6; at a major research university, the portion is slightly higher. But we decided that a fully-fledged rich “web application” can have different requirements than a public site, and now we see that we’re in good company: both Apple in MobileMe) and 37signals (in all their apps) have decided to drop support for IE6. Hopefully this will be the start of a sorely-needed chain-reaction–it’s clear that the catalyst is not going to come from Microsoft, which is not at all interested in pushing the upgrade, even with version 8 on the horizon.

So if you’re using IE6, might we suggest an upgrade to Firefox, Safari, or IE7? Your web experience will be leagues better. And you’ll be able to play with our new toy as soon as we release it, just around the corner.

The following IM conversation with David McKelvey of Lewis & Clark began as a discussion of their recently approved Web design final release candidate.  L&C uses the phrase “Uncommon Journeys” as a motto of sorts, and although many higher ed slogans are kind of lame, we all really like this one.  A discussion of its use in the home page design led to a discussion of one of my most beloved bands, Journey (beware: loud rockin’ flash intro!), and their new lead singer (who was found on YouTube).  Reviewing this information, David also noticed that Journey’s now got an island in Second Life.

David is an early adopter and a technology enthusiast (and is eminently Googleable, though not to be confused with his many imitators).  I, on the other hand, am more old school, and my love of technology is ambiguous and complicated.  I am, therefore, deeply skeptical about Second Life.  Once David mentioned it, I couldn’t resist engaging him in a conversation that wound up expressing my professional opinion about SL (or is it 2L?) pretty well.

The full chatlog follows.
 

/* Column layouts */
.column { float:left; overflow:hidden;}
.columns { margin-bottom:20px; padding-top:10px; }
.three.columns .first { width:200px; padding-right:20px; }
.three.columns .second { width:200px; padding:0 20px; }
.three.columns .third { width:200px; padding-left:20px; }
.two.columns .first { width:300px; padding-right:20px; }
.two.columns .second { width:300px; padding-left:20px; }

This lets us code the XHTML like this:

<div class="three columns">
     <div class="first column">
         Column 1
     </div>
     <div class="second column">
         Column 2
     </div>
     <div class="third column">
         Column 3
     </div>
<div style="clear:both;"></div>
</div>  

… which is pretty nice semantically.

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.

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.