Case Study: Redesign of TeamITS.com
This month marks the first redesign of our TeamITS.com web site in several years. We at ITS thought we would walk through the anatomy of redesigning a relatively large web site sporting over 1,000 pages. Any well designed project begins by identifying its goals. Besides a new "look," we wanted to:
- improve navigation
- leverage new web standards
- maintain current page rankings on search engines
- maintain the fast speed of the site
Improve Navigation
First, we divided our site into six main sections, providing users easier access to the information for which they are looking. While the same information largely still exists on the site, we believe the structure is more intuitive.
Earlier iterations of TeamITS.com had a relatively standard layout with a left-hand menu. Valid points exist on both sides of the "left-hand menu" vs. the "top navigation bar" argument. The main concern over using a vertical menu is the horizontal space it takes up – not only on smaller screens but on the printed page as well. Many sites get around this by having a "view printable page" button; ours put the menu in a separate "frame" – a different browser window pane, if you will. However the main drawback of using frames is the relative difficulty of bookmarking a specific page, since users often manage to bookmark the outside frameset page instead of the page which they are viewing.
For our new site, ITS decided to change to a "top" navigation system to eliminate frames. Instead users see a constant "header" navigation bar that changes to indicate their current location on the site. This also provides a "where am I?" comfort zone...known by the technical term of "breadcrumbs."
One advantage of a vertical menu is that it is easy to add choices...a web page is infinitely high since it can scroll, but users strongly dislike scrolling horizontally to read text because the navigation bar has too many items on it. By now everyone has printed a web page from Internet Explorer that cut off the right side of the page. Our solution to this? Within each main category a secondary navigation bar appears, showing the user the content available within that area of the site. We felt this maintained the navigation metaphor and provided a consistent way for users to know where they were on the site.
Moving the site navigation to the top of the page also let us add more content horizontally on each page.
Leverage New Standards
The major web browsers finally feature decent support for "new" web standards such as Cascading Style Sheets (CSS). The main purpose of CSS is to separate the content of a site from its formatting. You may recall our "Writing With Styles" article that described using styles in Microsoft Word, and how changing the Heading1 style would change the font of all the headings in a document. CSS takes that a step further: formatting for all pages on a site resides in separate style sheets. The result? We can change the font on every single web page on our site in a few seconds, by changing one style.
CSS also has the benefit of "degrading" gracefully so that users with older browsers should still be able to access the site content, even if it may not "look right" in their browser. Fortunately our web server logs show that only 2% or less of visitors to our site use older browsers, so that was not a big concern.
ITS also wanted to improve electronic communications with clients, so we created a RSS feed for the "What's New in IT" section of our site. Clients can now automatically receive headlines and summaries of updated content as we post it to our site, such as security warnings, tips, newsletter articles, IT news, and more. For details on how to use this feature, see the accompanying article, "Syndicate Your Site with RSS."
Search Engines
Fortunately, our site tends to rank fairly highly on search engines. We tend to receive a lot of traffic based on our newsletter archive and other sections of our site. It would not do to rename or move many pages on the site if it meant visitors would receive "page not found" errors until they fixed their bookmarks or the search engines reindexed our site. So we decided to try to maintain the current filenames and directory structure as much as possible. Further, as many of our pages as possible use the description and keywords meta tags to allow search engines to accurately summarize each page.
Speed
Despite some appearances to the contrary, our site is not very image-heavy. Even the navigation bars are mostly text, not images! While lots of images make pages look nice, they also tend to slow down a site. We have all visited sites that are relatively slow on broadband...think how much slower they would be on dialup! Though diminishing in number, a large number of computer users in the US still use dialup modems to access the Internet. Having a fast web server in a high end data center helps, too.
Conclusion
It's a lot of work redesigning a site this size, but we feel the effort was worth it. If you have not browsed our site lately, please do – we would love to hear your opinions on our new design!
May 2005
Send this article to a friend!
Subscribe to The ITS Connection
Related articles