We have a DOE-wide mission to deliver DOE research results.

The DOE home page was one of the first federal agency Web sites.

In the fall of 2004, several events came together contributing to the redesign of the OSTI Web site:

• OSTI hired a new writer, Cathey Daniels, a former newspaper reporter who understood the way people scan for information.
• One of our managers attended a Web Content Managers Workshop and heard Gerry McGovern speak about creating Killer Web Content. We were all moving toward the same understanding of how people read on the Internet. As Steve Krug says, "They don't read. They scan."
• Responsibility for maintenance of the site was put in the hands of a standards & accessibility advocate, myself.
• My management asked for a new look and improved design.
• I was privileged to attend InterLab 2004.

I had been studying usability and CSS positioning. InterLab 2004 provided even more resources. I want to especially thank Janice Nall for introducing me to "Don't Make Me Think" by Steve Krug. You should all have a copy of this book. It's a usability resource through all stages of Web site development: from planning through testing and implementation. (I think people at OSTI are actually getting tired of my references to this book.)

PNL's own Amanda Kissire gave a presentation on Optimizing Web Sites for Search Engines and shared valuable ideas such as including a search box and other navigation on 404 error pages.

She also told us about Lynx Viewer — where Web developers can get an idea of how their pages look in a text-mode browser. I find this tool very helpful when checking text and accessibility issues.

Armed with our resources and a sense of "mission", the writer, Cathey Daniels, and I were off and running.

This quote from Stephen Covey was repeated by Cameron Moll, who advises us to develop from the bottom up, creating content for the secondary pages first.

We determine these final pages on which visitors should land, then emphasize and link to them from the home page.

Not only was "begin with the end in mind" relevant to the hierarchy of the OSTI Web site, but also to it's content and coding. Our aim was a usable, standards-compliant, accessible site. We would begin from the bottom, with this goal.

I appreciate the collaboration of our team of Web developers, writers, server administrators, and managers.

• Management listened as usability issues were explained.
• Our artist, Joy Fender, was patient as I experimented with positioning formats.

Joy was asked to enhance OSTI's logo, to more obviously reflect our organization.

She decided to use the OSTI acronym behind it, emphasizing the S and T in "scientific and technical." I really liked the first image she showed me.

But, this is where the benefits of collaboration really became visible. When we excitedly displayed the image to our manager, all she could see was a weapon! That became all we could see as well.

The final image is much friendlier.

Management listened, the artist was patient, and the server administrator worked with me as well.

The server administrator, Winston Holmes, brainstormed with me about ways to avoid link rot and broken URLs using a content negotiation system.

Changing a Web address should be done with the same level of care and frequency as that of a street address. How will people find you if you keep changing your address? I was concerned about linkrot and frustrating our customers.

Some of the changes we had in mind could affect file extensions in our Web addresses. The World Wide Web Consortium (W3C) Style Guide includes the article, "Cool URIs Don't Change", which explains the use of a server content negotiation system (CNS). Winston studied this information and implemented it on our server.

With a CNS, you can format links without file extensions. The server returns the file with the name you specify. If there is more than one file by that name, say, interlab.html and interlab.shtml, preferences can be set as to which type of file to return first.

Ideally, you would not use the same filename more than once. Links formatted without extensions remain relevant for years as technology changes: index.html, index.shtml, index.jsp, and so on.

Winston made my job easier by setting up the server to allow server-side includes (SSI) instead of JavaScript files for a more accessible menu, even in files ending with .html. I could include the master files — menu, header, and footer — without changing the primary file extension to .shtml. But, in consideration of future technology, I used the CNS and formatted links on our site without extensions. Who knows where we'll go from here, what extensions we'll be using two years from now?

The team at OSTI was open to changes and improvements focused on usability. I'm fortunate to be part of such a team. For those people in situations where change is not embraced, I recommend following Andy Clarke's advice: Take the path of quiet revolution. Just do it! "Simply use CSS layouts and valid markup wherever you possibly can. You will have a greater sense of achievement and your managers and clients will thank you in the long run."

The OSTI site already met Priority Level 1 of Section 508 compliance, had resizable text, and good download time. In the redesign, we looked for ways to enhance a feature most critical to delivering DOE research to citizens — our search feature.

Our recommendations for improvement were to

• Format the site with usability in mind, placing items on the page in standard locations that users have come to expect.
• Include our search products in the menu, where they are available on every page.
• Use resizable text rather than images for the menu.
• Decrease the amount of text on the page and make it more scannable, readable.
• Give the site a one-step search box, available on every page.

Steve Krugg says that if you want to come up with something new, it had better be intuitive. Things that make sense to people and are easy to follow become standards, just like the traffic light. People know what to expect and the flow of information is more efficient.

OSTI is not a design firm, where users come to see the latest and greatest bells and whistles on the Web. OSTI delivers DOE research results. By using layout standards with which users are already familiar, we can clear the path to that research information, and more efficiently accomplish our mission.

I can't say enough about the appropriate use of text and markup. Search engines love text and the more accessible your pages are, the more indexable they are.

A search box has become one of those standard features that users expect on every page of a site. OSTI serves DOE research results with excellent search products. Our recommendation for the redesign was to move the search box up a level and place it in the highly visible and expected upper-right location. You can now search for research in all of our products, directly from the home page.

After our team reached consensus on the desired layout, I provided our artist with a barebones template. She designed images around that layout, and we worked together as I positioned all the elements in the stylesheet.

Here, is the result. You can see the barebones layout behind the design.

Our new Web site went online Thursday, September 29. On Friday morning, a colleague met me at the door with this image from one of the computers in the building. (IE5.0)

Even when you test your developing site on all browsers types and operating systems you can find, surprises can still happen the morning after.

You can imagine what happened to my sense of accomplishment. Someone wasn't getting research results very well. By the following Monday morning, I had figured out the culprit was a right-floated div outside of my maintext div. Internet Explorer 5.0 didn't like it. As soon as I moved the News Box inside my maintext div, the problem was solved.

The same computer that had IE 5.0 also happened to have Netscape 4.7. Here's how the page looked in that browser. (Show NN4) From what I've read, the best way to get stylesheet positioning to work in Netscape 4, is to hide it! Netscape 4 will recognize the stylesheet only if media="screen" or if there is no media attribute in the stylesheet link. Using media=all effectively hides the styles from this old browser. With the styles were hidden, the page is functional and usable. A note at the top encourages users to upgrade.

Just last week I learned that specifying media="all" creates accessibility issues with screen readers. So, when I get back home, I'll be following up on that and probably using the CSS @import rule. I understand it's a common workaround with Netscape 4.

This information came from the css-discuss Wiki, listed on your handout. (A companion to the CssDiscussList mailing list.)

I'm not advocating that you continue to support these older browsers. Look at your user base and your mission. We've recently found that 9.1% of our users are still using IE5.0. Only 3.1% are still using Netscape 4. If you can resolve these issues without too much trouble, go ahead and make your pages useful if your numbers warrant it. Continue to encourage these users to upgrade.

As OSTI has increased online accessibility of DOE research, the number of citizens taking advantage of our resources has greatly increased.

In FY 2005, there were over 38 million transactions by individuals accessing OSTI resources — more than double the FY 2004 number. The research information is freely available on the Web.