A Grand Redesign

The thought of trying to mesh my creative ideas with another’s personality was intriguing.

If you head on over to The Grand, you might notice a few things. For example, that striking photo of Dubya, Clinton, Carter, and Bush Sr. striding, Reservoir Dogs style, across the tarmac. Or, the brand new design sported by the blog. The gals had asked me to redesign their blog a few weeks ago, and since I was interested in some new outside design projects, I jumped at the chance for several reasons.

One, I was itching to try some new CSS tricks and ideas I’d been messing around with. Two, I’ve never worked on a personal website other than mine, and so the thought of trying to mesh my creative ideas with another’s personality was intriguing (as well as potentially frustrating). And third, on a more technical level, I wanted to work on a site that used Movable Type, one of the blogosphere’s most popular content management systems.

But where to start? I knew that the girls of the Grand are very focused on this concept of community and household, of using their house as more than a place to merely sit on one’s butt in front of the TV (like yours truly). And so my initial ideas started along that idea, of trying to create a design that was, for lack of a better term, “homey.” On a technical level, the design would be using semantic markup, a completely CSS-based layout, and standards-compliant XHTML 1.0 as much as possible (which should be a given by now).

About this same time, I was messing around with an idea for Opus’ new design (yes, yet another one of those is in the works), something along a more wintry theme. However, as I was working on this design, something clicked and I realized that this would be perfect for The Grand’s site. While certainly not homey, it did focus on yet another aspect of The Grand — their love for nature, gardening, etc (though I must confess the tree in the photo is actually from my workplace’s parking lot). And it also kept within the seasonal theme (with a little tweaking in ye olde Photoshop). And so I scrapped my original Opus-centric design and began Grand-izing it.

On the backend side of things, it was rather interesting working with Movable Type. I’ve worked with some other CMSes and have always been rather frustrated by them (Zope, I’m looking in your direction). Movable Type was actually quite easy for me once I got the hang of its templates, mainly because I’ve used (and built) similar systems at work. Although I’ve only scratched the surface as to what Movable Type can do, I can certainly understand the appeal for those who a fairly powerful publishing system without having to make one from scratch.

That being said, I think I’ll continue using my homebrew PHP/MySQL system for the time being, thank you very much. And to be honest, if I was creating Opus from scratch, I’d still probably build my own CMS. But that’s just me.

There is still some work to do on the site, however. The design works just peachy in resolutions that are 1024x768 or greater. Go down to 800x600 and things get a little cramped. That doesn’t bother me too much, but you’ll also see that the column widths are static. The plan is to figure out a way to make the content column liquid, thereby making the design more flexible. And eventually, I’d like to add a style switcher to the design so that users can choose between different “skins” for the site (perhaps even some that fit within my original, “homey” vision for the site, or perhaps reflect the girls’ Shire fixation).

Finally, on a really geeky note, I’d like to give some props to Jon Hicks, whose design work is always an inspiration, and whose recent redesign provided a brilliant solution to an interesting problem.

Before his redesign, I’d never thought to add a background image to both the <body> tag and the <html> tag. A repeating background was applied to the <html> tag, which gives the site a nice ethereal look, and then the “tree” background image was applied to the <body> tag.

Doing this meant I didn’t have to create an insanely huge background image, but could layer backgrounds on top of each other to nice effect. I’ve noticed a minor glitch involving pages that don’t contain much content, such as this one, that may require some further refinement of the technique.

I’m really pleased with how the Grand’s new design has turned out, especially considering so much of it revolved around an instant flash of inspiration. Those can be pretty rare, but they’re almost always worth following through to the end.

On a sidenote, while the new Grand design renders fine in all modern browsers (even Internet Explorer), it looks especially fine in Safari 1.2 running on a Mac with OS X 10.3 installed. And for maximum effect, make sure you’re looking at it after 11:00pm while listening to track 6 on Manual’s The North Shore.

Enjoy reading Opus? Want to support my writing? Become a subscriber for just $5/month or $50/year.
Subscribe Today
Return to the Opus homepage