Back to the home page redesign

At some point this week, it occurred to me that I could redesign the site header as part of the wider site redesign which will soon include, I hope, a home page redesign as well. Here’s one idea I was working on that I like quite a bit, if just for the top (i.e. “above the toolbar”) part of the site. This would appear on the top of all modern (i.e. 2008 and beyond) articles and pages on the site:

The only thing is, we serve ads up there now as well. There are big ads and small ads, and the size of the big ad dictates the size of the header now. But when there’s a big ad, most of the imagery gets blocked out, like this:

With a small ad, more shows through:

So this is nice and all. I briefly considered having it randomly display one of five Windows 7 background images, but then it occurred to me that Microsoft still has a legal department, so I might just use my own image (or images). Or maybe I could get rid of the section badges (those image strips that appear below the toolbar on activity center pages and ID the site section) and use a custom top image for each topic. Maybe.

Anyway, I’ll keep working on it. But I kind of like this style, even with the ads, which I can’t do anything about, sorry.

You can see a live version of this page here. Unfortunately, the vast majority of the served ads are the big version.

Discuss this Article 14

johnbaxter
on Oct 31, 2008
Image is very nice. But it doesn't look like my memory of Dedham from the late 1950s. ;-) (Not that I got down to Dedham all that often from Cambridge.)
WebGuy3000
on Oct 31, 2008
Paul, When I saw the screenshots in this post my reaction was more or less "Gaaahh!," as they're horribly shifted to magenta, which can be a problem with screen captures (there's that color management again). But the actual page you link to is much better. I'm guessing you're going for an "azure' sort of vibe up top, which is good, though I'm not sure what the mountains are meant to convey. Sort of confuses the message for me. (BTW, did anyone else find it curious that MS named their cloud computing initiative after a word that's defined as "the color of a cloudless sky"? Maybe it's just me.) Anyway, here are a couple of totally unsolicited (and probably unwelcome) pieces of advice from a web designer: 1) the page is still way to cluttered, IMO. There is no obvious focus 2) remember that people read in an "F" shaped pattern. They'll read across the top of the page, real a little less far across the next row .down, a little less far across the next row down, and so on. So keep your most important content at the top and on the left. 3) All the copy in the center section doesn't need to be on the home page - moving it to an "About" page will unclutter things and allow you to create some white space and improve focus. 4) To me, the 195px wide rectangles you use for links to featured content are much too big, and limit what you can do graphically with the rest of the page. I'd consider using graphics that were much smaller (like a quarter the height) Otherwise, it's great ;-)
mikegalos@msn.com
on Oct 31, 2008
One little tweak, the shadow on the SuperSite logo is in teal which clashes with the blue sky. It's probably worth redoing it with a transparent gray shadow. I'm not sure how the mountain scene really adds anything to saying "Paul Thurrott", "SuperSite", "Windows" or "Penton Media" It's a nice image but it isn't really adding any branding. On a quick glance, it's too generic and looks like something on a Contoso page.
pthurrott
on Oct 31, 2008
WebGuy3000 ... this is all very welcome,and i agree with all of it. In fact, that's why the home page needs to be replaced. its a mess. thanks for this.
pthurrott
on Oct 31, 2008
John, you know, I actually do have a number of old-time Dedham prints on my walls here at home. Maybe that's an idea.... hmm...
gorath
on Oct 31, 2008
WebGuy, I'm not seeing any magenta shift. Are you still seing it, or has it been fixed?
mikegalos@msn.com
on Oct 31, 2008
WebGuy I'm seeing a bit of magenta on the page itself as well as on the captures but it's way below what most people care about. (And, yes, I'm using a system with a dynamic color correction system - I really am that much of a geek)
Mum
on Oct 31, 2008
"I'm seeing a bit of magenta on the page itself as well as on the captures but it's way below what most people care about." The shift I see is pretty big (in my standards). People might not care about it enough to think about it but that doesn't ever really justify being sloppy. It's all communication and while not quite knowing why people might still leave the site thinking there was something wrong with it. Just like if there was of loads of typos or gif images with "transparency halos".
mikegalos@msn.com
on Oct 31, 2008
Mum, I've found that color balance is VERY specific to the individual. The human brain's color perception center is very complex. Going back to the film days, a lot of people thought Kodachrome gave the most accurate color reproduction. I always found it a bit too warm and preferred Ektachrome. Neither view was right, just a preference based to a large part on the individual brain's color processing center. In reality, no reproduction system, digital or analog, reproduces color totally accurately so all that's left is determining which compromise is percieved as acceptable and that varies wildly with the individual.
BrightrevCarl
on Oct 31, 2008
What ads? Oh wait...(hides AdBlock in his jacket pocket). Yeah, I like it, but those ads for...um...mascara and hairspray...just really, really get in the way. I think you should go with it in spite of all the ads that very much obscure the view.
WebGuy3000
on Oct 31, 2008
In case anyone's actually curious about the color shift I mentioned, here's the deal. It's to do with mismatched embedded color profiles in images. The 3 images at the top of this post (possible_header_.jpg, etc) have embedded sRGB IEC61966-2.1 color profiles. The images, however were obviously created and edited using either a different profile or no profile at all, and then somehow saved with the sRBG profile embedded. This results in a color mismatch if the application displaying the image actually uses the color profile information to render the image. Which is where the rub comes in. Currently, webkit-based browsers are the only ones that respect embedded color profiles. Firefox and IE ignore them completely, so will display the images "correctly." Safari and Google Chrome will show them with a shift because they are applying the sRGB profile to the images. (I was reading the blog in an RSS newsreader which uses webkit to render pages, which is why I saw it shifted.) This behavior isn't "wrong," just unfortunate in the case of images that somehow pick up an incorrect profile somewhere in the workflow. (There are a number of ways this can happen.) Try snagging any of these images and opening them in Photoshop and you will see the color shift as well, since it always respects color profiles. You'll also see that once an incorrect profile is applied to an image it's virtually impossible to ever get the color back to true again. Welcome to my world.
gorath
on Oct 31, 2008
Fascinating, webguy, thanks for clearing that up. Also, good suggestions on the website's design.
dovella
on Oct 31, 2008
Hey Paul, Bye Bye APple in winsupersite ??
beachbum501
on Oct 31, 2008
Hey Paul, I think you should keep the "page badges", those strips under the navigation bar in activity centers. They give a nice UI and atmosphere to the pages. Keep them there! As for the main header image at the top, a background of some sort would look much better than the black of what's there now. Whether there are large or small ads, it will still look good. Keep up the good work, and thanks for all the Windows 7 coverage!

Please or Register to post comments.

IT/Dev Connections

Las Vegas
September 30th - October 4th

Paul ThurottYou'll have the opportunity to experience:
• 120 Technical
Sessions
• Networking with Peers
• Expert Speakers


Come See Paul Thurrott & Mary Jo Foley in Person!

Register Now

Office 365 InfoCenter

Get the latest insight and info from Paul

Read Now!

What I Use