Microsoft MIX is a trade show for emerging Microsoft technologies. It differs from most trade shows by lavishing millions of dollars on parties, scantily clad ladies and a hefty bunch of nerding and talking about nerding, in Vegas. Basically, if you're going to be at a computer software corporate event, this is probably going to be one of the better ones.
So, trying to avoid the £3,000 or so the trip will cost, I'm optimistically entering the MIX08 redesign compo which, in the same vein as Zen Garden, you have to take their html and without touching it recreate the page using your own CSS & images; a valuable lesson on how using clean HTML means you can take any well architected page and completely redesign it with just one style sheet.
There have been some fantastic entries in the gallery so far - my money is on the brilliant MIXos by nate bates.
So, here's how I did it starting from the top:
The logo
I always start with the branding, I normally like to redraw the logo in Illustrator (why does no-one ever have a vector version of their own logo?), this gets me into the brand vibe and means I get transparency and scaleability. This mix logo was an easy one, only four shapes and some text, easily redrawn using a grid.
Layout
Then I had a play with the existing stylesheet to see what could be done with the xHTML elements - as you are not allowed to touch the code you are constricted by the quality of the structure and by the dynamic areas that have to have elastic heights such as the news feeds. After figuring out a rough layout idea, I drew a grid in an illustrator document, to fit into a 960px wide container suitable for 1024px resolutions.
Then I did one of my favourite little tricks, in my web browser I went to the MIX homepage and File > Print > Save page as a PDF. This gives me all the editable text and layout of the current site in a document that illustrator supports natively.
Once open in Illustrator, I tidied the text into blocks and copied them over to my layout document, and positioned them in my grid.
Graphics - First stage
With my layout roughly defined and my logo redrawn, I was starting to get an idea for the look and feel of the page. I worked out a neon colour palette based on the pink of the logo, offset with a black background. I took a load of the cubes from the redrawn logo, coloured them in the new palette and randomly scaled/rotated/postitioned them into a cluster. This would set the theme and the tone of the site.
CSS - First stage
With my framework in place, I had a good base and style to work from, the rest of the job was divided into refinement and build, normally concurrently. First, to sort out the text and the layout. Using the brilliant SKedit html editor on my mac and Expression Web on my pc, I started a project and copied down all the template files and created a new css. I always use css reset, and have a handy snippet that I always use as a base for new sites to clear all the default styles that I have developed over the years, although Yahoo (developer.yahoo.com/yui/reset) and Google (code.google.com/p/blueprintcss) offer resets which are also a very good starting point.
That done, I created a MIX stylesheet containing all my new styles. I set all the text to SegoeUI, serif and set the background to black, and the width to 960px. Using the excellent Firefox extensions Web Developer Toolbar (chrispederick.com) and Firebug (getfirebug.com) and IE developer toolbar - all free and all essential plugins - I laid the divs out using floats/blocks/widths/heights as per my design.
Graphics - Second stage
The black was sitting too heavily, so I lightened it to #555. I also had a flash of inspiration, and decided to go down the 3D route. Rather than firing up Maya (overkill for this project) I decided to use Illustrators 3D Extrude and Rotate filter. It took about an hour to do all the blocks and get them looking just right. Once done, there wasn't enough definition or contrast between the cubes, so I added a large black glow to the shapes.
I used the same technique for the RSS logo so it would fit in better. I also used some of the 3D blocks to make a new register button, Signal image, and for another cluster in the footer.
The design was really starting to take shape, and it was time to look at the layout of the body text and news. Dark background shapes really separated the sections and defined the areas. I used this technique in the navigation bar too. I added some detail with icons and the RSS logo. I also added the new TAO, Signal, blog bling and keynote speakers images.
It was going to be a heavier-weight page than I would normally create with all these images, but I guessed the target audience would be mostly tech savvy and therefore likely to have broadband.
CSS - Second stage
It was time to add all the background images to the stylesheet, and tweak them until they looked like the layout. I set the Participation <P>'s and H3s to display as blocks and to float next to each other, rather than in a list to give it a unique yet elastic layout should new/longer articles are posted. I added more colour and a 1px dotted border to surround and separate elements, and added icons as background images to headers.
I used some underused css tricks such as text-indent to lay the icons out so they wrap well, and font-variant: small-caps to change the Venetian text to look more formal. I then set the :visited, :hover and :active states of the links which can be overlooked, but are vital for usability and it gives a nice bright green flash of confirmation when a link is clicked which looks great on the padded links of the nav bar.
I used quite a lot of transparent PNGs as link backgrounds, with darker versions of the same image on :hover to give a roll-over effect without resorting to javascript.
After a little more polish I checked the CSS using the w3C.org CSS validator and fixed a couple of bugs until it validated, then checked the design on IE 6, IE7, FireFox, Safari, and Opera on Mac & PC. Unsurprisingly, IE6 didn't take a shine to the transparent PNGs and gave them a solid white background. It also had some box model issues and broke the layout. As the developer who built the HTML page hadn't included an IE6 javascript transparent PNG fix, I decided to go down the controversial * html element {} hack which only IE6 uses to set all the background images to none, and narrowed some column widths. This is hardly a perfect solution but it degrades pretty well and looks a damn sight better than it did before. The site also scales pretty well across all browsers without wrecking the layout much - good for accessibility (and for my dad who whacks his text-size up to massive so he doesn't have to use his glasses to browse the web).
I would like to have tidied the CSS and removed some redundant styles, and optimised it a bit more, but it worked, it validated and it was cross-browser compatible and I was running short of time.
Conclusion
To make this competition easier next time round, I would ask that the HTML supplied would include an IE6 javascript transparent PNG fix as mentionned above, dropped the use <br> tags (I had to flatten these using line-height:0;), tried to avoid the overuse of .reStyle classes, and more semantically split up the content and divs (I would have grouped the news and events items into div.newsItem or similar) to give greater control over the page.
Otherwise, it was an interesting and satifying exercise in re-skinning a site, and having spent the last year focussing mostly on XAML/WPF/Silverlight and Flash, it's been great to practice CSS and restriction-free design again. So, best of luck to all the entrants, there are some brilliant redesigns - and who knows, maybe I could meet the winners there - fingers crossed!.