The Office of Scientific and Technical Information (OSTI) is a Department of Energy (DOE) program within the Office of Science.
OSTI's mission: To advance science and sustain technological creativity by making research and development (R&D) findings available and useful to DOE researchers and to the American people.
(Print this presentation to display expanded comments.)
We have a DOE-wide mission to deliver DOE research results.
In 1994 OSTI created the first DOE home page, and in 1996 entered the Internet era full force, converting report literature to digital form.
Department of Energy Home Page circa 1994
(Links have been updated.)
In the fall of 2004, several events came together contributing to the redesign of the OSTI Web site:
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.)
See how your pages look in a text-mode browser!
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.
To begin with the end in mind means –
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.
To create a homepage that pulls, you need to develop from the bottom up, creating content for the secondary pages first. Then determine which of these pages should be emphasized and where to place appropriate links, images, and content on your site's homepage . . .
Determine the final pages on which your visitors should land, and emphasize those pages on your homepage.
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.
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.
What makes a cool URI?
What sorts of URI change?
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.
Any time one of your old URLs stops working, you are throwing away business.
It is like refusing entry to a shop for anybody who is dressed in last year's fashion.
Fighting a solitary campaign for standards within any organisation must lead inevitably to frustration if the responses are either negative or apathetic. So my advice is to not fight one, but to take the path of quiet revolution.
. . . 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. (You mean our site does use CSS? Wow! I never knew that!)
For the vast majority of website design decisions, a convention or standard exists, which means that people will apparently know how to use the site when these conventions or standards are followed.
Use common elements that users expect.
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.
Where's the menu?
Where's the search box?
Where's the news?
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.
Try to use text instead of images to display important names, content, or links. The Google crawler doesn't recognize text contained in images.
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.
"90% of companies report that search is the primary means of navigation on their site, and 82% of visitors use site search to find the information they need. . .
80% of visitors abandon a site if its search functionality is poor.
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.
Place the @import rule inside a plain .css file, which is linked in the <head> section of your page.
Different versions of the import rule have varying levels of support from older browsers.
@import "style.css"; — hidden from nearly all v4 browsers —
@import url('style.css'); —IE4 can understand, but not NN4 —
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.
The number of transactions by citizens and scientists who avail themselves of DOE R&D research results from OSTI resources has increased substantially due to increased accessibility online.
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.
The "end" we aim for is a moving target, it's ever-evolving — there's always more to learn.
Armed with the best information available and a clear idea of the standards we want to achieve, we BEGIN the process of developing the END, the Web pages on which increasing numbers of citizens rely.
(Print this presentation to display expanded comments.)