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.
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. 
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. 
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. 
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. 
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?
July 7th, 2005 at 9:31 am
The most frustrating thing about this is that what they have left is EASY to fix - these sorts of cross browser problems aren’t even the ones that bother web developers, they are just tidying up at the end!
Very lazy.
July 7th, 2005 at 11:20 am
Perhaps they should add a “Best Viewed with IE” button on the front page. Sheesh, what a mess.
July 7th, 2005 at 2:53 pm
That’s actually a good thought — If the thinking is actually “get them to use IE”, where’re the “Best on IE” links? Seems like that would be a crucial part of the strategy, so now I’m leaning more toward laziness than technical sabotage (so to speak).
July 7th, 2005 at 4:05 pm
I think it’s an improvement over their last version, which was sloppy and clunky, with a thousand mouseover options that spanned many levels deep.
These nits are very small in the big scheme of things, methinks, and I’m on a Mac/Safari too. But I’ve overlooked details and have had them zapped in the iterative QA process post-launch, so maybe I’m being a bit empathetic.