Stiftung Ökologie & Landbau

SÖL (Stiftung Ökologie & Landbau) is an important institution in the organic sector. Revelate was called in to redesign their main website (www.soel.de, one of the most important web resources in that field). Subsequently we were asked to design and produce a seperate site for Gut Hohenberg, their educational and experimental farm.

The original site had several problems:

• A frameset structure, creating indexing and bookmarking problems as well as display difficulties on smaller screens (the usual frameset problems).
• A lack of clarity in the navigation structure, making it hard to appreciate the amount of content (roughly 1000 documents) and even harder to find it.
• A not-so-elegant look and feel

Design

In order to improve usability, the frameset was removed and several improvements were made:

• Full top-level indexes, with explanations of the various sub sections
• A breadcrumb of links to indicate the current location within the structure
• An Improved search function
• A new set of documents aimed at first time visitors
• A Clearer homepage (see homepage section)

Visually, the design was based on a newspaper masthead to reflect the main focus of SÖL as a provider of information. It was also made cleaner and lighter. On the most important pages various pictorial elements were introduced to improve scanability and aesthetics.

Homepage

The homepage of soel.de is mostly news items and this has proved very popular. On the other hand it was not working as a functional gateway to the rest of the site. It also made the organisation very obscure for first time visitors.

Part of the problem was that everything was listed as text links making it was impossible to appreciate what was available without actually reading the individual links. There was no hierarchy of visual elements to organise the page and help the eye make sense of it.

The solution consisted in depicting the elements visually in a way that was conceptually coherent. For example the link to the very important address database is now a complete form which is a both eye catching and practical way to access to the database.

By keeping the news items very high in the page, we ensured that these improvements were not made at the expense of the users who regularly visit this news resource.

Implementation

The soel.de site is deceptively simple. We were keen not to interfere with the workflow of the editors who were used to uploading simple Dreamweaver pages. However we did want a separation between content and presentation as well as an easy way to make global changes (typically to the navigation).

We knew from prior experience that when the navigation structure was placed in every page via server side includes the editors could get confused and occasionally break the structure of the page they were working on.

On the other hand a complete content management system would also have been unsuitable, for several reasons:

• Expensive to buy and implement
• Would involve converting all the documents to the CMS's format
• The URL's would be new (breaking all the incoming links) and would be of the unfriendly CMS format, making them difficult to copy from a printed article
• Would lack the flexibility of Dreamweaver when editing the pages
• The editors were already familiar with Dreamweaver and FTP
  

In order to solve this problem we developed a custom program in PHP that would place all the navigation elements on the fly.

Consider the following web address:

www.soel.de/projekte/internet.html

Although it looks perfectly normal, the "/projekte/" section is not actually a folder but points to a program written in php. The "/internet.html" ending informs the program to go and collect the page "internet.html" which is stored in a completely different folder.

The program then has to identify all the links (to images and other web pages) and alter them to fit with the pages new location, before wrapping the navigation bar around the content and finally delivering the complete page to the visitor.

This is quite hard work for the server, so the complete page is written to a cache which is automatically updated when any content is modified by an editor. Thanks to this, page delivery is only slightly slower than standard HTML pages and much, much quicker than database driven pages.

This system was extremely well received by the editors, for one simple reason: it didn't in any way interfere with their previous work, nor did they have to correct broken links or any of the other tedious tasks involved in site relaunches. They simply went to bed with a site that had poor design and woke up with one with great design.

Gut Hohenberg

Gut Hohenberg is SÖL's research and educational farm. Since this is an increasingly important part of SÖL and is targeted a wider audience, it really needed it's own website.

For consistency we used the same basic design as soel.de, but with a navigation system that is more appropriate for a smaller site. In terms of look and feel, the design conveys the playfulness and fun of the farm and makes large use of photographs.

The implementation system is the same as soel.de, enabling the site to be regularly updated from the farm itself. Added features include a rotation system for the top photographs and illustrations.