New MSN.com Homepage


We released the new MSN.com Homepage yesterday to match the new MSN Search release. I work on the Homepage team and wanted to give my thoughts. The great thing about this release was this was driven solely by customer requirements. All we wanted to do was make the page better.

Compared to the old page, the new version is much faster. The page is lighter (about 2/3rds of what the old page was). We have also gone from a table based layout to a CSS powered layout. Granted, we were not able to hit complete compliance with standards. We still have some validation errors (about 130, the last time i checked) in the W3C Validator. We still have a couple of accessibility issues. All we ask for is for people to look at the page as a work in progress.

I have seen some feedback that we should not have declared the doctype as XHTML Strict. If anything, we are closer to HTML 4.01. I agree. But our target is to get to XHTML strict. We realize we are not at a point where we can say we have achieved our goal. We will be working hard to get to that goal. Let us know how we are doing. Where are we slipping up? What do we need to fix? We are listening.

By the way, we also did a new release of the My MSN page today to match the homepage’s lighter theme. You would only get this lighter theme if you had not selected your own theme.

– Venkat

This posting is provided “AS IS” with no warranties, and confers no rights.


Comments (103)

  1. Mr. Dew says:

    I would like to see currency convertors, it’d be great if I can type "US$19 in euros" and get results.

    The design itself is good but I would prefer if it is less cluttered. There are so many links all around, it makes me think if it is really neccesary

  2. Peter O says:

    <p>Well, congrats on having the desire to use CSS and XHTML. It must be very frustrating as a developer to have to let a product go live when you are so close to having totally valid code! I know I wouldn’t like that…</p>

    <p>Really I see the best outcome of this is that now there are people inside MS who are going to care about standards compliance. I think I speak for every web developer out there when I say: we need the next version of IE to be standards compliant if the dream of XHTML development is to come true. I haven’t looked at your code but I’m willing to bet that in writing this new page, you had to read about many of IE’s quirks. This will help you understand why I, for example, increase my time estimate for any web development by 20-30%, just for time spent tracking IE bugs. Please, please do what you can to impart the importance of this to them. I know that Microsoft has zero business interest in making things standards compliant (web devs will always be forced to accommodate for MS’ failings) but just on a developer-to-developer level, maybe there can be some sympathy for the struggle taking place here.</p>

  3. Micheal P says:

    Congrats on all the hard work.

    Just my 2 cents on http://www.msn.com/ :

    [1] The left navigation transition with the blue background seems ‘abrupt’ and ‘hard’. Maybe putting a little more padding-left would help and/or making the left navigation background (light blue) more ‘fade’ into the dark blue background.

    [2] I might actually perfer the ‘Simple White’ theme over the ‘Classic Blue’ if the 100% width header blue looked more like what is found at http://beta.search.msn.com/results.aspx

    [3] The fonts are just slightly too small. Maybe making the font just a little bigger, not much, but just a little would be nice.

    [4] There is a lot of blue on the site. Now this isn’t a problem for me, since blue is my favorite color – but I could see the benefit of making some of the heading a differ color (but then again, don’t go craze and do too many different colors).

    [5] I GREATLY appreciate that the site is fixed width. This is a major plus to me.

    Listed below are sites to look at for inspiration/resources:

    http://cssvault.com/gallery.php

    http://www.stopdesign.com/

    http://www.mezzoblue.com/

    Again, the site is wonderful and if just little bit more tweeking was done to the look/feel of the site – I believe the site would be steller (please don’t take this comment to imply that not enough hard work was done with the current look/feel, I certainly know how difficult it can be to make look/feel changes in a big organization with _everyone_ wanting to add their 2 cents like I am in this comment).

    Best regards,

    Micheal

  4. Micheal P says:

    Just a few more things …

    The more I look at the new http://www.msn.com site the more I like the ‘Simple White’ theme.

    [1] Something does need to be done with the left navigation, it just doesn’t seem to ‘fit’ in to me.

    [2] And if all the callout boxes had a light background color applied to offset it from the white background (e.g. like the SHOPPING callout box, but a slightly lighter blue color), that would make a huge difference for the better.

    [3] Last, I mentioned this before but I think i’ll mention it again, when in the ‘Simple White’ theme – the top blue bar running 100% wide in my option is just a little too light (a slightly darker shade of blue might have a more dramatic effect, or maybe even using that blue background image found on the web search results page).

    But again, this looks great and I can’t tell you how many people you are making happy by making the site CSS based. That is a major milestone and many people have noticed and are appreciative.

    Keep up the awesome work.

    Best regards,

    Micheal

    P.S. What do you guys use as a Content Management System for http://www.msn.com and even http://www.microsoft.com?

  5. Matt says:

    Can you try finding out why it doesn’t work in Opera 8.00 beta 1? I don’t have 7.54 to try right now, unfortunately.

    Also, why are you going for XHTML Strict when you can’t serve application/xml+xhtml to IE?

  6. Jens says:

    >> But our target is to get to XHTML strict.

    now that’s interesting! And you also target to use the correct mime type for that? So your goal is to deny internet explorer users access to the site?

    Congratiulations and don’t forget to provide a link for visitors to download Firefox

  7. John Serris says:

    First up I just have to say that you got some seriously big %$#@$ for admitting that you are one of the guys working on this. "Smithers, release the hounds!" 😉 Seriously though, congratulations to MS for even attempting something like this.

    I assume most of the validation errors are due to some legacy CMS? If so, can you talk a little about this and what you are planning to do to fix it?

  8. Why was your target XHTML Strict?

  9. Neeraj says:

    Great work but the thing i feel most uncomfortable is begining & end of main block. No border or shades ? It just does not do justice to the efforts you guys put in.

  10. melop says:

    Happy to see msn.com become web standard.

    Great work, and only 8 validation errors left

    in my previous check.

    The problem seems to be the "target" attribute.

    Of course it’s useful but they dont include it in

    the XHTML Strict Doc type. I suggest that you should use Transitional instead for better compatibility. Or, you have to use javascript to open new windows.

    My method is :

    function fnOpenNewWnd(objLink)

    {

    window.open(objLink.href, ….);

    return false;

    }

    <a href="somepage.aspx" title="open in new wnd" onclick="return fnOpenNewWnd(this)">click</a>

  11. victor says:

    Cool improvements…

  12. It is nice to see that you actually care about the quality of you webpages. The image search still has a good deal of validation errors and you will want to bug the ASP.NET team about VCARD_NAME="SearchText".

    By the way, please do not open links in new windows. Doing so breaks the back button.

  13. I have not had time to reply to all the comments yet. I will post a reply soon. Please do keep the comments coming.

  14. Nick Berardi says:

    You are about to get /.ed my friend

  15. Kelsey says:

    This cant be true, MSN XHTML CSS, all in the same breath. Please keep up the good work. I am sure IE is to follow 🙂

  16. Spy der Mann says:

    Drop proprietary attributes! When you do, you’ll get a compliment by all the web designers in the world.

  17. murf says:

    great looking site… did you use asp.net 2.0?

  18. DMB says:

    The major suckage of the new page design is that it’s fixed width. It uses about 1/3rd of the sreen of my laptop. Now granted, my laptop has a very high resolution display, but there’s no excuse to design the front page with fixed width. It’s year 2005 out there, no one likes fixed width design anymore. Innovate, don’t just sit there and copy Yahoo.

  19. Anonymous says:

    It’s about time, the page became compliant. Are you sure you won’t get fired? My eyes see the web page, but my mind refuses to comprehend.

  20. Eric says:

    Melop stated, "I suggest that you should use Transitional instead for better compatibility."

    I strongly disagree. You do not downgrade the page simply because an outdated method doesn’t work. Instead, use <a href="page.html" rel="external">Link</a> and DOM to cycle through those statements.

  21. Major Dormo says:

    Who cares? Too much stuff besides. I HOPE you don’t expect people to read 2,500 words on a page. Is its purpose filler? Like a desk with so much stuff on it you can’t see anything, APPEARS to be a busy desk, but is only a front for a slacker?

  22. Another highly compatible way to handle the "target" attribute is to use the "rel" attribute by, let’s say:

    <a href="somepage.asp" rel="external">click</a>

    and use some global .js file that will take care of these on each page:

    function manageLinksExternal()

    {

    if (!document.getElementsByTagName) return;

    var anchors = document.getElementsByTagName("a");

    for (var i = 0; i < anchors.length; i++)

    {

    var anchor = anchors[i];

    if (anchor.getAttribute("href") &&

    anchor.getAttribute("rel") == "external")

    {

    anchor.target = "_blank";

    }

    }

    }

    if (window.addEventListener)

    {

    window.addEventListener("load", manageLinksExternal, false);

    }

    else if (window.attachEvent)

    {

    window.attachEvent("onload", manageLinksExternal);

    }

  23. Justin Paine says:

    I came across some bugs, I will send a link to a screenshot your way as soon as I get home from work.

    Great work though, a huge leap in the right direction.

  24. Mark says:

    How badly does it suck to work around the !@#$%^&* MS box model? Do me a favor. Walk down the hall and kick those guys in the nuts for me for all the hours and hours and hours of unpaid labor I’ve wasted trying to make my layouts consistant across all browsers.

  25. Sean says:

    I have to say, freaking awesome that you’re joining the 21st century of web design 😉 As someone else pointed out, CSS + IE aren’t exactly best friends. I imagine you had to discover a lot of the CSS bugs in IE for yourself and find workarounds, something that many of us web designers these days are familiar with. Maybe this will provide some incentive to the IE team to make IE7 more compliant! Well, one can always hope, I guess.

    Both the color options could benefit from some more striking contrast and perhaps some borders between the sections (header, sidebar, content). I am a big fan of blue as well but I think it may be a bit overdone on the new site.

    But I do think it looks a lot better overall. Congrats.

  26. Are you doing an browser detection?

    I can’t get anything but the search on my handheld device.

  27. We dont do any specific browser detection. We do have media tags to help with rendering for handhelds. When you go to the page with a handheld device, you see the search tabs, then the navigation and then the columns. We need to fix that to make sure content appears in a usable order.

  28. porneL says:

    What browsers do you use for testing?

    I’m really glad that there is a movement towards more recent web technologies in Microsoft.

    I hope that will raise importance of decent CSS support in IE and making ASP output valid, semantic HTML.

    I think at this point scripts need most attention. They are lenghty and messy.

    Search field steals focus and I can’t use ("unqualified") keyboard shortcuts in my browser.

    Move scripts to external file and use DOM to create "behavioral style sheet". Moving behavior out of content has same benefits as moving presentation out of content.

  29. archie says:

    Looks slightly blockish, and the text is not very sharp. I’m not sure I like the fixed-width page, but will compare to another view since I use Firefox and don’t know exactly how IE will render text.

  30. R Page says:

    The new MSN homepage completely breaks down in IE 5 for the Mac.

  31. Dave says:

    You might want to check this link for accessibility problems:-

    <a href="http://bobby.watchfire.com/bobby/bobbyServlet?advanced=true&gl=wcag1-aaa&Text=text&line=line&an_errs=an_errs&stealth=Bobby%2F3.3&output=Submit&URL=http%3A//www.msn.com/">Bobby Checker</a>

    Also, on the search page, you have search builder. It isn’t very clear how this works. If you select the ‘Search Terms’ tab, you seem to have the left hand columns (tabs) lined up with the textbox and Add to Search button (after ‘Links to’). It kind of blends and is hard to read. I am using Mozilla Firefox 1.0, but it does it in IE6 too.

    Keep up the good work and give the IE team a kick if they’re browser gives you any jip. 😉

  32. Chris says:

    congratualtions on the new design, very glad to hear that you’ve switched over to a css-based layout and are working towards web standards, this is excellent news. Design wise I feel both styles work well and give people a nice choice.

    Also wonderful to see that the page degrades nicely when you switch the styles off, meaning that those with screen & braille readers etc will still be able to access. If I might make one recommendation, have you thought about having a list of links right near the top (hidden by css by default of course) that allows visitors to jump to the section headings further down the page (i.e. Today on MSN, Money, Shopping etc) so that those surfing without styles can easily and quickly jump the the page’s content, at the moment they have to scroll through all the menus before getting to the page’s main (& actual) content which seems a little off (in that it makes the page’s content seem less important than the link to the other sections). Perhaps a simple ‘skip menus’ link underneath the ‘Why does MSN look like this?’ heading that displays – Just a thought, but one I think that would be appreciated by visitors using accessible technologies.

    (regarding the XHTML strict I think this was the right way to go if you’re working towards it, transitional is there for a reason and you ain’t it if your target is strict :0) good luck with the continuing work, I wish you all the best

  33. TCA says:

    I feel sorry that they would let such an inexperienced coder work on their website.

    I’m 15 and I laugh at your pathetic skills.

    I would have given you helpfull feedback, but you should already know how bad your mistakes are if you were qualified.

  34. ar says:

    Congrats, and good job 🙂

  35. Chris Gray says:

    R Page — Everything breaks IE 5 for the Mac 🙂

    Great job, please add Atom( or RSS) feeds.

    So, when is msnbc.msn.com getting a facelift?

  36. on XHTML, if you stick with 1.0 strict, the mime will work as-is. If you go for xhtml 1.1, then the mime has to change and then you get into IE la-la-land.

    On js, don’t forget to escape the statements with CDATA blocks. Also, the language tag in script is nogood.

    This validates xhtml1.0 strict and xhtml1.1



    <script type="text/javascript">

    //<![CDATA[

    function docrap(){return true;};

    // ]]>

    </script>

    Don’t forget to escape your & to &amp;

    I also recommend fluid layout (no fixed width) with a minimum vewable of 500 for screen, and 100 for handheld)

    from validator.w3org

    Line 1, column 2104: there is no attribute

    "target"

    > get rid of it.

    Line 1, column 2333: end tag for element "A" which is not open

    >Should be lowercase

    Line 1, column 18369: there is no attribute "language"

    …isements</h2><div class="adp"><div><script language="JavaScript">

    > see above

    Line 342, column 119: required attribute "alt" not specified

    …"1" width="1" style="display:none;" /></div></div><div id="alert"><ul class="

    >Should be easy: alt=""

  37. b0b says:

    I liked Microsoft for the usability of their products and *sort-of* cutting edge UI design(Apple wins the UI competition hands down;-))

    After looking at just the search.msn.com page,I’ve changed my opinion. Is the team stuffed with just engineers,NO usability guys around??

    I’d give you a list of UI problems,but NO thanks !! I’ve talked with a couple of smart-a** usability guys at Microsoft,and since they *know* all abt usability,I guess they can figure where they are going wrong here too..;-)

    Peace !!!

    Bob

  38. Andrew says:

    When I resize my ie window (horizontally) while the msn home page is shown, some of the text (classic blue) slowly slides down the page ????

    Neat effect, but not sure it is what you were going for.

    — Andrew

  39. David Naylor says:

    "My eyes see the web page, but my mind refuses to comprehend."

    You said it for me 🙂

    It’s like… I don’t know – the devil giving away candy-floss to little kids? Why you wonder? Maybe MS is awakening to the power of goodwill.

  40. Dave says:

    The Simple White theme should be the default.

    Don’t limit the size of the content to fit in the center of the screen. I paid for all of my monitor so I would like to use all of it.

    It looks great in Firefox!

    http://www.mozilla.org/firefox/

  41. Morten says:

    The green search button on msn.com looks a bit buggy in Opera (7.54). It should be quite easy to fix, as you can do more with form elements in Opera than IE 🙂

  42. Ian Main says:

    Wow..This is a huge step in the right direction. Does anyone else feel the earth moving under their feet?

    It is certainly great to see after all this time the big gun has taken notice and is acting upon it.

    Well done. And please for the love of god don’t stop there, keep going.

  43. Josh Delsman says:

    I think you guys are on the right track, but I think that the design looks a bit too blocky, and it lacks total "web standards".

    Here are a few things I think you guys should do:

    1. I think you should have had a testbed, and kept the design from going live until you were *completely* done with editing. Over the last 24 hours, I have seen minor changes to the site. If I were a regular consumer, and had no understandings of the web development process, I would have clicked off, and wouldn’t have come back for some time.

    2. You should give the site a bit more padding, or make the text a bit smaller. For me, it looks a bit clumpy and smushed together. You may want to incorporate semantics better in the site was well (<h1>, <h2>, <p>, etc.)

    Overall, the site looks okay. I wouldn’t say it’s awesome, but it’s a start. Good job on starting, but I feel like there is a lot more you guys can do to make it better and more user-friendly and efficient.

    Cheers,

    Josh Delsman

    Voxxit Designs

  44. Paul Watson says:

    Re. search page

    I’m not sure about the logic of having an h2 tag near the bottom of the page ("Why does Search look like this?"), with h4 tags above it, and no h1 tags. These should be hierarchical tags. It looks to me like you’ve given that heading an h2 tag to make it stand out when the page is viewed on a browser which doesn’t support the @import method of applying stylesheets. h tags get weighted more heavily by search engines for obvious (and logical) reasons, so you don’t really want the "most important" piece of information on your page being what is effectively an error message.

    Don’t blame me – blame the companies who make search engines and browsers. 😉

  45. Mattias says:

    It makes me glad that Microsoft move towards using standards in their design. It’s about time! :o)

  46. Mattias says:

    I agree with "Mr. Dew". A currency converter would provide a lot of value!

  47. I would like to start with a simple clean homepage with a search box and almost nothing else. No ads. No links to anything.

    Then I would like to add what I want to the page:

    On my list:

    a few stock quotes

    a few rss feeds

    breaking news

    an indicator for my various pop mail accounts

  48. Trad says:

    So does this movement to W3C Standards mean that Microsoft will release its next generation of browser (via longhorn) following CSS and XHTML standards. If so will web designers/developers of the future no longer have to worry about cross browser compatiblity. If so that would be awesome!

  49. Morgan says:

    Greetings,

    As much as I’d love it if you went with a fluid layout, I know from experience how mind-burningly hard it is. (I have an XHTML strict valid, CSS valid page with fluid layout that Firefox and Safari render perfectly, but all versions of IE don’t even show the text of the document, much less all the layout features.)

    I also like how the CSS degrades cleanly when styles are disabled, and that you are shooting for XHTML strict! You rock!

    It looks like most of what’s left could be cleaned up in a single quick edit, fixing the capital ‘A’ close tag for a lower-case ‘a’ start tag (that’d clean up 3 of the remaining 8), change target to be programmatically assigned as described above (a SLICK method, btw(!), but the most complex thing to do in the list), fix the script ‘language’ vs. ‘type’ problem, and adding an ‘alt’ attribute… That shouldn’t take too long!

    I wouldn’t worry about the page-type yet (application/xml+xhtml). Take baby-steps.

    Again, the thanks of a huge number of people for working towards using core standards compliant setups, so that when IE is doing the dogfood thing, it’ll have an internally created page to work carefully against.

    — Morgan

  50. Patrick says:

    As a Safari user, the background colour of the title bar of all of those boxes doesn’t match the background colour of the text titles.

    Also, on a semi-related note: do you have any influence to the Internet Explorer team? It sure would be nice if they released an update to IE to fix the hundreds of CSS rendering issues. As a web developer, it’s always a struggle to get the standards-compliant CSS that works in *every* other browser to work in IE. What’s worse, is that because this browser is so bad at rendering CSS, I make less money on jobs due to all the bloody time I spend having to tweak things for IE.

  51. Rijk says:

    Hi Venkat,

    Congratulations with this redesign.

    In Opera (preferably 8 beta) it is very easy to test the result of the handheld styling. After pressing Shift+F11, the search tabs show on top, and the search field shows at the bottom?

    There are also header and footer elements that force a horizontal scrollbar, as they keep the design using a minimum width of 780 pixels even in handheld mode.

  52. Damo says:

    If you select the "Only from XXXX" in my case "Only from New Zealand" checkbox and then page through the results, it loses the selection and shows results from anywhere.

  53. Free says:

    Great job MSN team! So many worthless and completely subjective comments here – it must be hard to get flamed even when the community likes what you did. Anyway, we already know the site is going to index better, and it’s going to load faster and that’ll save bandwidth $$. What about the handheld CSS though – is the site ready for mobile access? This must be headed in the handheld/mobile direction…

  54. Competition is great.

    If google weren’t there msn would never try to use css or standard conform HTML.

    Lets hope google will offer customizeable styles.

  55. Aaron Tate says:

    Line 1, column 2342: end tag for "a" omitted, but OMITTAG NO was specified

    …Great Deal: MSN 9 Internet Access</A></span></div></div><div class="align2"><

    You may have neglected to close a tag, or perhaps you meant to "self-close" a tag; that is, ending it with "/>" instead of ">".

    Notice the capital A?, make it lower case and one more bug out of the page.

    oh and how about a Firefox banner link? 😀 just kidding.

  56. Ron MacNeil says:

    "Where are we slipping up? What do we need to fix?"

    Aren’t you being paid to know these things? Do your job, Microserf.

  57. Andrew says:

    At least for me, the search input box is great if I want 1 word searches (you guess the word!), but far far far to small for anything normal. I like to be able to see all of what I search for in the search box, please. h-scroll is bad 🙁

  58. r00t says:

    All you who are submitting code should copyright it before submitting, and own a piece of MSN search. Bi-monthly dividends would suffice…

  59. not american says:

    definate improvement, however:

    for the msn page, give me some content that is NOT american.

    traffic reports and news headlines are nice but useless to me as i do not live in america.

  60. It’s hard to believe but MSN actually did something good. They redesigned their site using CSS, and even more than…

  61. melop says:

    It would be nice to add a "Skip to main content"

    link at the beginning of the page.

    Use css to hide it in common browsers. When it is display in older browsers or some mobile phones, users can jump to the main content directly without scrolling down for a mile.

    Also, specify an accesskey such as "1" "2" for the link, so that users can skip to the content they want simply by pressing keys on cellphones.

  62. Man, I hate to say it, but too little, too late. You’re on a sinking ship. You all [Microsoft management] should have listened at the beginning. That’s where you slipped up.

    My bet is on Apple.

    It’s not to be mean, but to be truthful. Hubris infected the newly-wealthy and logic combined with good customer support took a back seat. So, sorry if the truth hurts, but have you seen the stock price of the former, unstoppable giant, Microsoft? Let’s just say that I have said enough. I don’t want to stomp on your creative and thoughtful input. You, Venkatna, really sound like you are trying to make a difference. I just hope Microsoft is paying you enough versus the amount of work you put in.

    Keep up the good work!

  63. Russ says:

    Richard Stanton wrote:

    <i>Man, I hate to say it, but too little, too late. You’re on a sinking ship.</i>

    Microsoft’s a sinking ship, heh? If only MS had a dollar for every time someone (Jobs, Ellison, J. Random Hacker, etc…) proclaimed their impending death.

    Oh… wait… they do.

    😉

  64. Why did you go to XHTML Strict instead of just Transitional which may eliminate some of your problems? And why not link to most of that Javascript externally? It doubles the size of your page content.

  65. hiten says:

    simple white should be the default. it’s beautiful.

  66. dilvie says:

    I’m thrilled that MSN is going to be standards compliant! That’s the best news I’ve heard in a long time. I’d like to know more about the content management. Will you publish a postmortem report when this project is finished? It would make a fascinating read!

    – Eric

  67. You’re bet is on Apple? No offense as I love the iPod, but have you ever seen an Apple in the corporate World? Then again, you haven’t seen the corporate world yet, have you? 🙂

  68. john says:

    please disregard what was said above about using javascript to put in target tags. that sucks just as badly as just writing the targeet attribute into the html. cheers

  69. Jack Stevens says:

    The Search Builder design is confusing: the tab titles displayed in a column on the left look like they are prompts for the text fields, not tabs, since they line up with those fields. This neeeds to be fixed as it is very confusing.

  70. Norma says:

    As said before, stealing keyboard focus is a no-no. Even "End" is stolen.

    Removing underlining from all links is a no-no. I can understand it for menus, but why from all page links. And there is no indication of visited links. You guys seem to contradict extremely well-known sound usability practices for no reason at all (no it doesn’t "look better" without underline and with the same color).

    The page is fixed width. What’s the point of going away with table-based design only to recreated the same monstrosity with CSS. There is horisontal scrolling in small windows and wasted space in maximized window.

    It all looks extremely cheap and ugly. The impression I have from layout is that MSN.com sucks. I am serious, the overall impression is that, which is very different from cnn.com or bbc.co.uk. It’s just the feeling – caused by such details as the left column being too high with wasted white space under the right column and other minor things.

    There is some weird page reflowing (when clicking on "New Iraq attacks kill at least 20" the MSNBC NEWS section drops 100 pixels down (moving everything else).

    I came to msn.com only because of a /. article. I would never ever come there again, because it stinks. It must be completely redone (on the other hand, I am a happy user of the MSN desktop search, but the site is crap).

  71. Davy says:

    I am one of the Slashdot crowd, and I commend you for working towards a Standards-compliant design. Unfortunately, since your boss is MS you will never win full approval in most of the Slashdot crowd. They will criticize you for not using web standards, and then we you do use standards they will criticize on your designer flaws. But I for one appreciate the hard work that you are putting in, and hope that the next version of IE will focus more on following the W3C.

  72. Chris Cox says:

    I just want to say that you’re doing a great job, and that you shouldn’t pay attention to the flames above.

    To all who’ve flamed:

    1. My understanding is that the site was rushed out of beta to release alongside the new search engine. This would make the decision nothing to do with the poor sods who actually do the work, so lay off.

    2. Likewise, the MSN site developers didn’t create IE, and suffer from its foibles as we all do.

    3. While XHTML 1.1 MUST be served as "application/xhtml+xml", XHTML 1.0 MAY be served as "text/html" to support SGML-based parsing.

    4. To the idiot who said "Aren’t you being paid to know these things? Do your job, Microserf." –

    Which part of "driven by customer requirements" did you not understand? Would you rather your feedback went through the usual Chinese Whispers process and got distorted along the way? This is an opportunity to speak directly and candidly to a member of the development team; don’t waste it.

    Next, a little CONSTRUCTIVE feedback:

    I understand that you may, for whatever reason of policy, be forced to open some links in a new window. The DOM-based solutions proposed would be the best workaround, but if at all possible it’s best from accessibility and usability considerations to open in the same window – that choice belongs with the user and is catered to by user agents.

    Accesskeys would be a good idea; the most unobtrusive way of indicating them is to use letters within the link text and underline a la Windows shortcut keys.

  73. MSN is switching to XHTML and CSS? Congratulations. Now if only MSIE had appropriate (and reasonably bug-free) support for XHTML and CSS…

  74. B says:

    It looks and runs like ass.

  75. Anonymous says:

    What if I want to search for something *ON MSN*? I can’t seem to find a search bar for the articles on the actual website. This is incredibly frustrating.

  76. Matt says:

    Still doesn’t work in Opera 8.00b1…

  77. Aankhen says:

    "please disregard what was said above about using javascript to put in target tags. that sucks just as badly as just writing the targeet attribute into the html. cheers"

    Now why would you say that?

  78. nofixed says:

    Anything fixed is wrong. Try with a 120dpi monitor, fonts are too little. On a 21" monitor the page renders in less than 1/2 of screen width. Many have beautiful monitors and video adapters, they can render almost as ink on paper, but webdesigners are abusing fixed. This is valid for PDAs for opposite reasons. Fixed is *wrong* on the web.

  79. mook says:

    i used to have msn as my homepage. now that the search box steals focus i had to change to a different homepage. stealing focus is so annoying.

  80. CN says:

    nofixed:

    It’s even true for PDAs. New, beautiful VGA pocket PCs benefit from proper values. Sites that use them can render in a tremendously good-looking manner, in the cramped space.

  81. bh says:

    it’s boring as hell. whether the old site was compliant or not, i thought it LOOKED GOOD. The 3 dimensional windows/borders, shading, the layout, all of it, made it AN AWESOME looking starting page and I made it my home page. I was shocked and depressed to see the new design – it’s flat and BORING. Very boxy.

    GO BACK TO THE OLD DESIGN!

    By the way – is there somewehre we can find some links or pics of the old archived design just to look at it and reminisce?

  82. Why would you use XHTML on a Microsoft page when IE doesn’t even support it? XHTML only works in IE in tag-soup mode.

    Why not use HTML 4.01 which is supported (although with bugs) by IE6?

    The search button positioning is wrong in Opera 8b1.

    I hope you guys talk to the IE team and tell those motherf…er, nice people to build in support for XHTML 1.0/1.1 and CSS2.

  83. Just a quick thank you and congradulations. It the efforts that people like you working on high profile sites like that and using CSS design that lets us little people convince our clients to go the same way.

    So thanks!

  84. Jon says:

    Beautiful job. Applause all around… This is why you guys get paid the big dollars, you deserve it.

    As a typical Opera fan, I am traditionally supposed to harangue on and on about nitpicky BS. However, I feel you have done such a bang-up job at this redesign, you deserve a round of beer. Go out after work and have another party in celebration of your hard work… remember that some guy from the internet told you to. :coolfish:

  85. Sam Ghods says:

    I agree the design looks unfinished, but I am more than happy to look at it as a work in progress. THANK YOU SO MUCH FOR GOING TO CSS!! And thank you even more for caring about standards!! It’s *so* refreshing to see such a large, profit-driven company put aside time to refine their page in this manner. It’s very Apple/Open Source like/Un-Microsoft like… a very respectable move, that is definitely a step in the right direction. And when you guys make it just as beautiful as the old design, you will help convince stubborn designers that CSS is just as good (even superior) to table-based layouts. Please continue keep it up; it’s fantastic.

    One comment though. The fact that whenever you start typing it automatically goes to the search field irritates me to no end. This is because I use Opera, where the "h" key brings me to the address bar (akin to IE6’s Alt+D). (If you dismiss this by saying that no one uses Opera, even in Firefox, the ‘/’ key starts a Find command, which does not work because it instead sends a forward slash to the search field.) This keeps me from ever actually using the site, much less having it as a home page. Please remove this ‘feature’. Thanks!

  86. Mr2e says:

    The basic font is too small. This is even after I’ve gone into IE controls and asked them to be larger. MSN homepage apears not to respond to user request for font size. It has to be addresable.

  87. Brent Dax says:

    Congratulations on your first steps towards a standards-compliant MSN.com. Clearly you’re working towards fixing the few validation errors that are left; after that, all you have to worry about is source-ordering.

    XHTML Strict is a bold move on your part, and one I applaud you for if you can pull it off. (I usually wimp out and use XHTML Transitional.)

    I don’t mean to needle you guys, but did you ever want to wander down the hall/to the next building/across campus and scream at the IE team? (If you actually *did*, then thank you for fulfilling every CSS designer’s 3am caffeine-fueled fantasy, even if you can’t tell us about it.)

  88. me... says:

    all i have to say is i liked the old one better 🙁

  89. EBONY says:

    YOU NEED TO MAKE YOUR WEBSITE MORE FUN FOR THE CHILDREN SO THAT WAY THE CHILDREN CAN SAY MOMMY OR DADDY CAN YOU BUY THIS ON MSN and that way you will be the most popularest website but now I am on yahoo for an example they have yahooligan tht is fun so make thisa funner more better website than yahoo!:)

    love peace and chicken grease:)***

  90. couple things if they haven’t been said already:

    1) You’re alternating your header tags — not supposed to do that for important reasons. H1-6 isn’t necessarily used to denote visual cues, it’s made for semantic structure in mind… I see quite a few headers that go h1 – h2 – h2 – h1 again. It is in your best interest to fix this — besides, you could style it just as simple with all the embedded divs:

    #header2 h1

    etc. Not to mention I see a jump from h2 to h4 in there.

    2) Lots of divities — you could STILL drop most of your code by using your CSS properly, and limiting the amount of divs in there.

    3) I don’t see the use for some of your hidden headers:

    </code>

    <div id="support">

    <h3 class="hide">

    Contact MSN

    </h3>

    <ul class="type1 align2">

    <li class="first">

    <a href="53.c7664/1??cm=Feedback-PF">

    Feedback</a>

    </li>

    <li>

    <a href="53.b7664/2??cm=Feedback-PF">

    Help</a>

    </li>

    <li>

    <a href="53.a7664/3??cm=Feedback-PF">

    Support</a>

    </li>

    </ul>

    </div>

    </code>

    If needed visually, then regardless that should be a dl, not a ul (which I see a lot of actually).

    In all, it’s an excellent step forward, and your team has done a fantastic job sifting through what was a difficult page to deal with; but I see a need now to step away from the abundant use of divs, semantic coding becomes a priority. CSS is a bit bloated (though the formatting makes it difficult for me to fully critique, even with my editor attempting to format) — but I cannot tell if these issues are because of your teams experience or the CMS system. I blame most on the CMS, but the abundant use of divs makes me question your experience in coding this manner — though you’ll get it with time, as most of us do.

    Design wise, I think most people have touched on it. The search bar is really a little TOO similar to Yahoo — that’s a touchy subject for most professionals; where we begin to question the skill and the originality of the output. While I don’t think it needs the bells and whistles most people can produce – it does feel unfinished (most of this comparably to the unbalanced margins/paddings in your boxes, etc.), and flat. No strong visual color control of the user, weak directing of the eyes by graphics and typography – color is standard MSN. The design, in all, is not much to look over, nor does it interest me to keep reading for more info — but I think it’s plainness limits the amount of suggestions for improvements in many ways, without a total scrap and build.

    I would also say, this is easily a design that could have been elastic or fluid in nature — most of the designs that I still do ‘fixed’ are basically to control advanced high end advanced graphics — this does not fit that criteria. I’d swing over to a more accessible flexible design (even if you create a fixed left and right column, but an elastic width), it would be more enjoyable and pleasing to your users.

    If you want a more indepth critique, you know where to find me:), I’d be glad to help!

  91. MichealP says:

    I notice now that MSN is using the ‘Simple White’ theme as default now. While I prefer this theme over ‘Classic Blue’, there isn’t enough contrast differnce in the ‘Simple White’ theme between text and background color. One thing that the ‘Classic Blue’ theme does well is having a good contrast difference.

    Just my 2 cents.

  92. MichealP says:

    I made a previous comment about how I like the new ‘Simple White’ default theme however it doesn’t have enough contrast.

    I have come across a site (that I believe belongs to Microsoft) that looks absolutely fantastics. It is extremely readable, considering the amount of content that is on the site, AND the site looks good.

    Here is the link:

    http://ninemsn.com

    <a href="http://ninemsn.com">http://ninemsn.com</a>

  93. Absolutely fantastic? Are our design standards getting lower? These are professional places, with professional designers — and I’ve TAUGHT designers who care more about their work.

    This is not meant to be offensive, but that’s not a quality design — much less, it doesn’t hold accessibility in mind. The over abundant use of gradients, the poor vector art imagery…

    I understand that this isn’t meant to be high end productions, but I’ve yet to see any professional design firm, print or web, who would claim that for their portfolio, personal or business.

    Yes I know, it’s just as important under the hood as it is with the paint job — but how do you get that far when it doesn’t sell? There are companies out there who model, excel with design principles in mind… it just baffles me that any of these would be considered fantastic works, and be approved for full production

  94. Jan says:

    you can still compare with the old design

    http://sympatico.msn.ca/

  95. Speedbird says:

    XHTML href compatibility can be solved as simple as this: <a href="http://www.whateverurl.com/&quot; title="" onclick="window.open(this.href);return false;">Go To This Site</a>, STANDARDIZED, clean and simple.

  96. I’m appalled by the new design, seriously. Who cares if you’re not using tables? It’s all about appearance, not what’s underneath the hood. If it looks good AND the code is nice, you haev nothing to worry about… but, this is just hideous…

    I wish MSN could do better. No graphics, no creativity. Total BS.

  97. Frustado says:

    This is horrible. I open internet explorer and start typing an address in the address bar, half way through, it starts filling in the MSN search box. Do I need to switch to a different homepage?