In early 2003, Oxford University Press (OUP) asked us to help reorganise, redesign and redevelop the public area of oed.com, the web site for the Oxford English Dictionary (OED).

We had helped design and build the original OED marketing site in 1997, which had been maintained and extended by OUP.

The new site was launched in October 2003. It was redesigned by OUP in 2010.

Purpose of the redesign

The original site was developed in 1997 when Netscape 3 and IE 3 were commonly used; the standard at the time was HTML 3.2 and CSS wasn't available. In addition, the site's main colours were limited to the browser-safe palette because most people had 8-bit displays in 1997.

The site was first launched with less than 50 web pages and has been maintained by Oxford University Press since then. By 2003, the site had grown to nearly 370 web pages, and much of the new content was buried deep in the site.

OUP had replaced the section buttons with text links in side navigation. The addition of a dynamic JavaScript menu to list lower links posed some accessibility problems.

Features of the redesign

History of the Dictionary, before

History of the Dictionary, after

The site has been completely reorganised and extended, resulting in nearly 600 pages in four content sections.
A dynamic home page allows authenticated OED Online subscribers—the subscription service to the online dictionary—to start searching the dictionary. A sign-in form appears for non-authenticated visitors.
Each content section, plus the general site pages, has been assigned a distinctive hue, which has been applied to section-specific elements on pages.
Navigation has been split into global and local navigation, plus links to related pages elsewhere on the site. In addition, context links (breadcrumbs) on every page show the shortest path to the home page.
Links to the home page, the four main content sections and the Word of the Day (part of OED Online) are available at the top of every web page and are displayed quickly.
Local navigation is on the right of the page, giving priority to the content.
To keep the local navigation simple within the large number of pages, the current page is shown in the context of its parent page rather than in that of the current section.
The OED Online tour, originally created using frames, has been converted to the new design without frames.
The site uses relative font sizes and percentage widths to achieve a liquid layout.
Some especially large web pages are sub-divided, and given their own linear navigation, to make them more usable.
External style sheets are used for presentation. They make use of advanced CSS features, and yet the site still worked and looked acceptable in Netscape 4, notorious for its poor implementation of CSS.
An additional print style sheet hides web site navigation from print-outs.
The site is built and maintained from structured page data, HTML templates and separate content files. Consequently, the site structure can be revised just by editing the page data.

Page elements

"Oxford English Dictionary"

"Oxford University Press"

Find Word

Enter OED Online

Welcome

Feature

Free Tour

Link to the home page

Site section links

Link to "Word of the Day"

Link to featured page

General site links

Site search

Section graphic

Context breadcrumbs

Page footer

Local side navigation

Related "see also links"

One or more pull-quotes

Project stages

1. Define requirements

We drafted a requirements document for the new web site. The document included design requirements and a style guide. As the project progressed, the document was extended and refined with OUP.

2. Reorganise the content

We ran a one-day workshop at OUP to reorganise the site structure. To do this, we created a representation of the existing site structure, using coloured sticky notes on several sheets of A1 paper.

With the sheets attached to the walls of the meeting room, we then discussed the problems with the existing structure and the requirements of the new structure. We then built a new structure on blank sheets of paper by moving the sticky notes around.

The result was photographed and converted to a spreadsheet and a 2D diagram to capture the new site structure. As the structure was refined throughout the project, the spreadsheet was updated.

Using tools we developed, the same spreadsheet was later used to generate the web site.

3. Define the page layout

We worked with OUP to decide what common elements should exist on each web page, where they should be placed, and with what prominence.

To define the page layout, we compiled a list of page elements with 0UP, such as links to the main content sections, a copyright notice and pull-quotes. We then created prototype page layouts with different combinations of elements. Using feedback and suggestions from OUP, these were developed and refined until a page layout was agreed.

The page layout was incorporated into the requirements document, and a colourless prototype page was created. We then used the requirements document to write a design brief for our chosen graphic designer, Francois Jordaan.

4. Graphic design

The page layout which accompanied the design requirements

The designer developed three design routes. We applied each design to three pages within the site, and we also created a set of pages using the same section colour, so that colour would not be the deciding factor between the routes.

The design routes were presented to the OUP project team and to key OED staff, including the chief editor of the OED. One route, with the addition of tab-style navigation from another route, was a clear favourite.

Through iteration, we reached a design for the home page and inner pages that OUP were happy with, and that fulfilled the key original requirements.

5. Other updates

OUP added and reworked some of the content on the web site. We reformatted the pages and some of the pages, we added a detailed listing of pages on the combined site search and site contents page, and also applied consistent styles to content elements, such as lists of featured links, off-site links and lists of links to headings on certain pages.

6. Content management

Pages are generated using a site generation system we developed in perl. The flexible system makes use of separately-held page templates, an XML page database and content files. OUP can generate their choice of live or pending pages using a simple web-based form.