Web Standards in Action

The Problem

The Drowning Prevention site has been around since around 1998 and it’s not been touched, with the exception of yearly content updates, since then.  I’d done these updates before and found them particularly time consuming for a number of reasons.  The site had originally be built with FrontPage and as the years past had gone through several different iterations, whenever I’d update it something would break or I’d have to rebuild an entire page just to add a few links.  Some of the bulleted lists were built with tables and things like that.

The site was in much need of an overhaul, both visually and structurally.  I sat down with the stakeholders and we began to talk about the goals for this site.  I got an idea of how they wanted it laid out, what kind of visual feel and how they wanted to reorganize the content.  It was all fairly straightforward and need to be done quickly because of the time sensitive nature of the content.

The Goals

As with every good project, we started with clear goals.The main goals, from the stakeholders, for this site were to:

• Update the content of the site
• Update the look and feel
• Make the site more consistent
• Make the site more accessible
• Make the site easier to use

I had some of my own goals for the site:

• Make the site easier to update
• Future proof the site

The Solution

Because they needed a new look and feel I realized that I’d need to build the site from the ground up.  There was just way to much presentational code mixed in with their content.  I started by creating a simple layout on paper, then later in Photoshop and going over that with the stakeholders.  Obviously, given the simplicity of the site, this was easily done. Then I build out a template and began to migrate content from the old site and mix that in with the new stuff coming from the stakeholders.

(A personal side note - I’m not all that keen on the layout, but the stakeholders love it and I found in user testing that it more than fits the bill. In other words, it’s no Quark. Love that site.) 

This content migration was a bit of a bear.  I had to strip all of the presentational elements from the code which was time consuming.  There are a few pages in the site that had so much going on I left them untouched, just cut that spaghetti code straight into the template.  One thing I want to stress, I’ve I hadn’t gone to Web standards this would have be just as time consuming.

Along the way I tried to clean up the site’s exiting content as much as possible.  I reorganized and retitled all of the links and did my best to impose a simple, clear Information Architecture on the site.  This was not done as well as I’d have liked, but I just didn’t have the resources.  There were many times that I had to improvise.

After a week or so I had the basic site all built out and all of the content migrated and updated.  I sent it off to the stakeholder for review.  I spent the next few days tweaking the template and user testing the site.  I found out that the site, although valid, had a few problems in Safari and IE 5 on a Mac and did my best to resolve those.  I did have to compromise a bit, but I was pretty happy with the result.

A Small Wrench in the Works

Having worked out most of the browser bugs and refined the template I felt like I was nearing the end.  It wasn’t quite that simple though.  It never is.  You see the stakeholders wanted to make some pretty big changes to the content as well as quite a bit more updates.  At that time we decided to make some major tweaks to the layout as well.

Web Standards to the Rescue

These major changes and layout tweaks were done in under an hour.  Because I’d built the site with Web standards they were easy.  Really easy.  The actual content changes were a snap because the code was so stripped down and clean and all the layout changes were done within the CSS file.  Without that the layout changes alone would have easily taken half a day even using sketchy “find and replace” methods on the 34 pages of the site.

The stakeholders were ecstatic, I was relieved and the site launched on time.  A Web standards success story, and that is just the beginning.  Wait until the next time this site needs a major rework.  It will be a piece of cake and I’ll look like a superstar.  And that’s what it’s all about, isn’t it?

View the new site.

A Few More Benefits

In addition to the benefits talked about above, by choosing to build the site with Web standards in mind I was able to:

• Eliminate browser issues with both current and legacy browsers
• Insure forward compatibility with future browsers
• Achieve instant compatibility with most non-web devices
• Decrease the total file size from 33MB to 14MB
• Drop average page weight from 11KB to around 6KB
• Increase accessibility and usability of the site — by default
• Radically reduce the learning curve/ training time for distributed authorship