After three intense months, we’re finally ready to reintroduce ourselves through an all-up redesign. MIX Online 2.0 marks the culmination of a year-long exploration of the MIX brand, business and values.

As an industry, the Web is still struggling to find a comfortable place for design. Those who’ve made it a deliberate part of the web development process are few and far apart.

Unlike any other medium, the Web is actually alive. It's a representation of our collective consciousness—some of it frozen in time, some in real-time, and some ahead of its time. A few enlightened individuals daresay that the Web is actually synonymous with culture. Is it any surprise that we’re finding it difficult to design for it, much less articulate its value and tie it back to the bottom-line?

Uncertainty is always nearby in any field that's in its infancy. While this Web thing raises our eyebrows from time to time, one certainty that defies all collective uncertainties is that the Web is the future, and good design is destined to be at the center of that future. We can’t prove it, but those of us who’re a part of it sure can feel it.

So, that’s what we’re doing today. We’re indulging our faith in that feeling. A little over a year after turning the MIX Online page to its next chapter and writing about it in great detail, we’ve redesigned our site again to reflect our brand, our business and our values. We’re ecstatic to introduce you to the future of our community.

A Quick Refresher

Some of you may remember when we announced we were going to embark on a redesign, a few months ago. The old design suffered from a few cosmetic dysfunctions, most notably color contrast issues and readability problems. But those problems are easily fixed through CSS, without a major overhaul.

Information architecture (IA), on the other hand—the kind of information represented across the site and how it is laid out—isn’t easily changed. IA on the Web is synonymous with the business model, especially when you’re in the content business. Changing business models overnight isn’t easy or even possible. Over the last year, we realized that our content is as important to our business as our labs, but the site we released last year wasn’t designed with that in mind. Among other things, this redesign brings our writings—expert articles, heartfelt opinions and our new lab notes—into the foreground. We figured that while we were in there, we'd just fix all the other little problems, too.

The 5-minute Tour

So, what’s new?

Information Architecture

The IA now reflects our business priorities, without compromising customer experience. Articles and Opinions are now all neatly arranged on the Writings bookshelf. We’ve also added a new column called Lab Notes, to let our designers and developers disseminate technical experiences and shenanigans. The writings section is now a one-stop shop for content.

We also added an Events section to the site. This should end the confusion about whether MIX is an event or a community. It’s both. In the events section, you’ll find our calendar of events and virtual events (like our MIX 10K Challenges) that we run year-round.

We've also improved layouts for the home and about sections—they prioritize the right information and are more usable.

Visual Design

While you can still sense the same colorful and bold spirit of 1.0, the visual design of the site has changed drastically. I like to think of it as a more mature, grown-up version of the dark, edgy MIX Online that we introduced last year. MIX Online now looks on the outside as it feels on the inside.

Thanks to your great feedback, we were able to refine the typography to work on most platforms—we went with Georgia because it was the safest bet and most malleable across platforms.

The light, textured background puts the focus on content, and makes reading for long periods of time easy. Copy, which is deeply integrated into the layout, is treated as a visual design element that gives the site a "magazine-y" feeling.

The graphic design style is modern, yet classic.

Interaction Design

We kissed the interaction design: simple hover states, large hotspots, SEO-friendly URLs, sensible use of page refreshes vs. AJAX, progressive enhancement with jQuery, and other goodness that gives you the warm fuzzy feeling of being at home on the Web.

The site gives you an occasional nudge when needed, but mostly gets out of your way. Don’t take our word for it, though. Click around and decide for yourself. A good place to start is the finger-licking, preloaded, self-scrolling listing of writings.

Code & Performance

The front-end code is marked up from scratch, and a delight to maintain. The CSS is lean, at 500-ish lines for the entire site. The markup is pragmatic, semantic, and forward compatible with an HTML5 migration—the id names match the new structural tags. We’ve also rewritten the logic for various pages, which should make it easier to find content.

We’re still running our trusty ol’ version of Oxite in a highly customized form.

And then some

Apart from the above highlights, there are a few other features you should check out:

Incarnate

We’re releasing Incarnate, a unified avatar fetching service, today. Think Gravatar, but for a bunch of services like Facebook, Twitter and so on. Of course, our comment forms have been incarnated. Try one out.

Goodbye IE6

Yep, we’re no longer going to guarantee parity for IE6 users. As much as we’d like to satiate everyone, the cost of supporting our tiny IE6 population is simply too high.

Most features will still work in IE6, but if you see a paragraph floating in space, it might be time to upgrade. Contact us and we’ll even help you do it.

RSS Galore

If you like to consume your content on an RSS reader, you’ll find that we’ve enabled a wide permutation of feeds. But we recommend the master feed.

You say Goodbye, I say Hello

There’s always much to be learned from an honestly articulated case study, and that’s what we plan on doing: the creative team that worked on MIX Online 2.0 will be contributing articles explaining the process they used at a later date.

But to quickly summarize: Matt, Tiff, Evan and I used a unique process that balanced collaboration and feedback with subject-matter expertise to ensure that the redesign project never fell apart.

It would be irrational for us to think that the site is now perfect—that we’re done. Design—especially software design—is rarely ever done. Our design evolution will continue. And for that, we’re extremely excited, as it indicates that we’ve hit a major milestone.

So, in closing, thank you. For being open to and participating in this change, for being a part of the MIX Online community, and for contributing to it. Bear with us as we iron out the inevitable kinks introduced by such a major redesign (we encourage bug report emails).

Happy holidays and see you in 2010!

Credit Roll

This redesign was the result of an incredible team effort, and I had the pleasure of working with some of the most talented and smartest folks I’ve known in my career. Apart from the MIX Online team, we had the support of a very strong virtual team:

• Matt Brown from ThingsThatAreBrown is the graphical genius behind the front-end. He took the wireframes and turned them into a design that’s a pleasure to look at and interact with. We’ve invited Matt to share his secrets at MIX10. Be sure to check out his session.
• Tiffani Jones from Second and Park has been quietly working as the MIX Online editor for a few months now, and is behind the magical copywriting across the site. She has the rare and uncanny talent of being able to trick users into reading and understanding your business through meticulously designed strings of characters. She’ll be presenting at MIX10, too.
• Evan Sharp from HeaderFooter put on his front-end code ninja hat for us. He took Matt’s comps, sliced them up, and turned them into some of the best and most accurate HTML/CSS templates I’ve ever seen. I highly recommend right-click > view source. Best. Learning. Tool. Ever.
• Big thanks to Michael Duggan, a typographer on the Microsoft team who is responsible for introducing Verdana, Georgia and other fonts to the world, for his insightful advice during our typography design phase. A cognitive psychologist on his team team, Kevin Larson, will be presenting a fascinating session at MIX10.
• Hans Hugli, Joshua Allen & Karsten Januszewski did most of the heavy back-end lifting. Together, we were able to take the site from front-end to back-end in a record 3 weeks!