Project Launch: Biola Undergrad

A few months ago, without much fanfare, Biola University launched its new prospective undergrad site. I of course work for Biola's IMC Design Studio as the web developer for the Web Group. The launch of the site marked the completion of a significant project that had taken almost two years. It's also the final piece of the new undergrad campaign. I wanted to mention it here because I'm quite proud of this site; I was involved from the planning stages and I labored on both the underpinnings and a good portion of what the visitor interacts with. I'm also pretty certain that there isn't another university web site like this out there. Biola is stepping out into an area that is largely unexplored by the "big leagues" of higher ed, let alone its Christian competitors.

Project Summary

Every two to four years, a new undergraduate campaign is designed in order to stay hip and relevant in the eyes of prospective college students. Biola has historically done a great job in this area, setting visual standards that then (subtly or not so subtly) influence the campaigns of dozens of other colleges. But by that time, Biola's innovating again so it all works out okay.

For the first time, the undergrad site was targeted as being a critical component of this campaign. I won't go into the reasons why that hadn't happened before; it is far too complicated. Just trust me when I say it's all very understandable when you know all the facets. If you've worked in higher education, you know what I mean.

My role on the project was primary web developer and information architect. All the ColdFusion, Javascript, HTML templates... that was my responsibility. I think I probably marked up every page, at least initially. I was also lead on creating the site architecture, meaning full structural diagrams and a thorough and updated content map. Truly exhausting. The long time frame kept it from ever being overly stressful, but there was a lot to keep track of.

Foundation

Early on into the project, after a team brainstorming session, I had the idea of creating a system to personalize anything on each page to the visitor, picking up information on what he/she was looking at on the site and utilizing it to better tweak the information. The only real failure (from a respected consultant's point of view) of the existing site at the time was that it was unable to do anything with the information that was given it through forms and visit patterns. I thought I could do something about that.

I spent several months solid designing and coding what I called simply 'the personalization system' for lack of a better name. In the admin interface, I've now labeled it "make it personal." Cute huh? The general idea of the application is that it keeps track of all information the visitor has volunteered, as well as things like number of pages visited in the current session, specific pages visited, amount of time since last visit, etc. The admissions staff is able to create any number of goals that they want a visitor to accomplish, and then leverage content, links, graphics, ads, what-have-you in any spot in the site they want using a robust rules system to encourage visitors towards that goal.

It's currently only being used in a few places; one of the unfortunate realities is no one has a lot of time to sit and think about what's possible. I hope to keep the ideas flowing though in the future. If you visit the site, the counselor area (and the lists of links to the left of it) in the large footer is part of this Personalize thing.

For the template engine itself, I've not run across an elegant ColdFusion solution for that, and at Biola we've had so many horrid ways of handling this in the past that I knew I needed something new. I ended up following the MVC/MTV as much as I could (it's the Django influence on me) and the custom tag I designed merely includes two files. The first is something like a Django view except of course it doesn't determine which template will be called; it just sets up some variables that the template will have access to. The second is the base template that the content page is extending.

It's not super flexible or robust (it's no framework), but it does the job of separating the template from the logic.

Search

I designed a custom search program so that we could have complete control over the results. The entire site is mapped out through a number of XML files. The HTML for the navigation is generated from these XML files whenever we change anything, and the XML is traversed during a search. Page records in the XML have a title, any number of keywords, a base score, and can be tagged with words like "who", "what", "where", etc so that the matching score will improve if the query was phrased as that type of question.

Design

Biola worked with a third-party design group for the design of the new undergrad campaign. I'm not going to mention the name of this group because unfortunately it was not a pleasant experience. We got some great artwork but much more was promised that was never delivered, or delivered months (like, 6-8+) late. There's also a video tour of Biola that you won't see on the site right now. It was supposed to be finished a long time ago. We don't know when to expect it. Live and learn, I suppose.

Originally, this design group was going to play a role in the development of the site, mainly in providing style guides and working out some layout ideas. As the months dragged on and we were given the barest of mock-ups (and nowhere close to good at that), it became clear that we needed to cut our losses and do the work ourselves.

That's when Tim Beardshear, IMC's senior web designer, joined the project and what you see now in the visuals is almost entirely his work. (I tossed in the idea of using a large footer area for a resource area, though of course I borrowed it from many sites. But it's not seen often, if ever, on university or college sites.) Tim did an excellent job at translating the print design to the web, and I'm still impressed with the background pattern he created.

Tim also crafted the CSS for this project. I did some CSS myself on the early wireframes, and implementing an early version of the elastic layout. But Tim made it work with the myriad variables on the content-rich production site. And he handled the challenges I threw at him by my insistence on proper source code ordering. One of my favorite parts of Tim's design isn't visible right now; the content, as well as the MIA video, isn't ready yet for some new sections of the site. Be sure to play around with the elasticity, it's a lot of fun on this site I think.

Web Standards

My biggest goal was insuring that the site follow web standards, and by that I mean not only W3C validation (non-semantic usage of tables validate after all) but semantic markup, source ordering, graceful degradation, and overall accessibility. The IMC team, especially my boss, was supportive of this even if they didn't completely understand what the big deal was.

The completed site validates as XHTML 1.0 Strict, uses semantically meaningful ids, and features very intentional source ordering. If you take a look at the source code, you'll see it looks very little like what you'd expect from the visual appearance. The idea behind this is to structure the content so it makes the most sense if all CSS and Javascript is disabled (which happens more often than you might think). The content on each page is most important, not the global navigation or resource links, so it's prioritized first.

I also had fun with adding microformats to the site wherever I could. Biola's hcard is available on every page.

Forms

Another favorite mini-project from this site is both the markup and style for the forms. Working at a university, a lot of request for forms come my way and I always wish I had a consistent method that would work for every one. I finally settled on an approach I like for the markup, inspired/borrowed largely from Wufoo. I ended up building a form creator that would integrate with the database behind the site.

Technologies

I've mentioned some of these already, but here are the various technologies that I used for this site.

• jQuery
• Thickbox
• ColdFusion (lots of components)
• Microformats (so far just hcard)
• Ajax (live search)

Has anyone else noticed that Thickbox is cropping up everywhere across the web? So many sites I come across use it, including a notable e-commerce site I was on the other day (can't remember which one right now). Way to go Cody! Mad props, man, mad props. :)

In Retrospect

Two months later, there are still some neat features to be added and some areas that can be expanded, but it's a complete site and a project I'm proud to have had a hand in. Take a look and let me know what you think. I'd love to hear some feedback. It's getting good reviews so far on EduStyle.