The new website for the Monterey Institute of International Studies went public on September 15th and is a combination of efforts from many areas of both Middlebury and MIIS, as well as brand new designs from White Whale Web Services. During this project, I got asked a lot, “So if you’re not building the new site, what are you up to?” And I thought I’d take this opportunity to answer that question, tell you how we developed the site, and give some previews of how we’re using what we learned to build the Middlebury web site.

Drupal

We selected Drupal as the platform for these sites because of its reputation of having a solid foundation, allowing large flexibility through modules, and having a huge developer and user community. There were also members of our team who had worked with Drupal on other site projects and could bring their experience with the platform to bear here. The fact that it’s free certainly didn’t hurt either!

But in looking at the features and functionality of Drupal, we encountered a problem. There are several ways to build out a site hierarchy and assign user permissions at each level of the hierarchy, but they don’t scale particularly well. Perhaps our biggest frustration with our current CMS, as site administrators, is how much time we devote to setting editing permissions. We wanted to simplify this task and put it in the hands of our content managers.

Monster Menus

Amherst College noted this problem as well when they moved their website into Drupal several years ago. Fortunately for us, they developed a solution named Monster Menus which adds both a way to build a site hierarchy and to assign permissions at each level. We’re hugely in debt to their work on this feature, and to the assistance of Dan Wilga who helped get us set up with a version of it.

The screencast linked to above does a much better job of explaining what Monster Menus is and how it works than I could hope to do in this space. In addition to the permissions features demonstrated there, Monster Menus and its related modules offer several other key features when dealing with a website where you know you’ll have thousands of pages and potentially hundreds of content editors:

• Lets you define the node types (think: page types like FAQ, Profile, News Article) that are available at any level of the site. This helps guide the content editors so that News stories aren’t showing up in the Course Catalog.
• Defines a content treatment for “sidebars” that automatically cascade down your site hierarchy. This way the Giving site can have a sidebar button to the Give Now form, create it on their site homepage and have it display on the right side of any giving page.
• A way to do specific scoped searches of content across your site.
• A content type for displaying an automatic list of sub-pages of any page on your site.
• Through the Media module, a file browser that lets you easily upload and include attachments, organizing them within your site hierarchy.
• A content type to display RSS feeds from any source, including feeds from pages or tags within the site.

Amherst also developed a full profile management system, named Amherst Profile, that is connected to their administrative database system and offers a sort of portal for members of their community. At this time, we decided not to implement this feature for our sites both due to time constraints and because we’re answering different questions with our sites than they answered using Amherst Profile.

Again, I want to thank Amherst for sharing this module with us. I don’t know how we would have been able to implement all the features it offers within our project timeline and have the interface come out as clean and easy to use as it is in Monster Menus. We’ll be working with the development staff at Amherst to do continuous improvements to this module, though much of that work will need to wait until after the Middlebury site launch.

The MIIS Home Page

I want to take you through each of the page designs for the MIIS site and explain how they work. This begins with the Home Page. This page has three main content areas: Be the Solution, News & Events, and the MIIS Spotlight. Be the Solution is a list of terms from a custom defined taxonomy. I used a function to fetch the taxonomy dynamically so that any additional terms will be immediately reflected on the home page. The links to the term pages are then based on the term names. MIIS can choose to grow or reduce the themes their institution highlights on the main page. During site development, their Web Strategy Team came up with an initial list of 17 themes (which they considered incomplete), then reduce the number to 5, and currently display 12.

The News & Events and MIIS Spotlight features are two places where we used the Views module for Drupal to display site content. MIIS Spotlight shows a block view that selects randomly from the story archive any news item specified as an MIIS Spotlight. I used a separate field on the News Story content type to allow editors to select whether their node was a Spotlight or not. This could also have been done as a separate content type, but that would have been a duplicate of the News Story content type and less efficient to maintain. It could also have been handled using a custom taxonomy, though the MIIS site already uses several of these and the editing form for News Stories is quite long as a result.

The other areas of the page, such as the list of languages, links to social networks, address in the footer, links below each of the features (such as “Expore academics as MIIS”), and quick links in the footer were all set using Advanced theme settings. These allow site administrators, or others with the Administer Themes permission, to make updates to these areas through the site administration interface without having to contact a developer to update the page template. The user interface for doing this isn’t particularly user friendly, but the settings need to be changed rarely enough, and by people familiar enough with the site to figure this out, that it’s much less painful than the alternatives. Some of these, such as the Quick Links, could have been done as a custom block in much the same way, but for others like the News Feed URL it was more easier done with theme settings and so I decided to keep both settings in the same interface.

Theme, or “Be the Solution” Pages

Examples: Business, Environment, Translations & Interpretation

We originally called this the “Theme Template”, but as you can imagine this got really confusing when we starting throwing around the word Theme in its normal web development context. The thinking on each of these pages was that they would be an aggregator of content related to each theme. Since we used a custom taxonomy to build the list of themes, we could tag various nodes in the site with each of the terms and they would appear on these pages in some sort of custom defined columns.

The problem was that we didn’t have a good way to get those columns. Some of them, like Degrees & Programs, indicated that the content nodes would be in the Academics portion of the site, probably nodes with the Page content type, which we would need to distinguish from nodes in the Careers section of the site using the same content type, tagged with the same term. At the time, Monster Menus didn’t have a way to select nodes tagged with a term in a particular portion of the site tree, so we worked with developers at Amherst to add that feature. I’m hoping later to add functionality like this to the Monster Menus Views integration, so that a view can be passed an argument to select nodes within a portion of the site tree.

This worked well for a time; MIIS editors could enter paths to areas of the site, we would fetch that page’s title and use it as the column title, then select a certain number of nodes from that area of the site tagged with the term for that theme. This works really well if you’re selecting news items, or a photo stream, or other content this is refreshed periodically because the theme page will always show the latest nodes tagged with that term. It works really poorly when used to select a list of degree programs where the institution needs to place the items in a defined order. To solve this, I split out the Degrees & Programs column into its own field using the Link module for CCK. We can now enter the links to degrees in whatever order is required and then specify any number of additional dynamic columns.

More to Come

This is getting to be quite lengthy and there’s a lot to discuss about the MIIS site. I’ll end the post here for now and make this a series of posts on the topic. Check back shortly (or subscribe to this blog’s RSS feed!) for a new post on the section pages, course and faculty views, and our struggle to come up with the perfect sub-page list bucketing algorithm.

In the mean time, if you have any questions about the MIIS site and its technical implementation, leave a comment.