The Great Web Re-Do, Part One:
You can dress them up, but you can’t take them anywhere.

by Opal Gamble, Past President and Webmaster

Mirror, mirror on the wall, who's got the best-est website of them all?

This fall I worked on what can only be referred to as "the project from you-know-where." Just as I was about to despair, the contract came to an end. As a result of the experience, I had a store of ideas floating in my head for other sites.

Set free from the contract, I was pumped. I had plans! Schemes! Brilliant strategies! I was cracking open PhotoShop to mock things up! I was scribbling random ideas down on scraps of paper! I was going to rock my clients' little worlds!

[insert the sound of the record needle being hauled across the vinyl here]

Oh, wait a second. What was I doing and, more importantly, why?

I'm not a fan of futility. I'm usually the first one at the table to irritate others by asking, "but why are we doing this?" You could argue that I'm lazy, however, I believe that asking a few questions is rarely a useless exercise.

For many, a site redesign means rolling out some new colours and splashy new graphics. Users see that, and think, "ooh, it's pretty, it must be good."

Wrong. Just because the site is pretty doesn't mean that it is good or effective.

Am I calling the redesign a wolf in sheep's clothing? Perhaps, but, when it comes to the web, a site redesign often disguises a case of a lousy architecture and bad writing with glitz.

The terminology game

So, I know that a traditional redesign isn't quite what I'm after. I have some vague thoughts about marketing and branding running in little circles in my head. On doing some research, I found my answer: I don't want to redesign, I want to realign.

Cameron Moll's article "Good Designers Redesign, Great Designers Realign," explains the difference between realigning and redesigning:

The desire to redesign is aesthetic-driven, while the desire to realign is purpose-driven. One approach seeks merely to refresh, the other aims to fully reposition and may or may not include a full refresh.

Ah, now that sounds more like what I'm after. I think I like this guy.

Let's discuss a real-life example, shall we?

Drummond Motorsports Version 1.0

About a year ago, I cornered my friend Jason about his website, which can be summarized neatly into one word: utilitarian.

Knowing that Jason was trying to get sponsors to further his driving career, I approached him about a redesign. I figured that a pretty new look would help his bid along.

Jason's site was based on the default styles that browsers apply to tags and, my personal favourite, it had a frameset:

Depending on your window size, the number of scroll bars became nearly nauseating. I knew why the frameset was there: it prevented Jason from having to duplicate or correct the same thing on every single page of his site.

Now, as chance would have it, Jason was already planning a new version for his site and was happy to have me do the work. He had a header graphic that he had commissioned for the new site and he had more ideas than he knew what to do with.

Drummond Motorsports 2.0

Opal to save the day, right?

Well, sort of.

Here is what Jason's site looked like recently:

It has colour, and graphics, and, and, and... since it's my work, I can be blunt: it looks like PhotoShop ran out behind the bushes and quietly threw up.

There is way too much stuff on that page, and every other page on the site.

Between the header graphic (not my work), the sponsors, the "One Lap of Canada" banner, and the menu that never ends, the site grabs you by the ear and sucks your brain out. It suffers from too many design elements and too many colours. You have no idea what to focus on first.

It's very easy, from a two-second glance, to tell that this is the project that got away from me.

I can go on about the whys and maybe even engage in some finger-pointing, but it's irrelevant. The thing to note about this site is that it illustrates the need for realignment on a grand scale.

Looking ahead to 3.0: the prep work

This time, I refused to start work before I had decided some things about layout, purpose, and styling.

This is where Moll comes back into my story. He gives us four points to consider when realigning a site:

I mocked things up on a piece of paper, then in PhotoShop.

We negotiated design ideas and theory and even got into a few heated debates, usually over the header. You see, having paid good money for that graphic, Jason wanted to save it; I felt so strongly about the implications of trying to integrate the header that I eventually threatened to never speak to him again if he made me use it.

Phase 1

Was the battle for a new, realigned site worth it?

You tell me:

The realigned site draws your eyes to the relevant areas:

• The trusty header and menu, in the official blue, are consistent, understated, and clean.
• The title sponsor, Sierra, is the only one on the main page—and the only one on every page, the rest of the sponsors are only listed on the Sponsors page—and is noticeable, but not intrusive on the content.
• The main areas of the site are highlighted by yellow buttons—you'll hear more about these next month—and attempt to add some visual interest while not hitting you over the head.
• The car is still a feature on the site, but is toned down to one good photograph (that I took, for the record).
• A pylon, the staple of the sport, is in the bottom corner of the window, for a little fun.

The layout itself is locked to a specific width, which some people love and others hate, but it means that the site is easier to manage because things don't slide around.

As for the text, well, we're still working on it as we slide into Phase 2.

Join Opal in February, as she continues the series with a discussion about the landmine of realigning a site visited by hundreds of communicators a day...that's right, the STC-SOC website!

About Opal Gamble

Technical writer, web monkey, and general geek, Opal became a STC-SOC council member in 1997. She is a UW Rhetoric and Professional Writing graduate, a Technical Writer at Campana, and a contractor.

When she's not fixing a website, Opal drives, climbs, and generally lives on the edge.