Iowa LTAP has moved from CTRE to the Institute for Transportation

Taking our own advice: a look at CTRE's web site (1999)

By Michele Regenold, CTRE webmaster

Since I have been offering advice about web site development in a series of articles throughout 1999, I wanted to share my own experiences of reorganizing and redesigning CTRE's web site. In December 1999, the Center for Transportation Research and Education's (CTRE) web site appeared to change literally overnight. In its place is a new design and a more easily navigable site. This is how I did it.

My guiding principles for the reorganization were 1) to make information easier to find and 2) to make the site, which is growing rapidly, easier to maintain.

Choosing a tool

CTRE's researchers are committed to publishing as much of their research online as they can. That means our web site is continually growing. Maintaining a web site with over 1,000 pages without using any site management software like Microsoft's FrontPage was time consuming (and tedious). The first step was to purchase FrontPage and learn how to use it.

Getting organized

The next step was to take a hard look at how the web site was organized. Research projects were filed according to CTRE's own internal organization, i.e. by research division. Early in CTRE's web site life, this organization made sense to the people maintaining the site. As the web site grew, it became more cumbersome and eventually unwieldy. Finding information could be difficult if you didn't know where to look.

The information on CTRE's web site doesn't have a natural hierarchy that lends itself to a simple tree-like structure. Our web site is much like a library whose holdings defy simple, absolute categorization. I wanted visitors to our web site to be able to find information quickly. A keyword index was high on my wish list.

I decided that putting research project information into a database would solve many of our organization and navigation problems.

Our database of research projects is not online. Instead it's been programmed to generate web pages as needed, which I then add to the web site. For example, the database will generate a brief web page for each project with basic information such as title, principal investigator, sponsor, abstract, and a link to a more detailed web site, if one exists. Besides individual project pages, the database generates

All these pages provide links to projects.

In addition to the database-generated web pages, I pulled all existing project web pages into a new directory so all projects exist on the same level. Previously some projects had files that were buried quite deep, creating very long web addresses. Now all project web pages have the base URL of www.ctre.iastate.edu/research/ followed by their specific directory.

Designing the navigation scheme

FrontPage makes implementing a navigation scheme simple because the program will automatically update links throughout the whole site. What used to take hours now takes minutes.

But deciding what to include in the navigation scheme was not easy because CTRE's web site is not a simple information hierarchy. Ultimately I decided to keep the navigation bar lean; it appears on all pages except the home page. There are links to the home page, the search/browse page, and a parent page.

A parent page is the page located one level above the page you're looking at. Top level pages like the home page and the search/browse page don't have parent pages, but most other pages do. The parent page link on this page, for example, will take you back to the "Spin Your web" main page. I determined each page's parent page when I laid out the navigation tree of the whole site in FrontPage.

Designing the look

Since the main purpose of our web site is to present information, I kept the new look clean and simple. A white background works well, especially since our logo looks best on white. In addition to our logo and navigation bar on each page, I wanted to include CTRE's contact information and an e-mail link to the webmaster. I put all this information beneath the navigation bar in a narrow left-hand column separated from the body of the page with a black vertical line.

I used style sheets to define heading and subheading styles and colors. The style sheets are simple, however, so that people using older browsers can still see our pages. Major sponsored programs managed by CTRE such as the Midwest Transportation Consortium and the Local Technical Assistance Program (LTAP) have different color schemes (and no black line) to help distinguish their program pages somewhat from the rest of CTRE's web site.

On our previous web site I tinkered with link colors, but for the new site I'm using the default blue and purple link colors. Most web users know that blue means unvisited and purple means visited. Although this is not a web standard since many designers want their link colors to "go" with the rest of their design, it's close enough that I decided to use the default colors as an additional aid to navigation.

On CTRE's old home page, I used a photo mainly to add color and visual interest. On our redesigned home page I'm using a new photo, a shot of a rural highway in the fall, which has been sliced into several pieces. Cutting the image into several pieces helps the whole page load faster than if the image stayed whole. The image looks as if it were one whole graphic once it's loaded.

The new photo doesn't just look nice; it's been turned into an image map. An image map is a graphic with hot spots, or places on the image that are linked to different web pages. I've included five main links on the image map: research, education, products and services, who we are, and search/browse.

In addition to serving as a navigation device, the photo/image map functions as a preview of the subpages' contents. Rolling the mouse over any of the labels will cause part of the photo to change: the sky will lighten and a brief list of that subpage's contents will appear. I've also included redundant text links right below the image map to assist web users who have graphics turned off and visually impaired users with screen readers.

Graphics are sparse elsewhere except where they help illustrate a research project or add personality to a particular program like LTAP's. This was a deliberate design choice in order to keep download times fast.

What's ahead

As a medium, the web is exciting because it changes so rapidly. CTRE is changing and growing too. One major web project I'm still working on is developing a system for updating research projects and keeping up with new projects. The new database will play a major role in this system.

 

Copyright 1999, Center for Transportation Research and Education, Iowa State University. All rights reserved.

 

Contact Iowa LTAP
2711 S. Loop Drive, Suite 4700
Ames, IA 50010
Phone: 515-294-8103
FAX: 515-294-0467