Deconstruction

I started by deconstructing the current site, which was an utter mess. Not necessarily the design (although it was a bit dated) but the coding and techniques that were used. I mean, nothing but table tags everywhere. I don't think I've ever seen the letters td so much in my entire life. Combine a maze of nested tables with Javascript and some nested div tags and you've got one non-displaying-correctly site. It played hell on browsers all across the board. And that's what I had to work my way through.

On top of that, the content was at one point managed by a proprietary CMS-like tool. Since it was apparently designed with database processing in mind, it had the basic function of any CMS but was incredibly unintuitive and restrictive, especially when we discovered that it only worked in IE Win 5+, which didn't sit well with our Macs.

Our editors couldn't easily edit or contribute content, our designers couldn't easily tweak or change the look and most of us couldn't even view the site properly. It was then that I realized just how disconnected we were from our own website. And apparently others did too, because soon after that I was given total access to files and directories, which meant I could get a closer look at how things worked and figure out how to make them better. Unfortunately, that also meant I had to deal with what was essentially all of the data handled by the CMS output to HTML files. Lots of 'em.

Clean up

What followed was a wild session of just learning how and why some of the previous decisions were made. You know, I can remember not quite understanding CSS and using it to varied effect, combined with Javascript, and sort of getting what I wanted, but that was, like, seven years ago. So instead of just trying to duplicate the existing look and feel by cleaning up the CSS and using semantic markup, I figured I might as well just separate everything. It seemed like it was ultimately going to happen anyway, so I decided to take a preemptive step.

First, I made a copy of the entire site, then went through, page-by-page, and pulled out all of the content. After having worked with separated content on other sites for a couple of years now, I was taken aback. At first I was amazed at how there seemed to be more markup than content, but then I remembered that we all used to do it that way. In fact, most major sites still do it that way, but with today's increased emphasis on standards-based design and development, here was our chance to make a change for the better. With new standards-compliant browsers on the market and an eye on the future, I thought it'd only be a fair move to start it off right. For me, that meant XHTML, CSS, semantic markup, no Flash, no text images, but that was just the technology side of it. There were also the usability and IA issues to consider, and that required going back to the drawing board.

New plans

One of the things that I first noticed when looking at the existing site was that it was essentially nothing more than a "brochure" site. It was mostly static content, only updated once a month if that. But aside from that, there were prominent links to company operations, like advertising information, job listings, and press releases, mixed in with links to what I like to call "black hole" pages that ask for effort on your part, but don't really offer anything in return. These kind of pages can present an image that your company is open to input, but unwilling to share anything it receives, and that's not a favorable image to have. You've got to be open with your audience, so that was one of the first things I set out to make happen.

Another thing that caught my attention was how the navigation was broken up. For reasons unclear to me, things were not only mixed in with each other, but in two different places.

Example:
Top navigation

Sign Up | Ad Info | Contact | Letters to the Editor

Left side navigation

• Home


• This Month


• Where to Buy


• Press Room


• Fan Forum


• Employment


• Back Issues

Something seemed so random about how these two areas were organized, so part of the challenge was rethinking not only how to reorganize them, but re-prioritize them. There were some things that were either no longer part of the goals in mind or no longer functioning. Remember, this is a site for what is essentially a culture magazine, and the focus had to be on content and the readers themselves. For two years, our readers were giving us input of all kinds, and there was no reflection of that anywhere in the site.

Gone were the "Where to Buy", "Employment" and "Sign Up" links. Why? Who cares, that's why. Our circulation and distribution has spread to such a degree that the magazine was now being carried in most major newsstands and bookstores. If needed, that small bit of info could be rolled into any other page as a footnote. And having settled on a tight-knit team after two years, there wasn't a great need for new hires or prospects. Plus, I know first-hand that if you're looking for a job, you'll find a way to get in touch. And frankly, while building a mailing list is always worthwhile, the back-end to that feature was broken long ago and no one bothered to fix it. That may eventually return at some point.

The "Press Room", "Ad Info" and "Contact Us" links were pushed to the bottom of the page. While these areas are important to our business and operations, they weren't deemed top-level content, i.e. not directly important to readers or visitors. The only exception might be the contact page, which visitors might find handy if they have questions regarding the magazine or subscriptions.

Now the focus turned to what we could offer the readers. Part of a magazine's appeal is it's "voice". Whether it's in print or online, that's just undeniable. The magazine itself has personality to spare, but the corresponding site was as cold as ice. It was mostly canned press releases and fluffy promo speak that permeated the site, and now was a chance to bring some fresh, insightful editorial content to it. Now, there would be spaces for editors' columns, responses to reader mail, a constantly updated weblog and more.

The new navigation ended up like this:

Top navigation:

Home | Issues | Letters | Columns | Events | Downloads | Subscriptions

Bottom navigation:

Contact Us | Advertising Information | Press Room | Subsciber Services
Terms of Service | Privacy Statement

As you can see, the focused has changed drastically between what's immediately important to all visitors versus business-oriented visitors. You'll also notice that there's no longer any navigation on the side of the page. This is mainly due to a philosophy I have that navigation shouldn't compete with content and advertising. Secondary navigation (within a given section) should be a part of the content, presented in a natural, unobtrusive manner. On the home page, for instance, there's plenty of redundancy to different sections of the site, but the only obvious navigation is at the top and bottom of the page.

One nail at a time

First, I started with a blank document. I took the stripped out content and dropped it in. No CSS, no layout, no images. Only header and paragraph tags. It was suggested that I should work something up in Photoshop or other graphics program, but I instantly scrapped that. I know that's how a lot of designers like to start out, to let themselves be free of the many restrictions of HTML. Fine, whatever. You go, dog. When I've done it that way in the past, I've always ended up being disappointed with the end results. I mean, sure, you can build a car with eight tires and no windows, but who are you gonna get to drive it? Sometimes you have to work within established restrictions.

I like being in the code, working things out on-the-fly, that way I have a real-world testing ground for ideas regarding content and UI. One thing that I've learned is that there shouldn't be an immediate concern with how a site looks. Not to say that it isn't important, but compared to print, the web operates in such a way that function and content completely supercede form. Like application design, there are certain layers of core code that must be established before any interface is ever applied. Form, or style, or visual appeal, is almost always an afterthought for me.

So I began coding the XHTML and CSS by hand in TextEdit. It was a chore, and began to get tedious as the amount of pages grew, but it's always good to get in some hand-coding before moving to any sort of WYSIWYG editor, where as they say, WYSINAWYG.

Templates

After sifting through everything, dumping the dead code, tweaking the content, creating the new styles, I had to not only keep the content of the site intact, but create new content and fill in any gaps. That meant I had to create templates that would scale easily, accomodating all lengths of body text, images, sidebars and lists. I knew this would be nearly impossible to track and maintain just using a simple text editor, so I moved Adobe GoLive for it's site management and template systems, which drastically increased my speed and efficiency without compromising the code or, more importantly, affecting my workload. I still have to work on the magazine itself as well, you know.

Rethinking

The challenge of incorporating the voice of the mag into the content of the site, while still offer something that couldn't be found in print, was a little harder than anticipated. Our team is built around a full-time schedule for the magazine, so finding time to generate even more content would be almost impossible. The weblog is a good idea that is still in the works. Maybe that'll come around in the future as the site grows, but this was happening now.

We decided that maybe adding some of the content from the mag would be a good idea. Depending on how many visitors were not readers, it could offer a sort of sneak peek into each issue. Another aspect was simply a matter of convenience. For instance, in every issue there's a list of upcoming events, complete with URLs. But how much easier would it be to have that online and let visitors click through, so they could easily find out more and even register to attend?

In two-hundred printed pages, information can sometimes get buried between higher-profile items, but due to the non-linear nature of the site, they can take more prominence. Sure, we have readers who read every page, and that's great, we love 'em for it. I've noticed that I tend to skim a lot when reading magazines, and I'm sure there are others who do the same with ours who might miss entire blocks of information. This was where the site would be able to shine as a counterpart to the magazine, evening out the gaps that might otherwise get skipped over.

Testing

I still rely on direct browser testing to see how things look, with Firefox being the primary test browser. I know that if it fails in anything else, it's usually a matter of bad parsing or interpretation. If it fails in Firefox, then something's really broken.

I know, you're probably wondering about Internet Explorer. To that I say, what about it? Frankly, that's a big can of worms that I don't want to open. All I can say is that I've tried to stay away from anything that could possibly break in IE, and while some things will look different, I can promise that they'll look beautiful once Microsoft releases a standards-compliant version of their browser.

Moment of truth

After a span of a few months, the redesigned, reworked site went live on January 24, 2005. No big announcement, no fanfare. My reasoning is that the site should have some time to build an audience. You can't force people to come to your site, they have to want to see what you've got. We're now in a phase of generating and testing content, seeing what works and what doesn't. In the last month, I've been getting some good comments and taking notes, confident that we'll end up improving and adding more features as time goes along.

Take a look.