I have spent the last couple of weeks developing the new tools and navigation bar for IngentaConnect. Leigh's recent post covers our reasons for making all these changes very thoroughly. It was down to me to implement them.

I use the Ingenta templating system every day but the speed at which I was able to create the new content needed amazed me. I was able to create other display formats such as print, BibText and EndNote for pages by simply adding a parameter and creating a new template file for each page with the right name, the templating system takes care of the rest.

Similarly adding things like OpenURL links to the page was a matter of finding the information available to a given page and working out how that fits into the OpenURL format.

All this relatively easy development let me concentrate on the layout and functionality of the interface. Right from the start it was obvious there was going to be too much information to comfortably fit into the limited space of the right hand column on the site. I needed to come up with a method that allowed the user to quickly find the information that they need without too many mouse clicks and without resorting to “hunting and pecking” to borrow a typing term.

The solution was to only show the heading for the various sections of the navigation bar and have sections expand to reveal more content when the user clicks on the section heading. This is fairly easy to do with JavaScript and many sites take a similar approach.

I always make accessibility a priority when developing interfaces so it was also important that the new interface would work with JavaScript turned off. This meant that I had to jump through a few more hoops. If you turn off JavaScript in your browser and visit the site you will see all of the content in the navigation column is visible. When JavaScript is running it hides the additional content and changes the section headings for content that has been hidden into links to show hidden content when the page loads. This makes the JavaScript as unobtrusive as possible.

The templating system makes working with JavaScript a breeze too. It is possible to include a JavaScript file at any level from the entire site to an individual page by adding a single line to the file that drives the whole templating system. This makes it easy to have the same HTML mark up on all pages in the site for things like the sign in form but use the templating system to include a file with the JavaScript code in it to activate the collapsing behaviour in certain sections.

After templating, HTML and JavaScript the other missing element to my side of the work is CSS. Again its possible to include CSS files at many levels within the site using a properties file. The whole hiding content was only possible using CSS as it is possible to declare something as “display: none” to hide it entirely. This would not be possible by using HTML and JavaScript alone.

Having a system that was designed from the ground up to make working with the core elements of the presentation layer of a site as easy as possible means that it is possible to concentrate on how all these elements work together in creating an interface for the client. The implementation becomes almost secondary to the functionality.