One of the things you’ll doubtless notice about the current design of Middlebury College’s website is that it’s always the same width, about 780 pixels. This design decision was made in 2002-2003 when many people were browsing the web with monitors configured to 800 x 600 pixel resolutions. While it gives our site a very professional and contained look-and-feel, it does make several tasks difficult.

The biggest of these issue is what to do about tabular data. In the screenshot above you can see a search interface for a small database of undergraduate research opportunities. The results of this form will be displayed in a table with sortable columns. Around 15 sortable columns. That just won’t fit in the roughly 450 pixels we have to work with in the official site design.

So we have a secondary design (pictured above), which has the approved logo, the title of the page and a blue bar, which is the approved shade of blue, or as close we can get to it and still have it look the same across all browsers. Below the dotted line we’ve been given semi-free reign over what can be done in the design. Chief among our restrictions is that it shouldn’t look much like the official site design.

This CMS “rendering script” uses the same header, left navigation, and right navigation controls as the rest of the CMS, meaning that we can modularly update the way those scripts work and have it work across both site designs (as well as another new site design that’s coming up). It took a little bit of mucking with our current scripts for me to pull this off because they were designed with only having a single site to support. For instance, the header pulled in two CSS files that I didn’t want showing up on the new design. We now have a special ASP.NET User Control called “Head”, which has a placeholder for adding new CSS files and some code for handling RSS feed, meta tags, and search robots. There are then two other user controls called “HeadTags” which both inherit “Head” and override a method that lets them add in custom CSS files, depending on what part of the CMS we’re in. Athletics, Language Schools, Breadloaf, etc. all have the same basic CSS files, but each add a couple extra to complement the site design.

Similarly, I created instances of the left and right navigation columns that only include the links to content, leaving out the extra images that frame the columns on the official design and some of the extra functionality included in those columns, like the links to Gateways. These will again be useful when we implement a new site design for another area of the College that isn’t going to have these elements. Or, at least, it won’t have them in quite the same way.

I’ll have more on this search page: what it is for, what it does, and a little on how it works in my next post which will be after I get the search functionality working.