This Old Website: Web Renovations

In: Articles

By Ken Westin

Published on April 21, 2004

Hello and welcome. Today we are going to renovate this large, old, static HTML Web site, circa 1997, bringing it up to the latest standards and utilizing the latest technologies available to us. Oh, and I forgot to mention that while we renovate this site, starting with ripping out the foundation, the site will need to continue to serve its visitors and stakeholders. Don’t forget that you will still be expected to do your regular chores, so why don’t you do some of those quick content updates and when you get back we can start on redoing that pesky navigation system.

The word “redesign” can strike fear into any Web Manager’s heart, especially if you are working with a medium- to large-scale Web site. A redesign is even more complicated nowadays when we are being asked to do more with less, with hiring freezes, smaller budgets and larger projects: a “redesign” seems like an impossibility. However, if time is not a pressing issue and a site redesign is called for, it’s possible to redesign your site “while it is moving.” Instead of demolishing the old site and starting fresh, consider the project more like a “renovation” in that you can redesign the site in sections and even begin to apply new technologies to make future redesigns easier. Instead of thinking of a site redesign as one massive project, begin to think of the redesign as an iterative process starting from the ground floor and working your way up.

Expand Your Toolbox: Be a General Contractor

Your first job is to expand your toolbox. If you are managing a large site, odds are you are functioning as designer, programmer, database administrator, information architect, usability expert, server administrator and project manager—it is just that “Webmaster,” or “Web Manager” fits easier on your business card. The fact that the role of Webmaster has become the “renaissance (wo)man” of vocations has come about out of necessity, gone are the days when all you needed to know was HTML and a little JavaScript to manage and develop Web sites. The business objectives have become more complex and our budget and resources have gotten smaller, so many of the hats that others have worn are now on your head, whether they fit or not. So we need to begin to think of ourselves as “general contractors”—no need to hire an electrician if we can learn how to replace the fixtures ourselves. Also, by understanding—even on a general level—concepts such as database design and server-side programming, you will be in a better position to communicate what you need, and to manage the process, if you do end up needing to hire someone to assist with a complex problem.

The Right Tools for the Job (open source)

Pick a server-side language, any language: ASP, PHP, JSP, ColdFusion, Python, PERL. There are many options when it comes to server-side languages and many folks will claim that the one they use is the best, but really they all pretty much do the same thing. The language you choose will depend more on environmental factors, such as what OS and server software you are running, as well as what your IT department is willing to support, so in many cases this decision will be made for you. If you have not chosen, I highly recommend experimenting with several different languages. It is not uncommon for developers to dabble a little in each to keep themselves limber; once you learn one, learning another is not that difficult. Most of them are free, or at least offer free development kits for you to learn with. (I won’t tell you which language I prefer, but will give you a hint: Pons and Fleischman.)

Next you will need a database and yes, you will need to learn SQL (Standard Query Language). If you pick up a SQL book you can understand the basics in a weekend. There are many databases out there and again the one that you choose will depend on your current infrastructure and budget. If you are working for a corporation you may already have Oracle or Microsoft SQL Server on hand to use. However, if you work for a non-profit or small business, you may not have the budget for these—in this case you will probably want to work with MySQL or PostgreSQL. Both are free to use and are more than capable of handling whatever you throw at them.

The Blueprints

One thing you need to understand is that you are not going to be able to redesign your site all at once, especially if you are doing the redesign yourself while at the same time handling your other responsibilities. Since we are renovating—as opposed to taking a wrecking ball to it and starting from scratch (although this will be tempting at times)—we first focus our renovations on the areas of the site that are used the most and are the areas your core audience uses. In most cases the core audience will be classified as “customers.” If you break your site down into sections, by the audience who uses them, and let this dictate the priority by which sections are redesigned, you can ensure that the most important users of the site will be taken care of first.

An important item to remember is that the project will be an ongoing, iterative process. Just as house renovations are continually dependent on environmental variables—such as budget, additions to the family and catastrophes such as fires—so will your site constantly shift based on changes to the company or institution: building a site that is “elastic” is critical to your success (and sanity.)

Avoid Painting Yourself Into Corners

Odds are that while you are working on your iterative redesign, changes will need to be made to the structure, or even the look and feel of the site. This needs to be considered when you begin the process. Moving to an XHTML/CSS-based design will help this by taking the first step of separating content from design.

If you use CSS-styled links, in combination with a server-side technology for creating a navigation subsystem, you will go a long way toward saving your sanity in the future, even if it is just a simple server-side include. For one project I needed something a little more industrial-strength since content was kept on different servers—plus the fact that the site consisted of hundreds of pages. I wanted to have a single file to reference for the overall structure so I created an XML-based system that powers the navigation of the entire site. In addition to making it easier to make structural changes, the data in this single file can be re-used later to create a sitemap in real time, or alternative tools for site navigation; you can also use this file to store additional metadata or even content.

Although I used ColdFusion components and server-side caching to handle the rendering of the navigation system, it can just as easily be handled using other server-side technologies and the data can even be shared across servers running different application platforms. This approach saved me on numerous occasions—as the institution changed structure internally, I was able to reflect those changes to the structure of the site in about 30 minutes, this as opposed to a project that could have taken several weeks (and five pounds of coffee, a bottle of Advil and an overdose of Red Bull.)

Object-Oriented Publishing and Sustainability

Web sites, by their very nature, are dynamic and need to change over time. In many ways we should consider it a “Web System” vs. “Web Site.”

Maintaining a medium- to large-scale site shares many of the problems that large software systems have, primarily the fact that there is a limited scope to what a human being (developer) can understand at a given time as they develop. It is with this in mind that we can begin to borrow concepts from our software developer cousins in the form of object-oriented design.

Object Oriented Programming was developed primarily as a means of making development and maintenance of systems as easy, cheap and reliable as possible. The one area of interest is the concept of a “class” which, in essence, is a means of encapsulating information that is used in multiple instances through abstraction. We can apply this same concept when we begin to audit the content of our site; we need to look for multiple artifacts of the same content that can be abstracted into a simple subsystem. Core content such as press releases, product information, contact information, directory information, as well as site navigation, as mentioned above, are all good candidates for such a system. By moving this content to a database-driven solution, it can be called and added to pages. You will save yourself a great deal of work in the future by making the site more manageable. If the editor can publish the content in one place, and have it updated in all other areas that use that same data, you take yet another step in separating your content from the design.

Just In Time User Testing

User testing is great and can usually be done with a limited budget if you have enough time. However, in the real world sometimes you do not have the time or money to test the site out as much as you would like. The first step in building usable Web sites is understanding basic Human Computer Interaction (HCI) concepts, and having a general understanding of what makes a good interface, there have been enough books and research done in the last few years to get you started.

Architects don’t rely on user testing when they build buildings. It is just not practical. They learn from those who have come before them through books, classes and lots of studying and practice. The concepts of building useful and accessible buildings are ingrained in their discipline. The difference is, unlike the construction of buildings, we can start building Web sites with very little knowledge. I think we all remember our first Web sites after learning just a little HTML: it is a bit like putting a two-year-old in a room with white walls and handing them a box of permanent markers. However, after learning to make monkeys jump across the screen, we began to slowly build more sophisticated sites that focused more on users’ needs. It is only through continued study that we come to understand how to build good Web sites, and of course the study will never end. By looking at Web design as an extension of HCI, in combination with graphical and information design, we actually have a huge pool of information available to us. In short, all the user testing in the world won’t make a bad design good. So when the marketing department comes to you, and tells you they need a site up in a week, you will need to rely more on your knowledge of what a usable site is than you will on focus groups. Extensive usability testing and focus groups can help a great deal, if you have the time and money, both of which are currently in short supply for most of our projects.

If you provide easy ways for users to give feedback—similar to what Macromedia did with their recent site redesign)—and look at the redesign of your site as an iterative process that is never completed (or perfect), you will find that you’ll be able to get a great deal more done in a shorter amount of time.

• Add to Magnolia
• Add to My Yahoo!
• Add to Newsvine
• Digg this story
• Add to Del.icio.us

Related Topics: Redesign, Web Design, Information Architecture