Reflections on approaching a major re-design

Or.......there's always another mountain to climb.....

I'm sure you couldn't have missed the fact that we've just finished and released a brand new version of our CSS editor Style Master. Well, getting those new product info pages to work was the final confirmation I need to know that it's time for a major site redesign.

What I'm doing here on this rapidly disappearing morning is taking the first few steps in the foothills of this project. It makes me smile (or is that a grimace) to remember some of the incarnations we've had over the years.

We started life by developing a nifty little hypertext application for the Mac called Palimpsest. Somehow or other we cottoned on pretty early to the idea of giving stuff away in order to sell stuff on the web so as an adjunct to our product info about Palimpsest, we created The eText Pages - a collection of resources for people interested in working with electronic text. Actually, looking at these pages, I don't feel too bad: the shameful stuff is coming up next.

We stuck at that for a year or so, then in early 1999 we went live with a style sheet editor called Style Master. Unfortunately a lot of the images have gone missing on that page, but I think you get the picture. Check out what westciv.com was looking like as well. Because of a redirection javascript we had on the page I can't actually show you an early version of the House of Style, but it was pretty funky as you can probably imagine. Here is a true gem though: the very first version of everything you ever wanted to know about style (with apologies to Woody Allen), which became The Complete CSS guide.

All these initial design were pretty image and javascript heavy, and I know I wasn't the only one doing things like this, so I hope no-one out there is laughing too hard right at the moment. One of the ironies of the web is that we were all doing these lead-like pages way back when everyone was using a 28k modem so these pages must have loaded like mud. But these days when cable access is getting to be a standard, we've all got so much closer to perfecting the art of the super light weight, yet very stylish, web page. Thanks as much as anything to CSS, I might add.

But anyway, much as I loved those early designs I eventually had to concede that most of our potential customers simply wouldn't be waiting for them to download, so we pared down the images and ironically, went back to tables for layout, and came up with a site that was all-but all CSS. Unfortunately archive.org actually pulls in the current style master style sheet to display this page, so I can't show you what it looked like. But anyway, there were a couple of iterations of this site before we came up with the current one, which ditched tables once and for all, in March 2002. I think this design has served us pretty well for the last two years, but all good things come to an end, and we've decided it's time for a change again.

Which brings me to ask that question you neglect at your peril: what do you want to achieve? Here's what I've come up with, probably in order of importance as well

1. valid XHTML (strict?) and CSS only

Only CSS for appearance shouldn't be a problem. And a lot of the pages are almost there as XHTML strict. The major stumbling block has been "Quirks mode" on IE for windows, a problem I have largely responded to by ripping out the document type of pages that give me grief :-) So my plan over the next couple of weeks is to get to the bottom of quirks mode once and for all and then try to make it work.....

2. major site architecture redesign

When Russ and Peter from Web Standards Group pointed out to me the other day that they found it hard to find stuff at our site they were only repeating what I have heard from others over the years. I've identified a number of issues, which I'm hoping to tackle in this redesign.

• While we don't yet have 40,000 pages as they do at the Macromedia site, we have a lot of content, and perhaps more importantly, quite diverse content: all the info about two applications (Style Master and Layout Master), all the info about our self paced courses, our free course program, and all the CSS resources at the House of Style. Drawing all this together into a narrative isn't an easy task to start with.
• The site as it is at present has no "home": while there is a page at westciv.com/index.html we don't emphasise this and it is not linked to throughout the site. I think this came from an idea that all four major sections of the site were of equal importance, and all of them were much more important than westciv as a company itself. So when I created the current design I put links to the 4 major sections at the top of every page, but no link to a central page where you could go anywhere. I'm told that this is confusing.
• History. As you can see from my little story above, the site has grown organically, like a city, with bits massaged into the existing design as they were developed. So something may have found itself in a particular section for any number of reasons apart from the fact that this is the absolute best place for it, but as time goes on it becomes more and more difficult to see beyond this to what would be the best way of organising the information. I guess that's what major site overhauls are all about, but there will always be some assumptions about how things are going to be that it is very difficult to leave at the door.

3. a more contemporary, less cluttered look: white, lots of white!

4. some basic concessions to web usability of the Jakob Nielsen variety: underlining only for links (not for headings!), a style for visited links (strike-through?). Are there more?

5. develop a print style sheet at least for the major tutorial pages.

I kind of think that's going to keep me busy enough actually, so I better stop there before I really do make a rod for my own back. Next step: coming up with a basic architecture.

Comments

[Stephanie]

Re: basic concessions to usability... I don't think your current home page serves you very well at all. It's incredibly difficult to scan, mainly because of two problems. First, the page header has so many horizontal lines combined with long lines of text that I get lost every time I look at it. Second, your headings are the same color as your body text (or possibly slightly lighter, which is even worse) and have no extra whitespace surrounding them.

The fixes would be pretty easy. Ditch the horizontal lines in the page header, and move everything after the colons into title attributes on the links so they become tooltips when you hover. Then take a Crayola to your headings. You've mentioned that you'll be adding whitespace, which is excellent. I really think that's all it would take to achieve a more readable page.

[Dominic von Stösser]

You ask, maybe rhetorically, whether to code XHTML strict... Why the heck not? I thought I'd stay with XHTML transitional for much longer than I have, but I found that it just wasn't that hard making it work in strict mode. It's a bit more work making it work in a WYSIWYG editor, but with a proper text editor, it's pretty straightforward.