To date, the Maryland Institue College of Art redesign has been one of my favorite projects ever. Here’s a look at some of the intricacies behind this new site.

The initial concept behind this design is driven by leading with the artwork the school produces. More than the just a large element on the home page, the artwork does more than just take up a significant amount space; it acts as a filter that starts to permeate the site-wide experience. Choosing a piece from the home page changes the tone through the colors of just about everything on the site, from links to background colors. This choice followed you as you navigate to the sub-pages. Think of it as a subtle user-driven art-direction.

Technically, this proved more challenging than you would think. For qualities like link and background colors, on-the-fly color switching is a piece of cake. Throw sIFR into the mix, dynamically generated colors chosen by administrators of an XML-based content management system, and the ability to do this not 1 but 4 times, and it’s a different ball game.

To accomplish this, there are 4 custom stylesheets on top of the base stylesheet, all loaded into the page. JavaScript runs through and disables the 3 that aren’t shown. As a user chooses a piece of artwork, JavaScript then disables the current custom stylesheet and enables the appropriate one, and the correct styles are shown. That’s the first piece of the puzzle.

But what about elements that have been replaced on the client-side like headlines? Because those elements are now Flash, they would need to re-render in order for the color change to take effect. This is deceivingly easy too. In sIFR3, there’s a largely undocumented method named changeCSS(). Run that method, and all the magic that needs to happen just happens. I won’t spoil it any more for you; if you’re super-curious, feel free to look through the JavaScript file.

There’s one last component that proved a bit tricky. Have a look at this image:

Notice anything particular? That’s right; the background behind the logo is slightly transparent, allowing you to see through to the artwork behind it. That’s a cinch; we’ll cut the logo as a semi-transparent PNG file, and be done with it.

We can do that with the borders surrounding the logo too. Or can we? Remember, these colors have to change on the fly, sometimes as often as several times a day. That means an administrator would have to manually cut a new PNG file every time the artwork updates. From a production and workflow standpoint, that’s a huge hurdle. (Not to mention the fact that color matching a PNG file to fade into a solid color is an art form in itself.)

To make life easy for site administrators—I can’t stress enough how much I resisted the urge to say “webmasters”—you’ll see that the borders are actually an inconspicuous Flash file. This file accepts a hex value and programatically draws the border with the correct transparency in the right spots. Because you can create Flash files with transparent backgrounds, some simple CSS positioning achieves the effect we’re looking for.

Hope you enjoyed this insiders’ look!