Authentic Wisdom: Jonathan Linczak
~ 23 September 2004 ~
A Giant Leap for Hiram
By Jonathan Linczak
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 AUTHOR
Jonathan 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.23 Comments
Veer: Visual Elements for Creatives.Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.
Well done guys, the site really shines :)
In my opinion, adding a personal touch (such as the testimonials) on the homepage goes a long way towards creating that “homely” feel, getting people to delve deeper - even if they might not have been that interested..
Planning and managing a project of this scale isn’t easy, but you seem to have your priorities (ie serving the users) right, so well done !
As someone who is in the conception stage of a client’s rather massive site redesign, it’s encouraging to hear that there’s light at the end of the browser.
Jon — hope you have time (and energy!) to put your own site together soon.
Great insight into a design proccess, thanks for sharing.
And congratulations on the great work done, all of you.
I’ll be expecting the Cocoon/Lenya series ;)
Thanks for sharing on what happened “behind the scenes” very insightful and inspiring. Congratulations on a job well done.
With the advent of Hiram.edu, another site joins the triple horizontal layout ranks of college websites like Stanford’s and Cornell’s. I’m sure that this style of layout is becoming even more popular these days—it’s interesting to watch the educational site community slowly converge.
I’m glad to see (enterprise) Java getting some credibility with the design community. I’m a Java programmer and web design enthusiast, and one day I’m going to create something to combine the 2 ;-)
Thanks all for the gracious comments on our work for Hiram. I’ve received many emails from individuals interested in hearing more about Lenya and Cocoon and how it was used for this project, so I think that pretty much solidifies the fact that I need to put a website together for myself and get a series going. :)
I love to hear your comments and questions, so keep ‘em coming!
Dear Jon, please be sure to let us know (maybe through Cameron?) when you do put that website together, I’d be interested in hearing what you have to say about Lenya and Cocoon, too.
Two things:
1) Yes, it would definitely be good to hear more about Lenya and Cocoon. We’re looking into a CMS for another educational project, and that seems like a good option.
2) Thank you for discussing the strategic portion of the redesign, and not just the design and development stuff that we’ve all heard before. It is enlightening to hear why people decided to use certain content, organize it a certain way, etc…
Bravo!
where are the frames?!?!
I did a survey once and I know peeple love frames.
Great site and very clean design. I love the random image on the home page. How did you do it? Which img rotator did you use? thanks
walt - thanks for the feedback on the site, or should I say David?! :)
Miha, actually, because Cocoon is all Java-based, we used a random number generator and paired it down to spit out a number between 1 and 5. That number was used as a parameter in an XSLT file that laid out what the page would look like. Then, for the time being, we managed 5 different CSS files that accommodated the rotating image sets on the page. We can do it much better so that we only manage one, but at that point, we just wanted to get it up on the web. :)
Hm. Something’s missing. Perhaps a trailing mouse cursor?
The page looks amazing - this is actually one of the first university page that really stands out. The randomized image is great.
A beautiful redesign indeed, just as everyone else has remarked…
I was curious to discover that you use the background image replacement technique on the navigation, hiding the text with “display: none”. What was your thought process for using the technique, despite its accessability issues?
As a side, to my surprise I can “select all” of the text on the page, and copy-and-paste it into a text editor and it will reveal all “display: none” text. Is this particular to my browser (Mac IE 5.1)? I’ll have to test it on others when I get home…
Hi Utahjr,
Thanks for the kind comments on the site, and your thorough research! To be honest, when it came down to the background image replacement, I followed the “Sliding Doors” article on A List Apart. I could very well be out of it, however, since it’s been a while since I’ve looked at anything outside of Hiram’s website, so what techniques are now available that you feel would be more appropriate? Do you have links describing these methods? I would love to get feedback on this!
As a side note, I admit that much of my CSS is rather bloated, and I’m a bit ashamed of that, but I never got around to cleaning things up and looking at maybe doing things in another way before we launched. I’m struggling with memory issues on our web server now and so haven’t had the time to re-look at my CSS. My apologies to all who’ve been trying to read through it.
As for the browser copy-and-paste thing, it appears that it happens in IE Mac 5.2, but not Safari. It could very well be an IE Mac “thang”.
It’s a technique that I’m still struggling with as well. A List Apart has a write-up on the technique’s controversy (http://www.alistapart.com/articles/fir/), admitting in the end that:
“Unfortunately, Fahrner Image Replacement cannot be said to be an accessible web technique when used for text. Screen-reader users either already cannot read any text marked up that way or will not be able to in the future when the software is updated to interpret CSS correctly.”
If you delve into the comments (all 5 pages of them!), you’ll see the debate continue…
I’ve been searching for an alternative technique, the latest of which is to replace the
display: none;
with
width: 0px; height: 0px: overflow: hidden;
I haven’t had an opportunity to test it across a slew of browsers, nor have I been able to confirm if this technique is in fact more “accessible.” But at a glance it seems more promising, as at least screen readers should in theory still read the text…
Until I found that alternative (a matter of days ago) I had simply surrendered to the fact that if the page element is something that a user must see to access the site (i.e. navigation elements), then I should either place the images into the html, or design navigation buttons that could use real text (which is in fact what the Sliding Doors example does if I recall correctly).
I would love to know more about Lenya too. I have turned down freelance jobs in the past because they needed content mgmt. Movable type might have worked but would not be ideal. I use it for another site I maintain but really don’t like it that much. It’s great for web logging but that is about it. It is good to know there is other free content mgmt out there.
I would also like to hear your stories about cocoon and lenya. A long time ago I tried the early stages of cocoon as I wanted to mess around with XML/XSLT and it seemed like a good system. Unfortunately I had a hell of a time getting tomcat and all the other shit to run right. I’m sure things have probably become much easier over time, but I’d still like to hear any insights you have about it.
You said you were currently having memory issues on the servers. Is this lenya related?
Hi Eby! Many, many people have experienced problems getting started with Lenya and Cocoon, and I was no exception. It’s not for the faint of heart, but once you dive in and get the hang of things, it’s pretty awesome.
The memory issues are sorta related to Cocoon and Lenya, but not totally. It turned out that one memory leak wasn’t a leak at all, while the other was just changing how much memory was allocated for Java (1 GB is now allocated!). But, let’s not give too much away. We’ll have to save it for the Lenya/Cocoon series on my website, coming soon… :)
Jon—
Quickly, just thought you should know that I’m finding holes in the “weight: 0px; height: 0px; overflow: hidden” style… I’ll test more tonight and let you know what I find… until then I’m back to the “display: none” technique as well…
*sigh* … well I’m sure by now you’ve done the same as me and thrown your hands up at this image-replacement debacle. I think I’ve read every possible alternative to FIR, and none of them pass all of the tests. For me, I’m going to give up on the FIR technique when it comes to navigation elements; in fact I’m going to give up on any CSS technique at all. If I’ve designed an image to be part of the function of the site, then I’ll just have to place it into the html itself. Since my site is PHP-driven, this is only a matter of changing 2 lines of code, so I can accept this conclusion. In the future, I’ll simply be more mindful about how I use purely graphical elements…
Best of luck, hope I didn’t ruin your day with these unconstructive posts…
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.
Linkage:
Follow me: 
1 JJ ~ 23 September 2004 at 08:05 AM
<sarcasm>Come on Jon, its just a web site… how hard could it be?!? </sarcasm>
Cameron and Jon made this project a success. Both deserve the gratitude of Hiram College, and while I am not the entire college, you both have mine.
Thanks for a great job, and a gorgeous site.