The project

In early 2006 the Purdue College of Engineering launched a redesigned web site for the college, and began migrating some of our individual schools to the new design.

This was the end result of about a year of planning, coding, design, and negotiation by a small group (3-6 people) from our Communications Office and Computer Network, who worked on it part time while also maintaining the previous version of the site. The initial discussions that eventually led to the redesign go back to early 2004.

Steps along the way

We began the project by reviewing seven of our peer institutions' sites, looking for common content categories, navigation conventions, and terminology. The aim of this was to make the site easier to use by taking advantage of any widely accepted conventions . We also looked for content that the other sites had, but which was missing from our site and ought to be there.

Once we'd hammered out a map of what the new site should contain and how the navigation should be arranged, we built a skeleton folder structure for the new site and began filling it in. Some content was moved with relatively few changes, other parts were heavily re-written, and new pages were created to fill any gaps that our survey of peer institutions had identified.

Examples of changes to the site

When we redesigned the navigation, we went to a "tabbed" metaphor, with tabs for each of the major sections of the site, and drop-down menus on each tab. To make sure that the site remains usable if you've turned off JavaScript , clicking a tab takes you to the main page of that section, and the drop-down menus do double duty as a left sidebar of links that's available throughout the section.

One of the biggest improvements in the site was the addition of a database-driven directory . The previous site had only offered links to directories maintained by individual schools, so if you wanted to find someone, you needed to know what school they were in. The new site's "Our People" section pulls all its lists from a database, and has a simple search field for finding a particular person quickly.

Separating marketing from internal communications

The previous site freely mixed information about the college that was aimed at students, alumni, and industry partners with restricted information that was intended for internal communications between administration and faculty. Maintenance of these pages was a free-for-all , with no clear editorial ownership. Areas that should have had a strong marketing component, such as Research, might be filled instead with internal policy statements, forms and announcements that had no value to audiences outside of Purdue.

Our small web staff was regularly called on to make simple updates to pages, post documents, or restrict access to sections of the site. But, because of the muddled ownership of the content, it was difficult for the web staff to know who to go to for permission to change something when they found outdated content or information that needed to be reorganized.

As we were determining the structure of the new site, these forces led us to separate the web site into two parts: the public, marketing-oriented site, and an intranet that would be aimed more at our internal audiences.

Editorial control of the public site would be largely in the hands of the Communications Office . Administrative units, working groups and committees, and individual faculty and staff would all be able to create sites on the intranet where they would be able to post and maintain their content.

The intranet

To make the intranet work, we needed some sort of content management system that would make it easy for the faculty and staff to post, edit, and control access to their pages. We looked at a number of commercially-available products, but eventually decided that rolling our own would be no more work than adapting a commercial package , and would probably result in a system that was a better fit with our needs.

Within a week or two our primary developer at the Computer Network had a functioning proof-of-concept site , and four months later we had some early adopters beta-testing it. At 8 months, it is now a mature site with a stable structure. Development continues, however, both to polish the existing features and to add new ones.

To promote it's use, we've been holding training sessions for the support staff who will be maintaining the content that is being moved from the old public site to its new home on the intranet. This gives us an opportunity to find bugs and improve the site's usability before we begin to promote it to a larger group of faculty and staff.

Intranet features

On the public site, we made a conscious effort to build pages that would be usable in older browsers, smaller windows, and without Java or JavaScript. Because the intranet is primarily intended for Purdue engineering faculty and staff, we felt we could add features that required Java and JavaScript , since most of the computers on campus are centrally maintained, and have recent versions of IE and Mozilla or Firefox.

To take advantage of the intranet's features, any Purdue faculty or staff member can enter their Purdue email account username and password in the log-in form on any intranet page. If it's their first log-in, a portal page will be automatically created for them, and they'll have the option of creating a site where they can post pictures, pages, or files.

Everything on the intranet has publish and archive dates, and folders can generate automatic lists of links to all their currently published items . This means that when you add or upload a file you can control when it will be visible in those lists, and you don't have to remember to go and add or remove links to your files.  

Tools like an RSS Reader make access to outside sources of information easy. A small Purdue Directory Search form that uses JavaScript and Ajax can be added to any page to provide instant contact information for anyone at Purdue.

Intranet content management

Logged-in users will see an Enter Admin button at the upper right of any page where they have editing privileges. Clicking that button takes you into a management screen which varies depending on where you are. An HTML document will give you an edit form that uses an open-source Java applet for WSIWYG editing. An image will let you upload a new version or set various properties. RSS Readers let you set the URL that their headlines will be drawn from, and so on.

Folder management screens offer a list of their contents, with a menu for adding new objects, options for sorting by filename, date, or custom order, and buttons for renaming, copying, cutting, pasting, and deleting objects.

The management screens also include an Options Bar which has links to pages with other management options for the object that you're editing.

Folder options include an Upload Files page with another open-source Java applet that lets you upload groups of files and whole folders from your computer's file system by dragging and dropping them onto the applet.

Another folder option is the Folder Appearance page which lets you control what a user sees when they browse to the folder. The Folder Appearance page shows you exactly what the user will see, but each block of content can be dragged to a new location, and the way that the block renders itself can be modified through a pop-up form.

This default view of the folder has a left sidebar for main navigation links, a right sidebar for local navigation links, a header area that spans the space between them, and up to four columns in the main content area below the header. Blocks of content can be added to any of these areas by clicking the Add Content Here button in the area where you want it to go, and then browsing to and selecting the file, folder, image, document, RSS Reader, etc. that you want to add.

Anything on the intranet can be displayed in any folder's default view. Adding a document will embed its content in the page, displaying it as rendered HTML. Adding a folder will let you present an automatically-generated list of its published contents in a number of different formats: a file-view table with icons, a list of titles with optional thumbnails and descriptions , a photo gallery of thumbnails, a calendar , etc.  List items all link to the objects, and you can control how many items will be displayed, with "More..." links appearing when necessary.

All these blocks can be dragged from one column to another, reordered, moved from the body of the page to a sidebar, etc., and the page changes its appearance as soon as you release the mouse .

Controlling access

Security is managed at the folder level. Each folder has an Access Control option page where you can set who can view and edit the content of that folder.

By default, viewing privileges are inherited from the parent folder. At any folder, you can disable the acquired viewing privileges and define a list of authorized viewers, or you can add viewers to the inherited set. Individual viewers or pre-defined groups are added through a simple search form.

Administration privileges are handled in the same way, except that you cannot disable the inherited Administrators .

Because folder lists can appear anywhere, and folder default views can include information from anywhere, situations can arise where an unauthorized person views a page that includes a restricted document. In those cases, the document will appear as a line of text saying you aren't authorized to see it, but you'll still be able to view the unrestricted content on the page.

Portal pages

Personal intranet sites let you share your information with others; your portal page is where you can collect information and links for you to access easily.

The portal page works like the Folder Appearance page. At any time, you can drag blocks of content from one place to another, change the number of columns, change the way folder lists are displayed, etc.  As with folders, you can collect information from any place on the intranet and display it on your portal page.

So, if you're a faculty member on a committee that has to review a set of documents, you can place the folder where the documents are stored right on your portal page. Whenever a new document is added, you'll see it appear there . If there's a page that is constantly updated with status information of some sort, you can place the actual page on your portal .

You collect the information for your portal by clicking the Add Content Block button and using a dialog window to browse to the item. Alternatively, if you happen to run across something useful while browsing the intranet, you can click the small Add link that appears on most objects on a folder's default page. That gives you a dialog that lets you change the title that will appear on the object when it appears on your portal, and then it adds it to your page.

Open source technology

Both the intranet and the public site are built with Zope, an open source application server for building content management systems, intranets, portals, and custom applications. Zope is based on the Python scripting language. Because Python is interpreted, not compiled, you can see the results of a script change immediately, which makes for a very rapid, fluid development process.