Alpha Channel : redesign

Designing at the speed of news

Kriss Chaumont — Tue, 22 Jan 2008 21:35:00 GMT

For Iowa’s big night, I was the designer in charge of helping our two cover editors make the best cover-grids they could make and troubleshoot technical issues they might encounter. Turns out that I barely earned my free pizza that night because no matter what surprise political win or early candidate speech was thrown at the editors’ wire-feeds and TV screens, they were ready for it!

One editor focusing on the current cover and one anticipating the next move worked like a charm! Aside from a couple minor tweaks, I was just there to admire what I thought was impossible to achieve less than a year ago: editors making light-speed changes, big and small, to a visually complicated cover without the intervention of a designer.

The media editor was able to constantly switch to better photos as they became available. It was amazing to watch everyone in the newsroom pulling together to beat the competition and deliver up-to-the-minute coverage, and I think we did just that. In terms of layouts, there was a bit of planning, too, and it was really helpful to have pre-made layouts to choose from in different situations. Looking back, I wish we had changed the overall layout a little more often throughout the evening. But for a first time dealing with constantly breaking live coverage for a whole evening, we can’t be too picky. There’s always a next time.

We have a new tool that takes screenshots of our cover every time it’s changed and, as I was reviewing all of the different versions of that night, I was pretty surprised at how alive it really was the whole time. One of our media editors (Thanks, Meredith!) made a small animation with all of them for us to get an idea of what kind of work goes into the cover. Wow! Photos are changing left and right, getting better and better, headlines are being tweaked, deck shortened, mistakes fixed...mistakes? What mistakes? All of that so that when you come to our site, you see the best we can possibly offer at that minute. Take a look at it and see all of the changes that occurred in the span of a few hours and think that when you came to our site, you only saw one or two snapshots of those and probably took it all for granted.

So until this year, what we had at MSNBC and other news sites was the freedom to change our lead story five, even 10 times a day. For all-evening events, such as caucus nights, we could switch the lead a couple times but we really had to focus on the big story. We were not able to put the light on interesting moments of the evening because it just wasn’t technically possible to do it well and barely worth doing it anyway for only 10 minutes.

Times have changed. And that night, as we looked at our competition working in an almost static past, our coverage was alive, always new and updated. Like the others, we always had our lead story in a prominent spot, but we had much more to offer: live coverage as it unfolded, with live video, live photos, live updates, live live live!

Is this what you want to see from us in the coverage of an event, such as the Iowa caucus? What are your thoughts after watching the animation? Is all this worth it to you?

The latest site updates

Ben Tesch — Wed, 19 Dec 2007 19:34:00 GMT

Home is wherever you find yourself
To help find you way back to the homepage of our site, a "home" button has been added to the beginning of the breadcrumbs on every page beyond the homepage. The msnbc logo in the top left and bottom left of the pages should always get you there as well.

Fly-out navigation improvements
I know it sounds sort of strange to say that being less responsive is better, but this may be one case where it is true. One of the complaints we heard a lot was that the fly-out navigation was a bit too quick to appear when you move your mouse over the links. We've added a slight delay to the fly-out, so that if you brush across the links the menus won't instantly appear, but if you keep your mouse over the links for a moment, the menus should appear.

And if you don't like the fly-out menus, there should be a "Disable Fly-out" button at the end of the blue list of links. We have received reports of the menus disappearing when you're trying to move over to a link in the menus, and are working to improve that so it doesn't happen as well.

Plenty of other updates
We've done quite a few tweaks under the hood to make the site load faster and look better, and to warn you when and if things aren't displaying properly. We are also working on some new interesting ideas for customized content such as stocks and sports scores which we will talk about soon, but if you have any particular ideas or issues that you want to mention, please do.

Look what you done for me

Ben Tesch — Wed, 21 Nov 2007 18:30:00 GMT

Yes, I am invoking Al Green to try to spread a little peace, love, and understanding to everybody.

In case you get the impression otherwise, we are reading every single comment and e-mail that gets sent to us. We understand that a big change can cause confusion, unfamiliarity, and even contempt, but please know that we are taking every question and concern into consideration. If the comment you have left isn't showing up, it's not that it isn't being read or addressed, it's probably that it's something we already know about and are doing something about.

We have made quite a few adjustments and improvements to the site in the last several days based on your feedback and questions, and I'd like to mention a few in particular.

Local news, sports and weather
One of the latest things we've done is update the page where you can personalize your news. It hadn't been changed for several years and even allowed you to sign up for features that aren't on the site. Any personalized settings you had made before should still be there, but we've changed the form so it should be cleaner, easier to use and most importantly accurately reflect the choices you have.

Your local news, sports and weather choices appear in several places: the current weather conditions should appear in the top right of the homepage, and the weather forecast should appear in your "Local news & weather" slice further down the page. Your local news also has its own page and so does the weather. The sports scores for any team you have selected are available in the "My news" tab on the homepage.

Your stocks and market data
Your personalized stocks are still there, they have just moved into the tabbed box near the top of the page. On the homepage, they are in the "My news" tab, and on the Business section, they are in the "My stocks" tab.

Market data should now be showing up under the "Business" slice on the homepage. The Business section has the markets under the "Stocks & economy" slice, as well as a prominent graphical representation in the top right of the page.

Launching videos and slideshows unexpectedly
Trust me, you're not the only one that wants to know what you're clicking on before you do. We are doing as much as we can in order to put a word, label or icon next to anything that does not launch a standard text page. We know there are some areas of our site that are so inundated with video that it's confusing, and we are working to make things everywhere as clear as possible.

Shortcuts to the fun stuff
We've added a list of links to the bottom of the left-hand navigation that takes you to some of the more popular and requested things, such as Sudoku, the crossword puzzle, comics, games and more.

The fly-out navigation
If you don't like the fly-out navigation, underneath the main list of categories in the left-hand navigation there is a "Disable Fly-out" link.

If you like the fly-out navigation, but just maybe not how it behaves, we are investigating how to improve it to make it a little less, um... responsive.

If you can't see much of anything on the page, or the tabs don't work, or the local news and weather isn't showing up
This is probably because Javascript has been disabled on your web browser. (Much of the site's functionality was and still is based on this programming language, which is native to most -- if not all -- web browsers.) Javascript may be disabled because of a virus-protection program on your computer, but is more likely due to a security setting in your web browser settings that can be enabled. If you need to enable Javascript in your browser, NASA has a pretty good resource on how to do it... don't worry, it's not rocket science.

Another reason personalized settings may not be showing up is that your browser needs to be able to accept cookies. Google has an excellent resource on how to enable cookies on many browsers.

Anything else that I didn't cover?
Please leave a comment if you have something that I didn't cover. I will read them all, and try to publish and respond to as many concerns that haven't been answered as I can. You should also know that we have a help, technical support and troubleshooting page, which may already provide the answer to your question, and which also provides ways to contact us about your problems, suggestions, comments, and concerns... and maybe even some kudos.

I find your lack of DOCTYPE disturbing

Jim Ray — Thu, 15 Nov 2007 23:02:00 GMT

So, it turns out that more than a few of you are aware of the command+U key combination in your browser (for the non-geeks in the house, that’s a common keyboard shortcut for View Source). And a few of you have even noticed that, despite our efforts to write the best code possible, the HTML markup still leaves much to be desired. For instance, the site doesn’t validate with the W3C and, a far greater sin, doesn’t even bother to declare a DOCTYPE. How, some have asked, can we say that we care about standards when we are missing these fundamental pieces?

The short answer is that msnbc.com is eleven years old. We have thousands of legacy pages that date back to the time when Netscape 2 was the dominant browser in the marketplace. We’re working on solutions to get this content into our new, more flexible system, but if we’d waited to port everything over, we’d be declaring a DOCTYPE of HTML 6.0.

The longer answer is a bit more complicated. We could, of course, just leave legacy pages without a DOCTYPE and carry on, boldly into the future, but some pages (like stories) still use components that don’t expect a DOCTYPE and break the page rather horribly. We’re also having to reconfigure our CMS to support DOCTYPES properly - a task that’s actually more difficult than writing a line of markup at the top of the page. For instance, to be XHTML compliant, we have several dozen legacy bugs to fix to be considered valid XML. I’m personally lobbying for HTML 5, so, Safari 3 users, get ready.

Then there’s the classic problem of design and development disconnection. The site architecture actually supports having a DOCTYPE right now - I could pick one from a dropdown, hit republish and make the world a better place. In fact, when I first fired up TextMate to write the first draft of HTML that would eventually become the new site, I specifically chose HTML 4.01 Transitional. Why? Because it makes my job easier. Using a DOCTYPE makes bad browsers behave, at least a little bit. Not using a DOCTYPE has made life harder for all of us working on the site markup because it means we have to work around the various quirks of that perpetual thorn in my… side, Internet Explorer. But we ended up not designing with a DOCTYPE because we weren’t sure that feature was going to make the release and had to assume the worst in order to make our deadline. Declaring a DOCTYPE right now would actually break the site in some browsers because of these workarounds. Believe me when I say, I would’ve slept a lot more, and probably have at least a little bit more hair on my head, if <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> appeared at the top of our homepage.

Like anyone else who’s eyes haven’t glazed over by reading this far down, I’m a geek. I know it’s easy to fire off a quick blog post and become righteously indignant about these sorts of things (guilty). Again, I ask for your patience and understanding. We know what needs to be done, we actually do this stuff for a living (some of us for fun, as masochistic as that sounds). We’re working hard to deliver the very best site possible, inside and out, I promise.

The msnbc.com redesign: a Newsvine user's perspective

Ben Tesch — Wed, 14 Nov 2007 15:53:00 GMT

It sure seems like I have spent the whole day writing, talking and thinking about MSNBC.com and its new Portal to Progress. This evening an associate asked me if I could write a comprehensive article about what Newsviners might think about this refurbished site. At first I was struck with pride at having been asked. On second thought I began to fear the return of my old nemesis; writer's block any time I was asked to produce a special item. On further reflection I began to realize I owed it to Newsviners to do my best to represent what I felt would be their views of the new site. Thinking even farther down the line I began to question why anyone would think that Newsviners would have a viewpoint that differed greatly from Joe/Jane Reader as they surfed along and came upon the site. There is a difference.

How are Newsviners different? They are different because they spend much of their time within a community that has grown and developed because they felt a need for something more in a News Site than the standard fare. They also had developed a stand off position vis-à-vis Main Stream Media (MSM) and the growing establishment of Citizen Journalists (CJs). They had built a wall of distrust or disaffection with MSM that precluded them from participatory contributions to the established publishing sites. They had lived a period of learning and enlightenment that carried them far beyond the normal give and take of social news sites but left them wondering for a way to proceed in this new world of on line news, community and existence.

Along comes MSNBC.com and its new interface with the world. Finally an MSM organization willing to accept the incursion of CJs. Finally the best of both worlds given an opportunity to join forces for the benefit of all. It is in this light that I now recommend MSNBC.com to all my Friends and friends at Newsvine. AND to all those would be CJs who are chomping at the bit to participate in a meaningful way on a fully functional Internet News Site. MSNBC.com has opened a gate of opportunity for all of us. It has done it in a very sophisticated manner with all the whistles and bells we have all come to appreciate. Where the MSM site lacks direct input, that facility is provided through their Community Page which leads you right to Newsvine.

I see a grand future opening before us. We are now able to direct our destiny and efforts toward the chronicles we so love to inscribe. We can now take advantage of an organized system that brings us before a world wide audience to succeed or learn to accept something less based on our talents and willingness to work. We can be masters of our future through the proper and proficient use of the space provided us by the Newsvine/MSNBC.com group.

I did not spend a lot of time telling about the formatting and utilities available at MSNBC.com. This is due to the fact I recognize the ability of Newsviners to discern the fantastic and elaborate facilities put at our disposal. It is up to us to learn its nooks and crannies and to appreciate the effort that has been put forth to create the site. Thank you MSNBC.com for being here. We appreciate your efforts.

Thanks, Jerry Firman (oldfogey)

Asked and answered

Jennifer Sizemore — Tue, 13 Nov 2007 22:06:00 GMT

A few days ago we asked you to send us your questions for me to answer in a future post. Now that we've rolled out many of our changes, it seems like a good time to do that.

Why wide?

Some of you have noted that the site is "wider." Some of you are glad: That big strip of unused white space that used to go down the right side of the page on your monitors is now used for news. Some of you say that you now have to maximize your browser window to see the full page. And some of you say you're being forced to scroll left to right to see everything.

We have optimized the user experience for a 10x7 and wider experience, which more than 80 percent of our readers use. As technology has progressed, more and more people have complained to us that we're "wasting" the space left over in their browser window. Other "wide" news sites include New York Times, CBS News, ABC News, Washingtonpost.com, Google news, CNN, USA Today. We had heard repeatedly from our users that we needed to catch up with the technology that the vast majority of you are using, and that all of our competition had already adopted.

The thing I like most about it is that we have more space to give you more headlines, more space to display great photos.

What's up with those fly-outs/rollovers?

You hate fly-out menus and now there are more! What is the deal with that rollover function? You love fly-out menus and you're glad they finally work on your Mac!

First: If you hate to roll over a menu and have it "fly out" to show you the headlines in that section, you can turn it off. Below the list of sections in the left-hand news menu is a button called "Disable Fly-out." That will disable the rollover function and let you simply click to the section fronts you're interested in.

Second: We are thinking about developing new functionality for these headline menus. What if you could choose to click to get those lists, rather than triggering them when you roll over? Let us know what you think about that idea.

Where are my current weather conditions?

Current weather conditions are at the top right of your home page. We heard from a lot of you who really missed this content while we were working on it over the weekend, so we hope you like its new more prominent location that doesn't even require you to scroll down the page. If it's not your local weather, the "Local news & weather" section on the home page has a place for you to enter a ZIP code. You can also click "edit" to change your settings.

Where are the market indicators and the "My stocks" functionality?

The Dow Jones indicator is at the top right of the Business section page. We are working overtime to get it into the Business section "slice" on the home page, and to get your personalized stock information back in place on the Business section.

Why does it say five stories are showing when I only see four?

The video or multimedia story in the third column is the fifth story.

What does "pinned" mean and how do I make it work?

The tabbed box in the middle of each section front has a wealth of content that's revealed as you click on each tab. You can choose your favorite tab to be open every time you return to the page. To make it work, with a tab clicked, click on the thumbtack icon, then click again on the tab. Now that tab is "pinned" open.

For more on this, click here for the "Quick guide" and read the Stocks, sports scores, horoscope, lottery item.

Where are the blogs?

We've created a new section called "Community" where we've packaged all the ways you can interact with us and other users, including our new partners at Newsvine.com. This is where the blogs are listed.

The new "Photos" section

Robert Hood — Tue, 13 Nov 2007 17:42:00 GMT

Friday was a great day for news images and multimedia on MSNBC.com. We launched a redesign that puts visuals – slide shows, audio slide shows, videos and Photoblog – front and center in the news we publish each day.

So, you may be wondering how to find your favorite features, like “The Week in Pictures” and “Space shots.” Or perhaps, how to find the latest slide show we’ve published. All of these are easier to find in our redesign.

Where did the “Multimedia” button in the left menu of the site go? The multimedia button has been renamed “Photos.” The “Photos” front was redesigned to help you find more of the images, audio slide shows and original video that interest you through thumbnail images and organization into topics.

Where can I find the most recent slide shows MSNBC.com has published? Check out the “Photos” tab in the “Explore” section of MSNBC.com’s redesigned cover. Also, as you scroll down the page, you’ll see various topics of news, and each one has a “multimedia” column to show you the latest videos, slide shows and interactives. In addition, the newest slide shows are also available on the "Photos" page, at the "Top slide shows" tab.

Where can I find my favorite features, like “The Week in Pictures,” “The Week in Sports Pictures” and “Animal Tracks”? A great way to find these is through our “fly out” menu, shown below. You activate the menu by hovering your mouse over the "Photos" button in the left menu of the site. Or check out the “News photos” section for “The Week in Pictures,” The “Sports photos” section for “The Week in Sports Pictures,” the "Entertainment photos" section for "Celebrity Sightings," and the “More photos” section for “Animal Tracks.”

Where can I find MSNBC.com’s Photoblog? Click on the “Photos” front page, and find the “Participate” tab. You’ll find Photoblog, FirstPerson galleries of pictures shot by you, and Frequently Asked Questions.

Designs we left behind

Ashley Wells — Mon, 12 Nov 2007 22:45:00 GMT

Admit it. You saw our new homepage and it lived up to your wildest fantasies about online news presentation. Me, too. Okay, maybe—maybe—two, three people tops will say ‘what were they thinking?!’ Rest assured we were thinking. For about two years. Here’s how it started.

The gentle evolution

This is our existing design, just wider. And with a rotating video area in the top right. And collapsible links in the center. And icons. And time stamps. Nothing terribly exciting. User groups liked it. It felt safe. But they didn’t love it. Neither did we.

Culture shock

Don’t tell our editors, but I really just designed this one to scare them. Or, ehm, ‘challenge assumptions.’ Did we really need navigation on the left? Why not scroll visual stories sideways? How about we then just list stories? Let readers dial the amount of detail up or down and sort them by importance, number of related videos, user ratings, number of comments, time published, etc? Kinda like news search on steroids.

Nobody ran screaming. They had questions. But good ones. Turns out some of them had even stranger ideas. So we put a more colorful version of the one above in front of user groups with a few more measured options.

Sample platter

User groups can be tough. They debate shades of blue. Ads drive ‘em crazy. But they all agree on one thing: Put the date at the top of the page. Done!

Our first concept was just too complicated. So many options, so little time. The second, with its big rotating top stories, did better. But it didn’t offer enough variety. The last one pushed a video clipping feature at the top—a big ol’ box of video. They weren’t buying it. Turns out news video is often an impulse item.

All these users really wanted from us was simplicity. At-a-glance top stories. Interesting pictures. An easy to find sports section. ‘Tell me what’s important, but give me options to decide on my own.’ Hm. So we don’t have to re-invent ourselves? Like into a social news site? Or one that moves instead of scrolls? Just live up to our potential by doing we what we already do, but better? If you say so …

Closer

I started this one on a plane with some help from Curious George sitting next to me. “I don’t like type on photos.” Neither do our photo editors. Let’s start with that. Then add flexible layouts. That way we can re-mix the news as it changes. “And you can skip all of that entertainment fluff,” said George. Whoa, Hoss. It helps pay the bills. Beside, everyone has different tastes. My wife might put entertainment up high. What if I let her do that and help George pretend he only reads weighty world news? So I sketched out a series of strips. Move buttons. Resize buttons. And headlines bundled with video, multimedia and in-depth topics. Yeah, that might work.

Back to user groups. They studied the new sketch versus the current site. Chins were stroked. Brows furrowed. Silence. They were torn. That’s a good sign, because the site you’ve already got always wins with these people. But not this time. They noticed the top layout powered by actual humans. And the resizeable, moveable strips. And more multimedia. Some—no, most—began to favor the new one. Not quite perfect. Not yet.

Outsourcing

It helps to have design buddies. In this case, we called on Cameron Moll, Greg Storey and JD Hooge to clean up our latest sketch. Solve this problem. Keep that. Make this work. Explore. Each influenced our final design. Along the way, we landed on a humble new lowercase logo and peacock-inspired color spectrum. Professional, but friendly. By now you know that below is where we ended up. Where to next? Let’s discuss …

Ashley Wells is msnbc.com's Creative Director and the design lead of the redesign project

Now it can be told

Hans Bjordahl — Mon, 12 Nov 2007 16:38:00 GMT

Not to be a stick in the mud, but when this blog launched a week in advance of our redesign rollout, I was wary of the idea. Why? Because when it comes to large, complex technology projects, the words "coming soon" may be the two most dangerous words in the English language.

Now that "coming soon" has turned into "now launched," I can breathe a cautious sigh of relief and let you in on a dirty little secret of large software development projects: They can sometimes go sideways in the late stages in the most unforeseen, horrible and completely absurd ways. Such as:

That one “last little fix” you rushed to get in late turns out to break something considerably more important, like headlines rendering.
You discover a performance issue that only manifests itself during an “extreme traffic” news event that, predictably enough, erupts moments after rollout (and yes, we are keeping a wary eye on Pakistan).
An intense discussion over whether denying a late design change request amounts to a "nit no one will notice anyway" or "the usability apocalypse" turns into a conference-room-clearing chair fight.
That one “last little task” you thought was going to take about half a day to complete turns out to take a million billion years.
Something breaks on the live site and every group involved looks at each other and says, “I thought you were testing that.”
An asteroid hits the server farm.

All the above are strictly hypothetical, because this project went off flawlessly. That’s my story and I’m sticking to it.

Hans Bjordahl is Group Manager of the Site Development team at msnbc.com and co-director of the redesign project.

Welcome, and a quick guide

Jennifer Sizemore — Mon, 12 Nov 2007 07:36:00 GMT

Welcome to the new msnbc.com. We are thrilled to have you wake up Monday morning to the new look and functionality that we've spent more than a year working on. We rolled out over the weekend.

Please click here to read our introductory message.

And please click here to take a tour of the new site.

If you want to read more of what's going on behind the scenes, click here for the main blog page.

Here is a quick guide to favorites and new features:

Local news and weather

Directly below the tabbed box is a slice of the home page devoted to your local report. This is much more prominent placement than its former spot in a box low on the right side of the page. We knew this content was hugely important to you, and more proof of that came over the weekend while it was still under construction. Sorry for the delay! If you already had personalized, don't worry -- we didn't forget you. If you had not set preferences, you'll see an invitation to enter your ZIP code.

Stocks, sports scores, horoscope, lottery

Of course, you still can keep your portfolio and sports scores personalized. We've retained your settings. On the home page, click on the tab that says "My news." Your stocks and sports are there, as well as a second opportunity to personalize weather (many of us like to keep an eye on the weather in our hometowns, our parents' cities, etc.), and lottery and horoscope. You can use the "pin this" option on that tab, and it will be open to that content each time you visit.

Games and comics

You can find them as you always have. There are links in several places: On the home page at the bottom of the news menu, there are shortcuts. Also, in the left-hand news menu of the home page, if you click on Entertainment you will find links. Same thing if you click Community. You can also click to the Entertainment front and find them in that news menu. Soon, on the Entertainment section front there will be links in the tabbed box.

Section names

We have re-organized the site to make it more logical. We have named sections simply what they are, rather than come up with cute names, in an effort to be as clear as possible. So, Peculiar Postings is now Weird news. Also, it's important that msnbc.com content be accessible by our own site search, as well as other search engines, and this helps in that area too.

The Week in Pictures/slide shows

We have named our photojournalism section "Photos." You'll find that under "Browse" in the left-hand news menu. In that section, you'll find all of your favorite slide shows and other photo features. You can also look at a selection of slide shows in the "Photos" tab in the tabbed box on the home page.

Community

This is a new section for us and gives you a place to get involved with the community on Newsvine.com, the community-driven news site that is now a part of the msnbc.com family. Here, you'll also find links to blogs (including "Clicked," which many of you have been looking for), message boards and FirstPerson, where you can upload your images and video so your report can be a part of every breaking story. The asked-for Most Popular page can also be found here.

Customization options

On every section front you'll see tabbed boxes that allow you to use the "pin this" feature to have that window open each time you return to the page. Farther down the page, you can use the arrows to put the topical sections in your preferred order, and you can set them to display the amount of content you prefer. Those settings will stay with you as well.

Hotmail

Many of you have asked where the button to your Hotmail account is. It's a link at the top right of the page, near the Search box, called "Mail." Its new name, Windows Live Mail, was just too long to fit in the space.