The BW Design Update Rolls On

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.

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.