Every evening when the hour hand passes five, most of us leave our jobs for relaxation and time with family. For the more than four hundred years that newspapers have been dropping onto doorsteps, five o'clock has meant something different for a few folks. Starting around this time, journalists and designers get to work designing tomorrow's front page.
It all starts with questions. "What happened today?" "What could happen tonight?" "How important is this story?" "Do we have great pictures that we want on our front page?" "What design and accompanying stories will really capture the history of today?" When everyone is comfortable with the answers to those questions, folks get started drawing the layout of the front page. By early morning, a designed cover is complete and ready to catch each coffee spill.
That's not the case with online news. Every news site looks pretty much the same each day. Business, Sports, Politics, Entertainment – aside from the stories in these sections, the design of the sections themselves is pretty uniform and, well, boring. As someone who has worked in software for a decade, I have often described this as every news site looking like one big database query.
Behold the previous MSNBC cover design (with a few helpful guides).
Aside from different artwork and headlines, you can count on the cover looking relatively similar to this every day. Designing a front page using a template this rigid is fairly simple: the most important story drops into the lead position, the next set of important stories drops into the secondary lead area and so on. Big news breaks? Just drop it into the lead position, make it red and make the headline gargantuan in size.
Can you blame us? Our publishing systems allow journalists to compose good-looking news pages very quickly. We love databases, repetition and optimization. We know that when we standardize on a process or procedure, there is less room for bugs. Fewer bugs mean more sleep or, for the geekiest of us, more time on Xbox Live.
But we've grown bored with repetition and we suspect you have, too. In redesigning msnbc.com, we wanted to build components that allow the site to – we've been saying this a lot lately –
change at the pace of news. To see what that means, here are four examples of how our cover could now look.
The number of different ways our site can look on any given day is nearly infinite. The new msnbc.com gives editors almost as much flexibility as the blank sheet of newsprint that has recorded the day's top stories for centuries. That flexibility is precisely how we, in technology, saw our charter in this redesign effort: build tools that allow editors to present news in the layout most appropriate to the news itself.
How is it all possible? How can msnbc.com editors quickly compose news layouts that reflect the landscape of news on that day? The answer lies in a component we lovingly call
The Grid. If looking under the hood scares you, just think of the grid as our equivalent of Dr. Brown's Flux Capacitor in
Back to the Future.
Meet the gridThe grid is the brainchild of a number of technologists at msnbc.com. Over the past year, we've spent many late nights focused on achieving two goals: flexibility and efficiency. Stories, videos and photos need to be presented creatively and uniquely. As importantly, they need to get on the site quickly. We've achieved this by dividing the composition of section fronts into two distinct stages.
In the template creation phase of production, a slew of designers break the white canvas of an msnbc.com page into cells. These folks have ultimate flexibility: designers can size cells individually, style them and position them anywhere on any page. This team can author these templates and publish them to the site in less than hour, at which point editors take over.
Editors then use these templates by dropping stories, slideshows, videos and other juicy bits of content into the predefined styles. They proceed to tweak each component to appear as best as possible and, perhaps, add a photo or abstract, at which point the grid is ready for publishing. Quick, efficient and, we think, beautiful.
We all know that when news breaks, it's never what we expect. Because this entire template creation and usage process takes less than an hour, we can design templates for specific news events. The grid's most exciting aspect, however, is its versatility. Look at this shot of a new msnbc.com section and note the red regions.
Our grid component is responsible for drawing all of the regions highlighted in red. This means that all of the flexibility editors have with the topmost region of our pages applies to the rest of the page as well. We hope that this will lead to interesting and immersive news experiences.
All this adds up to a new way of thinking about a redesign. We love the new look of msnbc.com, but we think of it just as a point of departure, a framework for news experiences yet imagined. To us, the most interesting days on msnbc.com will always lie in our future.
Jeff Maurone is a Program Manager on the msnbc.com technology team.
