Authentic Wisdom: Jonathan Linczak
~ 23 September 2004 ~
A Giant Leap for Hiram
Without hesitation, allow me to issue kudos to all of you who contributed feedback to the Hiram mock-ups posted here in early July. Your help was greatly appreciated.
Okay, let’s dive right in and examine the process we went through to raise Hiram.edu to the level it’s at today.
With a project as large as a college website, it’s important to set aside goals that align the team’s efforts. When the time came to redesign the College’s site, the primary objective was to aim high and produce a finished product that was unparalleled in organization and design. With those aspirations, we established the following goals:
- Reorganize content for easier access
- Implement a content management system to keep the site fresh, allowing many users to update it
- Adhere to web standards
- Attract users and complement the content organization with a clean, modern design
Granted, there are also the obvious goals of meeting deadlines and staying within budget. Did I mention we started work in May and needed to be done by mid-August? And that there was only enough money for a few inexpensive servers and some consulting fees? Ah, welcome to the real world!
IA From Scratch
Our most important objective was to reorganize our content. Over time, Hiram’s site lost its original organization when new things came along on campus. Now that we had special centers for different areas of education, did that fit in under Academics & Majors, or another special category? And so on.
Our biggest complaint was that people couldn’t find anything, so we knew we had to start from scratch. Looking at example educational institutions like Dartmouth and University of Michigan (boo! hiss! — sorry, I’m an OSU alum, I couldn’t resist), and following along with the guidelines from Rosenfeld and Morville’s Information Architecture for the World Wide Web, we felt it was best to organize our content by audience and supplement that with a list of topics that people would most likely visit right away (Apply, Academics, Campus Map, etc). Fill in the gaps with a search box on every page, and we felt we had a winning combination.
Of course, I make it sound as if it came together so easily, but a process like this takes time. Rush this one and your website can fall into shambles no matter how spectacular the design. And consider this: Let the people who know the content best make the decisions about where content goes, but don’t exclude yourself. As webmaster, guide them in organizing content. After all, the responsibility lies on your shoulders to definitively know how visitors use the website.
Ode to Lenya
As part of the initial planning, selecting a content management system (CMS) was a crucial piece of the puzzle. We needed a CMS that 1) any department could easily use, 2) produced code that was friendly to web standards, and 3) gave us full reign over customizing the site’s markup. But the biggest stipulation? It had to be free. Because the hardware we ordered took up nearly all of our budget, we couldn’t spend $10,000 on a CMS. Needless to say, we tried everything, from Movable Type to Plone, and none of them seemed to fit the bill.
Then we discovered a little gem named Lenya. Surprisingly, Lenya is a nice front-end to an application called Cocoon, an XML-based web development framework. The beauty of Lenya and Cocoon is that the two are heavily based on web standards (XML is the key ingredient that makes this happen). Even better, given that they’re open-source, we could customize them however we wanted.
Cocoon is built on the theme of separation — content from presentation, business logic from content, etc. It had a steep learning curve, but it did everything we wanted to do and then some, so we dove right in. I could easily write a series of articles about how we used Cocoon and Lenya. I’ll refrain from doing so now, but send me an email if you’re interested in learning more.
Shiny New Paint
What’s there to shout about without a design to complement the content organization? I’m not a stellar designer, so it was time to seek someone that could add new paint to the site. Cameron’s sense of style and knowledge of CSS and web design was a huge plus in getting a design that worked really well with our site’s organization.
The decision process on the design, though, was a long one, almost too long. I found that no matter how great a mock-up, people have difficulty envisioning the design in it’s final form on the website unless the website is actually completed. On that note, don’t be discouraged when you reach this stage. Press on if you’re confident the design will suit the needs of the site.
Phat Markup and Even Phatter Design
A couple of issues surfaced due to the site’s design and the resulting markup. For one, the site is heavy on images, especially the front page. How to accommodate this and still keep it small in file size for those modem users?
Well, clean semantic markup is a must. CSS is a must. And the Apache module mod_deflate is a must. Mod_deflate? Huh? Yeah, not usually something you hear on a designer’s site, but incredibly useful if you have access to your own web server where you can modify the configuration. Mod_deflate simply compresses all content (except images and PDFs) before sending it to the user’s browser to be displayed. Incredibly useful, especially if you want to save on bandwidth costs (and who doesn’t?).
But what about accommodating the site’s navigation scheme? Any college site is massive, with a lot of layers of information. Our site was no exception, so the design needed to give users the links they needed without getting in the way of the content.
Consider a sample secondary page. The menu at right labeled “Additional Information” displays the next level of content. Clicking on Campus Visit Day, for example, will take you to another page where the menu at right disappears to allow more room for content. Losing that menu means losing the ability to see the menu all the time and jump from page to page. It was something we had to compromise on, and I hope that users will still find the site infinitely easier to use than the previous site.
Perfection? It’s Overrated Anyway
And so there you have it. A web redesign project in a nutshell. Did we get everything perfect? No, definitely not. But when dealing with a site of this size, it’s incredibly difficult to maintain perfect markup so that every page validates. But don’t lose sight of what’s most important. As much as I’d like to see every page validate, it isn’t as important as ensuring Hiram College spreads the word in a way that’s easy and rewarding for both the user and the College.
ABOUT THE AUTHORJonathan Linczak is the webmaster for Hiram College in Hiram, Ohio. His philosophy on the web is to create products anyone could use and that makes an impact, no matter how small, to their everyday life. Jon can also be found vehemently defending the Mac against those who feel it to be inferior to that, well, other operating system. One of these days he’ll actually have a website to call his own.
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.
Authentic Boredom is the platitudinous web home of Cameron Moll, freelance new media designer, author, and speaker. More…
Full-time and freelance job opportunities. Post a job...
A selection of fine reading, available for a limited time only:
- Jobs home page reorg
- Coming soon: Mobile Web Design, the book
- Dyson ad: Text as more than just words
- Setting sail for Europe
- Review: Sumo Omni bean bag chair
- Dashboard widget for Authentic Jobs
- Limited-time offer: $99 listings
- Nine skills that separate good and great designers
- Fire sale
- Introducing AuthenticJobs.com
CSS Mastery: Advanced Web Standard Solutions A solid round-up of indispensable CSS design techniques by Andy Budd, Simon Collison, and Cameron Moll.
Mobile Web Design A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.
Letterpress Posters The unassuming beauty of a freshly letterpressed print.
That Wicked Worn Look. Techniques for that worn, aged, distressed look.
Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.
Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.
Basecamp My preferred web app for internal and client project collaboration.
HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.
Web Design World Seattle, July 20–22. Practical sessions on web design.
Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.