Just Like in the Brochure…

I am so proud of our crew of WebFolk at UNL. Today is our first day in the Big-10 and to celebrate, we shined-up our Template design again. This was much more of an evolutionary change than we have seen previously.

Up to now, changes have been incredibly minor after really radical updates. Most people don't even notice the difference between how the page looked a month ago and how it looks today, and then every three years or so it gets really updated.

The change this time was an update to our navigation.

Navigation on UNL Web pages has been a challenge. We started with just a column of links, for years. The design updated, but the page itself was just a column of links. Then we went with the "UNL Today" model, where things started changing every day, and sometimes several times per day. That was when people really started paying attention to the page, as you can imagine. And that was when the navigation changed to an horizontal orientation.

This served us well until politics and technology caught up with us. And then we rolled out an ingenious biplane horizontal navigation scheme that was a wonder to behold. It was Hell to try to teach, because it was hard to understand, but yeah, depending upon where your mouse had been in the upper deck, you saw other links in the area just below it. Worked in all browsers and was really an inspired bit of programming on someone's part. But, it was very hard to teach people how to deal with navigation that changed like that. And it wasn't a proud moment in accessibility, either. So when the template changed again, the navigation waterfalled down the left side of the page, in what became the first column. When navigation ended, we had a brief word from our sponsor—a rotating image of postage-stamp -sized news or local-interest pieces. And then came the related links.

This was much easier to teach, and much easier to use. Since the page itself scrolled vertically, you could literally have as many menu options as you wanted or needed, and, sadly, there were a few sites that went that route. But there were also sites that didn't have a great many links and those sites looked… odd.

You had, at the top, navigation in the first column and then text and images that you really wanted on the right. But if you had scrolled down a ways and run out of navigation, alerts and related links, you had this huge area of white space in that first column. Images that cried-out to be displayed full-width were constrained within those other columns that were open to editing by the developer. The navigation had to move, again.

We ended up with it on top of the page. Now, it was up and out of the way of all of the content, and the use of digital cameras and HD-video went up dramatically. But the way we'd implemented it was kind of clunky. For most people, navigation is a modal operation. That is, while they are "navigating" they aren't really concerned with anything else. So all of the links went into a giant shelf that popped-down when it was needed. How did we know it was needed? It detected that you had moved your mouse over any of the navigation links in the navigation block. Kewl. Except that we had quite a few pages where you needed to log in (above the nav) and then needed to work with data in forms on the page (below the nav). Crossing the navigation revealed… all of the linkage. We fine-tuned it a little by putting in a timer so that it didn't reveal all of the links unless you had actually stopped moving your mouse for a little more than half a second and that improved things, but it was still kind of clunky.

Last night, the school joined the Big-10 conference, and we celebrated by rolling out a New&Improved navigation. The links themselves were marked-up in countless pages, so we couldn't change that. All we could do was adjust the Cascading StyleSheet and the behavior it used on the navigation area. And that change rolled out last night.

And it went almost perfectly. I have received, as of lunch on the first day, exactly one telephone call about it, and no e-mails. It was fairly easy to walk the user through fixing the problems she was having, having mostly to do with page validation, after all. The whole thing was surprisingly pain-free.

And all it took was a little careful attention to the rules. Huh! Who'd a thunk it?