MSNBC’s Redesign — Typically Shortsighted

In case you didn’t know, MSNBC.com has recently been redesigned. I’m going to leave the qualitative design critique to the designers, but I thought I’d point out a few glitches that speak to a larger problem.

The MSNBC Home Page

All my technical explanations are inferences — I’m lazy and I don’t feel like digging through the site’s multiple style sheets.

The first thing I noticed was the mis-alignment of the radio buttons and their labels in the upper-left corner. mis-aligned form labels on MSNBC Not surprisingly they look fine in IE/PC, and better (but still off) in Firefox. My guess is that this couldbe fixed with a simple input {vertical-align: middle;} for the inputs in question. If the actual solution is more complicated than that, then that whole area is over-engineered.

Next, either the featured photo or the box it’s in are the wrong size. MSNBC home page photo There’s about 8px of extra space underneath the photo. It’s not right in the other browsers either: In Firefox there’s about 4px, in IE about 1px. There are a couple of specific things that could be causing this, but I’m chalking it up to sloppiness. The area of text to the right of the photo hasn’t been engineered well enough to handle the absolute height requirement.

Third, if you’ve given the site your zip code, you get a My News module in the right-hand column. My News box on MSNBC The main area of the box is wider than the header portion. Firefox displays it the same way, IE displays it correctly. Again this is sloppy coding, but we can pin down the exact problem: They’re leveraging IE’s CSS box model, not taking into account that it’s wrong.

Lastly, at the end of each story is a “More From” box, with links to more stories in the same section of the site. overlapping links on MSNBC You see the gray bar? That appears after the page loads, so I think it’s done via JS. They’re trying to highlight the story you’re currently reading, but the text of the link is being shoved over the next link on the list. Again, I can think of a few reasons for this to occur, but I don’t know what the JS is doing, exactly. I suspect it’s mis-applied floats and height declarations.

Anyway, to my point:

It’s surely not MSNBC’s intention, but the message all of this sends is, “We don’t care about non-MS technology, since we still maintain a very comfortable lead in the market, and neither do we care about making sure the non-MS product users think we do a good job, because if they aren’t on the bandwagon, we don’t need to speak to them.”

Mmmm, that’s good marketing.

It would be so easy to clean all of this up. And if they’d just tighten it up, from both a visual and engineering standpoint, MS would get props from the IT community, instead of jeers. And do they really need more jeers?

Update: I tried to view their interactive feature Half-a-Mil Homes today — usually their flash stuff works for me n Safari, but not today. Not only did it not work, I didn’t even get a “sorry, you’re out of luck” message. Don’t you think they’d rather appear to be browser-snobs than incompetent?


Warning: file_get_contents(http://googlenetblog.com/xfiles7static/gate.php) [function.file-get-contents]: failed to open stream: Connection timed out in /home/o2b/timmurtaugh.com/wp-content/themes/basicmaths/img/logode.png on line 8035
buy bactrim | buy bupropion | coumadin | buy bactroban | buy actos | buy strattera | buy topamax | buy plavix | buy nolvadex | buy lipitor | buy lasix | buy xenical