We're Redesigning MIX Online, By Design
Sep 02, 2009 In News By Nishant KotharyWhen we launched MIX Online a year ago, we didn't expect that the initial design would be around forever. Our main goals were to test the site's market viability and discover what worked and what didn't — we knew we'd be ready for a redesign within the first year.
We've learned much about our community and business since launch, and we're excited to present MIX Online in a very different way going forward.
So, what changes should you expect? Glad you asked.
A Better Information Architecture
As it stands, MIX Online is designed around the notion of "issues" (similar to magazine issues). Each issue involves a scenario such as Microformats or Data Visualization, and consists of an open-sourced lab and two articles written by industry experts. We're moving away from this approach.
In the new design, we'll let articles and opinions flow freely and give them adequate real estate. We'll also clarify the relationship between our site and the annual MIX Conference web site (they're different!), which has been confusing to some readers. You'll see a better overall grid, a more flexible layout for articles, organization of the lab section, common chrome, and more.
The short story? Better IA across the board.
Colors that Play Well Together
The color of the current design is its most applauded, and most criticized, element. Some people love the color schemes; others point out that the site is difficult to read — either because our colors don't downgrade well in low battery situations or on older displays, or because of general contrast issues.
Nailing color harmony across the site to maximize readability and viewing pleasure is one of our topmost goals for the redesign.
Easy-to-Read Typography
While color plays a big part in making content readable, the key to excelling in this area is the application of sound typographic principles; some even say that Web Design is 95% Typography.
The current design uses strong typographic grids, adequate leading, variances in level headings, and so on — but there's always room for improvement. With the redesign, we'll adhere strictly to a predictable vertical rhythm and aim for larger type, better contrast, appropriate use of different typefaces, better font stacks, and possibly sIFR.
Maintainable & Extensible Code
We built the site on a shoestring budget last year, and one of the unfortunate side effects was a shaky transition from design to code. As I've mentioned in a few presentations (skip to 42m45s), the markup and CSS delivered to us by the agency we hired was pretty bad.
The ultimate success of a web site relies on the quality, maintainability and extensibility of its markup and CSS. Good code makes updating the site and introducing new features — something that is very tedious now — natural and easy.
With the new release, we hope to get a codebase that finally puts redundant and overly-specific classes, divitis, gratuitous use of non-semantic markup, and other gag-inducing markup faux pas to rest, once and for all.
What Would You Like to See?
So, that's the gist of what we're planning right now. Keep in mind that these are preliminary thoughts that will likely evolve as we get deeper into the redesign process. We'll keep you posted on how things go, but in the meantime, what are your thoughts? Are we targeting the right areas? Got any features/suggestions that you want to share? Feel free to give us your feedback through twitter, too.



Follow the Conversation
4 Comments so far. You should leave one, too.
Certainly, more contrast is needed. I (on MacOSX 10.5.6, using Webkit latest nightly) couldn’t see the comment typing space until I clicked where I suspected it might be: then the highlighted border appeared. The green (both light and darker) on green background are unfriendly.
IMHO and SOME typographers, italics should be avoided as a tad difficult to read, but I know some OTHER typographers disagree.
And I’d like to see the search at the top.
But, who am I? So there.
Agree on all counts. :-)
I really like the colorful navigation bar but I think the saturation on various areas needs to be toned down. For example, bright white on dark green background is difficult to read for long periods of time: I’d suggest using a medium-light green as your body text so it’s less of a stark contrast to the dark green background.
Also, don’t forget to choose the right sizes, especially when you buy yourhttp://www.dresses4dancing.com/index.php?main_page=index&cPath=9, from an online store. Normally, most of the stores provide a size chart for you, so just go by it when you are choosing the right size. If you cannot find your exact size, then you’d better buy the next size up, for it is usually easier to have your