Stuntbox, my sometimes hobbyhorse, is now Stuntbox, LLC. I am officially in the design consulting business.

It started about two years ago, as a faint but undeniable itch, somewhere in the far back of my mind. “You have to do this,” it kept telling me. I kept putting it aside. Halfway through a stint running the interactive design department of one of the most (insert standard PR department superlative here) business publications in the world, it’s easy to distract yourself with the minutiae of daily humdrum, ignoring what better instincts are shouting. “Yeah, yeah,” I thought, “Someday. I know. I really should. I know! Now let me jam out this memo before the 2pm shows up.”

Fortunately for me, I caught a lucky break. I got laid off.

Yeah, I know what you might be thinking. Cognitive dissonance, lemons, lemonade, and some such blah blah. But in my case, believe me when I say the only genuine adversity was holding back the goofball grin during that most special of HR sessions. I’d known for a long time what the next step should be for me, personally and professionally. And I was being handed a corporate subsidy to get busy doing exactly that. The certain and unshakable notion that found purchase in my brain all those months before was being tossed the keys to the family hot rod, no questions asked, no curfew. So let’s get going, shall we?

For now, I’ll be sticking to what I do best, design and creative direction for the Web, with a bit of client-side code thrown in to keep things zesty. Have a need for something like that? Drop me a line, I’d love to hear from you. We might be the perfect fit for each other.

Consider the following screenshots. The first of the BusinessWeek.com reader comment navigation as I originally designed it (eons ago, it now seems)…

…and the latter of how it appeared the other day when my boss tweeted about a story that’s garnered a whopping 3,000 comments and counting.

Ouch.

As originally envisioned, the design accommodated about 200 or so comments before Very Bad Things started floating the user’s way. There was a time—hefty traffic reports in hand—when that was above and beyond. Pants with two extra inches at the waist.

Clearly we’ve packed on some pounds since then.

Bend Me, Shape Me

How your designs scale with use is one of those things you need to diligently revisit and tweak as products mature. You can’t realistically account for all eventualities at the outset. That brand of clairvoyance eludes even the best of us. But you can plot out probable outcomes and leave hooks behind for those rainy design days somewhere on down the line. (And obviously some of those hooks need tugging on in this case.)

But remember, you need to return again and again, to ensure yesterday’s spacious accommodations haven’t turned into today’s teeming flophouse.

Actually, if you’ve done it right, you never left in the first place.

If you’ve been to BusinessWeek.com lately, you may have noticed our article pages sporting some nifty new functionality. One of the first fruits of our partnership with LinkedIn, we’ve officially taken the wraps off the LinkedIn Company Insider tool.

Now a quick click inside our articles tells you if you’re connected to folks at companies in the news. Reading a BusinessWeek story about Ford’s effort to sell Jaguar? Click. Pop. Look, Ma! Turns out you’re connected to 8 people at Ford—through folks you already know on LinkedIn.

I’m jazzed about this not just because it showcases the mighty network effect of LinkedIn right where our users benefit the most from it, but also because it’s an article tool that’s gloriously contextual. The results you get spring directly from the specific news you’re reading.

The Usual Suspects

Let’s face it, tons of news sites out there sport a box, zone, region or seeming jimjam somewhere on their articles that’s chock full of “article tools”. It’s pretty much obligatory. These are the links that “do something” with what you’re reading. But the options haven’t shown much in the way of new thinking for years—to say nothing of being truly compelling. A link to print. A link to e-mail. A link to share on the Web 2.0 flavor of the month. Zzzzzzzz…

It’s not that these items don’t serve a purpose. It just bothers me intensely that these tools typically don’t affect or interact with the content in terribly meaningful ways.

Well, consider this our little effort to shake off some of that dogmatic dust and get folks thinking about these tools again.

Savoir Faire, Everywhere

The tool itself is added via the DOM, which is worth noting for those of you out there that are (or aren’t yet) hip to Web Standards. When it came time to to do the deed and flip the big switch, all that was needed was a change to a single script file to add this feature to thousands of articles on BusinessWeek.com—past, present, and future. And by “thousands” I mean, “all of them.”

That’s huge. No Maalox moments charting CMS changes. No heinous text grinds. And no compromising on showing new features on some pages and not others. All this equals time and money saved (and made), in more ways than one. If you’re not clueful yet, do yourself a favor and spend a little quality time with folks that can help you out. If this exercise proves one thing, it’s that Web Standards are far more than a hobbyist’s pursuit—they’re a competitive business edge.

But that’s enough talk for now. Go check out the new tool and have some fun with your soon-to-be-expanding network!

I’m a big fan of the phrase, “eat your own cooking”.

As a Web designer you should be doing exactly that—using the things you make. (This of course applies to just about any creative endeavor, from bridge building to cake baking.) It speaks volumes about the quality and relevance of a product if its producers are also enthusiastic consumers.

Cognitive dissonance is equally revealing. You wouldn’t trust a four star chef that serves Cheez Whiz at his home table. You wouldn’t listen to an addiction counselor who sneaks out to score smack. So why, oh why, would you deal with a “tech company” that has a train wreck for an intranet?

Standard(s) Complaint

The vast majority of the company intranets I’ve seen in my travels have ranged in quality from the affably feeble to the criminally negligent. None has ever approached anything a sane person would call excellent. Not even on a good day.

They have been used as a pliable excuse to perpetrate all manner of horrid, insipid, flat-out unprofessional web work. Bereft both of standards awareness and common courtesy for the poor souls forced to inhabit them. They are clumsy oafs built on two left feet, stumbling about, making a mockery of accessibility and usable design while they smash the china and wreck the furniture.

Enough, I say.

Standard(s) Argument

The enabling phrase for all this folly typically sounds something like, “but this is for an intranet,” and it’s usually whipped out in the thick of some misguided conversation about Web Standards. The speaker assumes that because Company X has “standardized” on Browser Y, they can conveniently toss Web Standards out the window. Let’s all chug some company Kool Aid and call it a day!

Not so fast there, Sparky. I’ve got news for you: It’s a convenient theory, but it falls to pieces in practice.

Given a large enough ecosystem (ie, more than one user), you will never be able to predict your audience with 100% certainty, let alone control them. Single browser environments are both unworkable and, more importantly, illusory. Really. Even within company walls. And the bigger the audience (ie, the company) the more that 100% figure will seem like a distant dream. Give that number a nice, warm hug then kiss it goodbye—you’ll never see it again.

Intranet, Heal Thyself

The bottom line is that companies need to stop fouling their nests with these relics. There’s more than enough time and money to be saved by writing to standards to pay back the effort many times over. The sooner this is realized at all levels the sooner the corporate funds draining away towards browser “deployment and enforcement” programs can be reassigned to something more useful.

Like, say, free coffee.

“Stand in line? What are you crazy? I’m not standing in line.”

Eight hours later, I was standing in line. (Oops.)

Not so much standing as strolling, actually. Morbid curiosity got the better of me by the time I left the office for the weekend, and I found myself walking up 5th Avenue to take a gander at all the hubbub. I was pretty stunned to arrive on the scene a few hours after launch to find a less-than-five-minute line. Five minutes to queue up and charge through the double-file gauntlet of Apple Store employees cheering folks on at the door. “Oh, hey, what the heck…”

Mere moments later I reemerged, clutching my quarry in it’s slick satin finish bag, palms sweaty like a bad prom date.

I’ll spare the nitty gritty product review details. Suffice it to say it’s tremendously damn good. Like, “lives up to the hype” good. In fact, after a full weekend of usage, I’ll go so far as to declare the iPhone the best consumer electronics device I’ve ever purchased. Hands down. Full stop. (Note to Ed Colligan: Apple didn’t just walk in—they broke down the door, punched you in the face and stole your girlfriend on the way out.)

Like it or not it’s going to have a noticeable influence on the market, so affected parties would do well to come to grips with that fact sooner rather than later.

A Call to Action

And that’s precisely where the Web design and development community comes in.

There’s been no shortage of gnashing of teeth and tearing of beards over the SDK issue. Want to write a “native app” for the iPhone, some Cocoa goodness all your own? Sorry kids, it’s closed. (For now at least.) Adam Greenfield even goes so far as to comment, “you cannot make culture with this device.” He’s got a point.

But this time the closed model is hugely asymptotic: The iPhone is a full-on consumer of standards in every regard. Web Standards, networking standards, file standards, you name it. The SDK is a non-SDK: Make solid websites using acknowledged best practices and the iPhone well love them up.

So here’s our chance, Webfolk. Home court advantage is officially ours. Apple just dropped the sexiest client imaginable right in our laps, complete with oodles of free publicity the likes of which presidential candidates and washed up child actors only dream about. It’s a gift. A beautiful, beautiful gift for people who make websites. This is an opportunity that needs to be grabbed with both hands.

It’s time to get to work.

It may sound odd, but I’m really not sold on how most news sites are currently using video. At best the topic engenders me with a mild sort of ambivalence: “Meh, that’s nice.” These days my typical reaction to gee-whiz embedded video doodads in article pages is to ignore them. It’s a pathological habit caused by subtle nagging issues. I think we can, and should, do better.

What it really boils down to is a forced rate of consumption.

Force Feeding

When I’m reading a news article I can instantly and effortlessly shift from attentive reading to scanning. I can vary the rate of consumption to suit my needs, at any moment and without difficulty. Text is conducive to this. That’s paramount in news/editorial environments, where the value proposition is all about timely information exchange. As a user I can choose to be more or less engaged as the situation merits. I can choose to sacrifice depth for speed (or vice versa) whenever I darn well feel like it—and still get what I need.

I can’t do that with video. At least not in its current incarnations.

Video forces full engagement on its own terms. The time it takes to watch the video is the time it takes to watch the video. Sure, you can try speeding it up (in a rare few applications) or scrubbing around with the playhead, but both are poor analogs to scanning text. With most videos the best you can hope for is a passing idea of context, maybe a notion of tone. (Imagine jogging around your standard talking head news video. Still worse, voiceover scenes.) And both methods require too much fiddling on the user’s part anyway.

A (Few) Modest Proposal(s)

One solution might be what I call, for lack of a better term, “scanning captions”. Imagine if when you clicked on the playhead (or used a keyboard shortcut) and began scrubbing, a text overlay with a few words instantly appeared, and updated as you moved around, quickly telegraphing what’s going on in the video during that particular time span. Essentially these are just captions that activate automatically when scrubbing, but with much more abstract text. Not much—just enough to convey context.

Or you could take those same captions and place them alongside the video as segment names, highlighting the current one and letting the user jump to to any of them with a click.

These are just some off-the-cuff ideas I sketched out in a few minutes this afternoon. The point is it wouldn’t take a whole lot to offer a more genuinely useful experience to the user.

Stay Tuned

Maybe I’m splitting hairs with all of this. I hate to drag out the old cliché, but I’m definitely not advocating throwing the baby out with the bathwater. Yes, video is a useful medium in its own right. Yes, we should keep using it. But until some of these little nits are worked out it will probably never be quite as rich (and humane) a resource as we hope.

That title is as much a reference to the topics of discussion as a self-deprecating jab at my recent absence from the site. (Yes, more “oh-geez-I’ve-just-been-too-busy-to-blog” blogging, but so it goes. Seriously though, my reasons this go ’round are unimpeachable–and undeniably adorable.) What follows is a scattershot slice of life as I know it right now…

Sub-Sub-Subsections

These past few weeks we’ve been cranking through the third and final major phase of the BusinessWeek.com site overhaul: the subsections. Major section homepages (referred to internally as “channels” in our quirky parlance) are being steadily converted at the rate of about two a week, which–especially when stacked against other ongoing projects–is an impressive clip. Hat’s off to entire the BW crew that’s been lining these puppies up and knocking them down with aplomb.

I’ll probably go more in depth about the design of these pages at a later date, but for now I’ll sum it up by saying if our new homepage and story page designs had a love child, the channel index design would be it. And it’s a smart, sexy one at that. Take a peak for yourself when you have a moment.

Not Com

There’s been another recent site change that the eagle-eyed among you may have already spotted—we’ve officially dropped the “.com” from our logo.

I was thrilled to finally roll this update out, making clear to our readers what we’ve known internally for a long time: When it comes to our brand, we’re all just one BusinessWeek now. For clarity we’ll be referring to the web operations in writing as BusinessWeek.com, but the logo is the logo is the logo now. Amen.

Proper Care & Feeding

In amongst all this hubbub the BusinessWeek.com design crew actually managed to sneak away from their desks en masse two weeks ago for an honest-to-goodness field trip. Destination? The Design Life Now exhibit at the Cooper-Hewitt National Design Museum. It’s a great show in a superb space, and I highly recommend it. Check out the photos for a peak at all the fun.

In it’s way, this pleases me more than any of the other aforementioned BusinessWeek news. With all the frenetic activity focused on developing the site into a twenty-first century news outlet it can be all too easy to simply overlook cultivating the creative talent we have working for us. We’re extremely conscious of the risk and do everything we can to avoid falling into that trap. It sounds hokey, but I really do believe in the talent of our staffers and want to make sure they have everything they need to succeed–even when that means simply taking time out to decompress and just plain have fun. The creative mind has an appetite, and we need to make damn sure we’re feeding it.

Take the Survey—Save the World

All of which makes for a nice segue into telling any web designers reading this blog that they should run, not walk, over to the first annual A List Apart Design Survey. Zeldman & Company have done it again, spotting an unaddressed need and proving just how reliably prescient they can be. As a department manager at a major news website I can’t understate just how sorely needed this was. This is information about our community that simply doesn’t exist anywhere yet.

So get on over there and help answer the question that’s plagued us since the first web designer climbed out of the primordial ooze and croaked the words, “Just who the hell are we anyway?”

Ah, the wisdom of The Simpsons.

That image comes out of a presentation I’ve been putting together at the office to briefly outline our site history for folks. Providing the context—the “where we are” and “how we got here” bits—leading up to the current redesign.

Come this May I’ll have been at BusinessWeek for two years. In that relatively short time I’ve managed to research my way through a hefty swathe of the site’s decade-plus past as we’ve laid the foundation for it’s next major phase of life. When you’re looking for where the bodies are buried, poking around the darker back alleys of the servers, things can turn into an edifying little jaunt down Web Trends Memory Lane. Pick away at the strata with your trusty rock hammer and entire epochs (and merciful blips) unfold before your eyes. “Hey, here are those two months when people actually thought Comet Cursor was cool.” Shudder.

The table layouts and spacer GIFs didn’t come out of nowhere though. As any historian will tell you, it’s important to have context. I always make sure to remind myself of that when I’m untying the wads of all these old knots. The tools that went into the site at any particular moment in time are merely a reflection of what was going on in the environment.

And for a long time all we had were lemon trees.

You’re joking, right?

Any attempt to hit refresh, type in a new URL, or use the browser’s back button in Safari summons forth this little nugget of pure JavaScript evil. (You won’t see this at all in Mac Firefox because, well, the site simply doesn’t load in that joint.)

Let me say this loud and clear: Never, ever do this. Ever.

I seriously had to go back to the article and check that this was indeed a “new” site, because for a second there you could have easily fooled me into thinking we were partying like it’s 1999.

Scan down the site a little farther and you’ll find this other precious bit of “Was it good for you?” neediness.

Sorry Soapbox, but I’ve had better.

A good chunk of time has passed since the new story page design went live at BusinessWeek.com and I’m happy to report that the new arrival has settled in nicely and all parties are fully recuperated. Check out the before and after screenshots.

Boy did I ever sweat the details on this one.

First there’s the issue of volume. Once fully deployed this design will encompass hundreds of thousands of pages, bringing enough special cases to the table to make your head twirl. At last count there were no less than twenty mockups showing all the day-to-day scenarios this design can accommodate. Planning is key—nothing on the site has as many moving parts as this.

Then there’s the sheer importance of the page. This is where the content lives after all. But it’s also one of our most highly-trafficked page types, thanks to portals and search engines. They turn every story into a de facto homepage. When a substantial block of your users don’t come in through the front door it has more than a passing influence on your design.

Meet the Beast

The grid for this design picks up where the homepage work left off, combining the first two columns of the latter into a single one that houses story copy along with plenty of breathing room. We were pretty successful at sidestepping the “Hey, you can stick something here!” mentality and gave whitespace its due wherever we could.

Typography gets some love too. Early in the process I spent a long, distraction-free Sunday in the office dropping BusinessWeek stories into prototype pages, using every type size and letting variation we were considering. Read a story. Take a break. Come back fresh. Lather, rinse, repeat until the list of candidates was winnowed down to the eventual winner.

The many faces of the BusinessWeek.com story page.

Once the critical grid and typography decisions were made most of the other page elements snapped into place in fairly short order. This is definitely a design that lives or dies on layout and type. Everything else is just details. (Hours upon hours of hairy, mind-boggling details, but details nonetheless.)

Plug & Play

It’s important to note that there are some things we won’t be doing in this new design (at least not on a regular basis). Inline images is one of them. Oh, you’ll see plenty of images, but they’ll be in tightly defined “modules”.

Say what?

Okay, bear with me. This will seem dreadfully obvious once I say it…

It’s not enough for your design to be a beautiful, functional piece of layout in this kind of environment. It has to be production-friendly too. (You can say “Duh!” now.) I cannot stress this enough. If you don’t get this one right you’re setting your folks up for death by a thousand paper cuts. On a busy day the site can crank out hundreds of images. Imagine fielding custom size and placement requests for each one. Yikes. Bottom line, if the production requirements for your design don’t scale well that design doesn’t doesn’t belong in the newsroom (or any high volume site for that matter). You’d be amazed how often folks skip planning this bit and set themselves up for serious trouble. Think sensible, not revolutionary.

Hence the creation of swappable, highly structured page sections that art can flow into automatically. There’s an inset area above the story tools to handle smaller thumbnail images and captions, with links to larger popup versions, and a handy assortment of slots for larger banner-style images across the top of the story (referred to as “ledes” [sic] in the news business for reasons no battle-hardened veteran has yet been able to authoritatively explain to me).

But Wait, There’s More…

There are a few other things I’d like to cover, but I’ll hold off lest I extend this entry to windbag proportions. Stay tuned for follow-up posts on how we’re using DOM and AJAX with these pages (it’s not quite what you’d expect) as well as a warts-and-all glimpse into handling that most necessary of evils—ads—in a Web Standards world.