redesigning lclark.edu

December 2007

Interim Home Page

New Media is about to launch an interim series of home pages for the period from now until the website redesign implementation replaces them. (As such, this is clearly not intended to replace the redesign process, but merely hold us over with some enhancements.) In case you are asking yourself why this is necessary at this juncture, here are the reasons for doing this now:

  1. Better Presentation — the interim design is more open, more welcoming and has much better readability.
  2. Improved Code — this design offers improved accessibility for the disabled and uses modern web standards, with proper semantic markup (valid HTML/508). And, the design has been successfully tested in browsers representing 98%+ of our current external site traffic.
  3. Better Content Organization — the design satisfies a need to have a “On Campus” news and events focal point separate from spotlights and “standard” news or events content streams.
  4. More Dynamic — the interim home pages are composed on demand. Many of the content elements are being supplied to the home page via RSS, which we will be able to repurpose for other site elements, or even for Facebook.
  5. Timing — the redesign Implementation is at least six months off.

As we have no intention of altering Trillium’s templates (there are many) nor the wish to go deeply into content and link issues on the home page (as those will rightly be discussed in the redesign process), this interim design does not move too far from Trillium’s basic design constructs nor rearrange page content significantly.

This interim design will be carried through to each of the school’s home pages, keeping intact their current respective differences from the home page (backgrounds, content, navigation, etc.). We are only providing the institutional home page at this point, since the changes to reflect each of the three schools are relatively minor from a technical standpoint. Other differences are outlined below in the design notes.

http://lclark.edu/index.php

Barring unforeseen issues, we are planning to launch this design on Thursday morning, 20 December. If you would like to reply with your feedback on this interim design, simply make a comment on this entry. And if you’re serious on participating, fantastic! You’ll want to read the design notes.

Thanks,

David
David W. McKelvey
Director of New Media
Public Affairs and Communicationsmckelvey@lclark.edu

Filed Under

18 people have already made the whale happy; but who couldn’t be happier?(Go ahead, make a comment…)

Interim Home Page Design Notes

http://lclark.edu/index.php

Overall

  1. The design is table-less, and flex-width (between 760 - 960 pixels), which allows greater flexibility of design. See my blog post regarding the importance of this.
  2. The font size for all content is larger, and the leading increased to facilitate both readability and a more open feel to the design. And, if you have them, the page will display in the proper fonts Goudy Old Style and Helvetica Neue and degrade to secondary fonts if not.

Header

  1. The “Lewis & Clark” wordmark is now much stronger than before, as it should be. For school home pages, the wordmark would include the school’s name along with “Lewis & Clark,” per the standard usage.
  2. Several of the redundant links in the upper-right have been removed to accommodate the “Portland, Oregon” elements and make it more consistent with the Trillium templates. The maps link is now much bigger for easy use.
  3. While I would have liked to move the webmail link from that area, since it is slightly incongruent, it is also the most used link on the page, and I did not want to upset standard usage until the redesign.
  4. The photo at the top is much larger and more intimate, and would be randomly selected from a series. I did consider an image rotation routine, but as the home pages are often pass-thru pages, I doubt many people would see the rotation for the trouble. The focus has been pushed to include more people photos to engage the site visitor more personally. Additionally, school home pages would show only photos from that school.

Navigation

  1. The navigation is almost identical, save the application of consistent link mouseover styles.

Left Column: Spotlight Features

  1. The spotlights now take up just over half of the available area, giving the space both a better emphasis as to what’s more important, but also a more dynamic design. It is led with the title “Featured” to emphasize that it is not changed every day.
  2. There is now a “suggestion box” for spotlights woven into the “More, More, More” segment at the bottom of the section. It sends emailed suggestions to New Media.

Right Column: Today’s Information

  1. The right column now focuses your attention to the “daily” quality of it, specifically with the date appearing beneath the “On Campus” column/segment title.
  2. “On Campus” is a new content element intended to highlight prominent news and events items with a focus on the campus. It can hold up to three elements with one always shown and two available via the “see more” button. When a low-level emergency is occurring (e.g. weather closure), this section will be replaced with the appropriate notice. (Serious emergencies cause replacement of the entire page.) This content is fed to the home page via RSS.
  3. The news feed is direct from the new newsroom also via RSS. Additionally, when a podcast/mp3 file is available with the article, you can click and play it right from the home page. There is also a permanent news podcast link at the end of the “Headlines” section. Please be aware that the newsroom is in flux as we move towards it’s simultaneous launch with the home pages.
  4. The calendar has been simplified and is now RSS. (Which prepares us to begin using EMS Master Calendar late next semester.)
  5. The shield placement complies with the upcoming style guide and historic usage.

Footer

  1. The footer is expressly simple, with only a minimum of links.

Filed Under

5 people have already made the whale happy; but who couldn’t be happier?(Go ahead, make a comment…)

Some Unusual College Sites

Some of these links have been mentioned before, but I figured it would be worth making a little list here of intriguing approaches to college websites:

  • Oxford - just text lists (unless you click on a header)
  • Brown - unique rows style
  • Duke - simple to the Nth degree: just a search box with a few extras
  • MIT - rotating designs from student submissions
  • B.U. - sleek Flash with multiple columns, over and below

That is enough to get our minds working for now :-)

Filed Under

2 people have already made the whale happy; but who couldn’t be happier?(Go ahead, make a comment…)

Thinking outside the blog

I am a huge cheerleader for switching the content management system from Trillium to a blog software for various long-term, strategic reasons.  That said, it is worth thinking a little “outside the blog” (if you forgive the bad pun) before next steps are taken and ponder what is out there besides blogware that could be used.  And I mean, beyond all the typical CMS pitches that colleges get…Two thoughts come to mind: Wiki: A college site could be based on wiki software, where each department could collaborate on their content (and lock others out).  For an example of wikiware, see MediaWiki at http://www.mediawiki.org.  I have not heard of a college doing this, but I have used it for many projects and it was easy to see how it could scale up fairly well.Design Software:  By having people enter content into locked templates, I could see using web design software to create and maintain a site like blogware would.  I am thinking of things like RapidWeaver (http://wwwrealmacsoftware.com) or Sandvox (http://www. karelia.com).  I would never use them to create a site myself, but the cookie-cutter approach they offer could be promising for a college.File all of this under snack food for thought. 

Filed Under

Make the whale happy; post a comment.

Navigational Aids vs. Labels

There was an interesting discussion in another forum about whether to use terms such as Bursar’s Office to direct web visitors to … the Bursar’s Office. The problem is that someone, especially a non-student, who’s searching for information about payment policies might not know to click this.

And so look at this screenshot from the Army’s recruiting web site:

goarmy-screenshot

They solve this problem nicely.  As another writer had pointed out, they use common language that their audience would expect to find “careers & jobs”, which leads to detailed text that begins using the Army’s own terms -  “MOS”.

Filed Under

One person has made the whale happy; will you?(Go ahead, make a comment…)