Three Years and a New Design

This week marks the three year anniversary of my Microsoft blog, and to celebrate, I spent some time coming up with a new look; I hope you like it. The prior purple style—while unique to MSDN blogs—was starting to look a little tired. Okay...maybe a lot tired.

Before embarking on any redesign, I fiddle around with a lot of conceptual ideas in Photoshop. I visit other sites for inspiration, and I flip through the design books I keep on my shelves. After I've settled on a concept that I like, I spend time trying to implement it using CSS overrides. You see, the MSDN blog site has around 55 different themes that I can choose from, and frankly, you've probably seen all of them. I can't simply add a new template (like I could if I ran my own Community Server site), so I have to find a base theme that's close to what I'm looking for, then provide custom CSS overrides to achieve the look I'm after. It's a good bit of work. As an aside, our new Expression Web product has a fantastic CSS feature-set, and it made this redesign much easier than in the past.

I'm somewhat surprised that I chose the look that I did, if only because of those "Web 2.0" reflections I have up there in the new header. You know what I'm talking about...it seems like all Web 2.0 sites have a highly polished and reflective surface somewhere on the page. And thank goodness my name doesn't end with "er," or I'd have to drop the "e" and add a different colored "r" to the end of my name...like "Mikr Swanson" or something. Oh...and it'd have to be in beta. Nothing Web 2.0 ever comes out of beta. :-)

Anyway, I hope the new design is a bit more "open," fresh, and readable. I switched to a serif typeface for the body text, because it can run for more than a few inches per line, especially if you have a widescreen monitor. I prefer sites that adapt to my browser width. I also moved the sidebar from the left to the right, updated my photo to something more current, and opened up the line spacing for increased readability.

Let me know what you think.

Comments

• Anonymous
  February 11, 2007
  I like the new look! Very well thought out and I think you succeeded in accomplishing all your objectives. It made for a very easy read.

• Anonymous
  February 11, 2007
  Thank heavens that you updated your photo - the old one looked nothing like you! :) Good job - I know from personal experience how hard it is to find the right overrides to make. One optimization - would be great if there was an easy link from a specific entry page (like this one) back to the home page. There's nowhere obvious to click to return back to /mswanson/default.aspx.

• Anonymous
  February 11, 2007
  Thanks, Tim, and I agree with your desire for a link back to the home page. I tried a few techniques during the design process, but none of them worked. Since you've noticed, I'll have to give it another shot.

• Anonymous
  February 11, 2007
  I love tho color scheme!  Nice work. I'm not sold on the reflections, though. :-)

• Anonymous
  February 11, 2007
  I'm on 1024 width resolution which pushes the main body to 'start' below the right column (think large blank space on 1st page) No doubt there are a few others out there in 1024 land... in portrait mode, or on a tablet pc etc

• Anonymous
  February 12, 2007
  Thanks for the feedback, Grant. I've tested the page in Firefox and IE7 (don't have IE6 around, unfortunately). I can resize the window down to a very small size, and I still can't reproduce the behavior you're describing. Which browser version are you running? And if you contact me via e-mail, I'd love to see a screenshot.

• Anonymous
  February 12, 2007
  Thumbs up on the new look Mike - there's just one bit missing.  Maybe it's just me, but seeing the word 'evangelist' right next to your smiling face makes me think there should be some sort of XAML halo circling your cranium...

• Anonymous
  February 12, 2007
  Hi Mike - yeah definitely IE6 related (but who knows there may be other variables), I have 2 machines on IE6, width 1024 -they both have the 'blank space' problem. I have a third with IE7 - works fine. Come to think of it, I'm pretty sure I've seen this same problem with other blogs.msdn sites. . .so probably not specific to your CSS overrides.

• Anonymous
  February 12, 2007
  Hi Mike, just did a bit of fiddling around with your site in IE6 with the IE Dev Toolbar and changed the Display property from block to inline for the 'content2' DIV. So it seems to be a CSS "display" bug in IE6.

• Anonymous
  February 12, 2007
  William...you're a genius! I had just fired-up Expression Web to do some debugging when I saw your comment. Okay...can a few people with IE6 confirm that the page looks okay now? I did a quick test with IE6, IE7, and Firefox, and everything appears to be correct. And William, if you're still reading this, please drop me a note with the Email link in the upper-right. Thanks!

• Anonymous
  February 12, 2007
  Now looks good in IE6 on my machine. Bug Slayed?

• Anonymous
  February 13, 2007
  The comment has been removed

• Anonymous
  February 14, 2007
  Although I love our Expression Web product, especially for its CSS editing capabilities, I wouldn't consider

• Anonymous
  March 23, 2007
  Regarding the link back to the homepage, it's already built in.  If you go to the header at the top of every page, and move the mouse over Mike Swanson, you'll notice it is a link back to http://blogs.msdn.com/mswanson. Mike, what template did you start with?  Also, it looks like the tag cloud needs some space between the lines.

• Anonymous
  March 23, 2007
  Keith...the link back wasn't built in...I added some scripting to make that work. The base template I'm using is called "Simple - right sidebar". Thanks for the tip about the tag cloud...I thought it looked a bit funny. :)

• Anonymous
  December 04, 2007
  hi when i tried to install the MS office to my computer which has windows XP i recieved this message: there are some changed have been done so the system can't continue the installation,remove the changes and re install