This is actually an old version of danielmall.com. For the latest and greatest, check out the new site.
 

MICA

Over the last year, I’ve had the chance to participate in a wonderful project: the website redesign for the Maryland Institute College of Art. To date, it’s 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. (The idea was that this choice followed you as you navigated to the sub-pages, but this functionality hasn’t made it in to the rest of the site yet. I’m hoping that’s something that gets updated in the near future.) Think of it as a subtle user-driven art-direction. (Look for more writing on this site about this topic shortly.)

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:

The homepage of the new MICA site

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.

There are a few more trinkets like this sprinkled across the site, but I’ll leave it to you to discover them. Happy Cog also has a case study on this project, so mosey on over there when you get a chance for a different perspective.

Hope you enjoyed this insiders’ look!

Comments

Tim Kadlec said:

Congratulations on a sharp looking site! One quick question (and I may be missing something here), why did you end up using Flash for the transparent borders versus using CSS opacity? Was it easier for the "administrators" to adjust the hex value for the swf versus adjusting it for an element in the page?

Posted on March 10, 2009 12:30 PM

Ryan Merrill said:

Great job, Dan. I'm really impressed with all of the functionality and user-driven art direction on the MICA site. HappyCog's combination of CSS, JavaScript and Flash is quite inspirational. I'm glad you guys are pushing what can be done on the Web. Really cool stuff. I hope I can learn a lot from studying how this site works.

How do you plan on having your image choice follow the user to the subpages? How will it remember which image the user chose?

I'm also curious to hear more of your thoughts on user-driven art direction.

Thanks for the insights.

Posted on March 10, 2009 12:34 PM

Dan Mall said:

Tim: I knew I forgot to mention something! CSS opacity would work fine, except that there was an unusual design challenge here. If you look closely at the borders above and below the logo, the borders are actually completely opaque on the outside and only fades to transparency in the middle. The mask that's dynamically drawn in Flash looks something like this.

Were it not for that, CSS opacity would have worked great!

Ryan:

Thanks for the kind words!

How do you plan on having your image choice follow the user to the subpages? How will it remember which image the user chose?

Choosing an image from the homepage sets a cookie that identifies which stylesheet should be used. How that gets implemented in the future remains to be seen :)

Posted on March 10, 2009 12:56 PM

Renaud said:

Beautiful work Dan. It seems as every aspect of this site was done masterfully from the clever coding, to the unique branding to the flexible layout. I am a big fan.

Posted on March 10, 2009 03:58 PM

User said:

Site has issues in IE7. Therefore, I don't have much to say about it.

Posted on March 10, 2009 06:01 PM

Ivan said:

Very cool site. There's something almost artisan about the Happy Cog client-side effort. No traditional reset stylesheet and no reliance on a javascript library - would love to hear thoughts on the advantages of rolling-your-own.

Posted on March 11, 2009 03:09 AM

Amrinder said:

Great Design! Once again you guys made the mark. I really like the layout and use of sIFR 3.0 with nice choice of header fonts.

Wondering who was the designer? Jason Maria? or someone else...

Posted on March 12, 2009 01:38 AM

Dan Mall said:

Ivan:

No traditional reset stylesheet and no reliance on a javascript library - would love to hear thoughts on the advantages of rolling-your-own.

The answer is two-fold. First, because I’m a control freak, I’ll take on the challenge of rebuilding the wheel for the tradeoff of having a stronger and faster one. Secondly—embarrasingly enough—I just didn’t have the jQuery chops at the time to get this done with the schedule we had in place. Had I revisited this project now, I would easily have done it in jQuery instead of regular ol’ JavaScript.

Amrinder: The design was created by the powerful tag team combo of Heather Shaw and Jason Santa Maria. I designed pieces of it as I needed to, but the design is largely their effort.


Posted on March 12, 2009 08:01 AM

Matt Andrews said:

Interesting - looks great. One issue though: When using the new FF3 / IE7 zoom feature (scroll wheel + ctrl), the Flash borders above and below the logo don't scale - they stay the same size, so the background image beneath them starts to show through.

Still, a minor point on an otherwise beautiful layout. Kudos!

Posted on March 13, 2009 09:23 AM

Michel said:

I like the way you integrated CSS, JavaScript and Flash; the look is pretty seamless for what seems to be a challenging amount of coding.

I noticed on the Home page's rotating gallery that the title over the displayed artwork can barely be read in ie7 when one of the four choices is selected.

Posted on March 13, 2009 11:25 PM

Baptiste said:

Great site, it looks really good and really professionnal.

One bug though : under firefox 3.0.7, when I hit a link from the home and then hit the back, I get the page as text content.
This is quite annoying ! Looks like this only happen with the home.

Posted on March 15, 2009 07:36 AM

Shy said:

Mica, a master piece !!!
I would add this on CSS file:
a{outline:none}
because I don't like those outlines :-)

Posted on March 25, 2009 07:20 PM

Sorry: comments are closed.