redesigning lclark.edu

August 2008

Award-winning college sites

Edustyle.net recently posted the results of the first annual Higher-ed Web Awards to “celebrate the best work in college and university websites. Nineteen categories recognize the most innovative and exciting developments in key areas of higher education web development.” Looking through the winners and nominees can be an eye-opening experience, as there are some beautiful and useful sites out there.  Sometimes sites can even be both beautiful and useful (at least that’s what I’ve heard).

The overall winner was Ball State. The “people’s choice” award went to Boston University.  See the full results here: http://www.edustyle.net/awards/winners.php

Filed Under

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

Making AJAX Ro(a)R

Since McAfee is offline due to some construction, Robb and I took ourselves off to a cafe and are taking the opportunity to continue learning a new web development technology called Ruby on Rails, or RoR for short. (If you’ve used any 37Signals product, or Twitter, you’ve been using a webapp developed on RoR.)

Both of us learn best by doing, so we are each building some smaller sites using RoR, in addition to actually developing a new web service for Lewis & Clark using it. Beyond all the CS technical jargon, like MVC, the best thing about RoR is that for us doing the coding on the back end, it creates an environment which automatically handles a lot of the messy technical details (like talking to databases) for us, allowing us to focus instead on the experience we want to give our users. What a concept.

And, since the best thing since sliced-toast on the web is AJAX, or the ability to update a portion of the web page without reloading the whole thing, I thought I’d quickly outline how really easy that is to do with RoR.

First of all, I’ll assume you’ve already created a RoR app and done all your setup to create your first controller, say myajax. (A simple way to think about the controller is that it is the thing that “answers” when you ask for a web page at a particular address.) And, I’ll assume you’ve also used the scaffold command to create your default views. (Views are the templates for the web pages that you receive in your browser.)

So, that all sounds like a lot, but like I said above, once you’ve got RoR setup, it took about three commands and thirty seconds to complete all of that.

To do some AJAX, you start by including the standard prototype libraries in your view layout, all with a single method in the <head> of the web page:

<%= javascript_include_tag :defaults %>

Then, in the view template that you want to have the ability to be updated by the AJAX request, include one of the two primary remote call methods — form_remote_tag or link_to_remote — as the action that will initiate the update. (I’m new to this, so I’m sure that there are more, but these two cover most of it.) Naturally, you have to supply the :url parameter and perhaps some additional information for your request. That could look something like this:

<%= link_to_remote("Test AJAX!", :url =>{ :action => "hello" } ) %>

Elsewhere in the index view, I’ll also drop in a little html to demonstrate the update, say something like:

<div id="myinfo"><p>Update this!</p></div>

Then, close that file and create a new file called hello.js.rjs in the same myajax view folder. (Here, the proper thing to do would be to add a “hello” method to the myajax_controller, but it works without for this example, so we’ll move ahead.) In the new file, write a single line of code such as the following:

page.replace_html "myinfo" "<div><p>I've been updated!</p></div>"

Which, in all it’s glory, essentially says go replace the item on the page with the id of “myinfo” with this new stuff.

And now the big moment, fire up your app in mongrel (Ruby’s webserver) and load the index page. You’ll see the “Test AJAX!” link and the “Update this!” text, and if you click the link, you should see the text change to the new message “I’ve been updated.”

Admittedly, this example is really basic, but if you do a little investigation into RoR’s page method, along with everything you might learn about formats in the controller, you’ll see how easy this really is. (And I’m not even getting to the easy visual effects.) And don’t even think of comparing this to the “old way,” like writing your own javascript implementations, and the back-end database hooks.

Happy coding.

Filed Under

Make the whale happy; post a comment.

LC Redesign: Strategy Phase Complete

Prior to my arrival here at Lewis & Clark, the institution went through a very significant strategic communications process. This process highlighted communication issues that we as an institution needed to address to be more successful in communicating to our various audiences. (Haven’t seen this? Read the  Message Platform.) Long story short, one of the major initiatives to come out of this process was the need to redesign the website, and in particular to bring its design and content in line with who we are as LC.

So, we went through an RFP process to get some help with what we expected would be a major effort and after six proposals and two presentations, we selected White Whale (WW), a small company that consults on educational web design and development. Frankly, they seemed like the coolest, smartest people around and in mid-March when we began to work with them, we learned our expectations were right on.

The first thing we did was set out what out goals were for this phase of the project — the strategy phase. Specifically, we outlined three primary goals:

  • complete a visual redesign of the home pages, to make the site better reflect who we are as a community;
  • re-architect the navigation and content to make it more accessible and again better reflect us; and,
  • assess the future of our content management system to decide what features or abilities it should have, and whether Trillium would be able to fulfill those needs.

The goals above are the big picture, and each has developed a number of elements that are also significant, but we’ll tackle those in the discussion that is to follow.

And what is to follow? There is a lot of discussion to come here — White Whale started us off with meetings across the three campuses with all kinds of people and the discussions that we had have formed a good part of the direction this redesign has taken. Since that time, we’ve worked through the major goals above completing our strategy phase and are ready to present all of this for comment from you, the LC community.

So, without further adieu, we’ll start with the visual design in the next post, then bring in further discussions on the navigation and content, as well as Trillium in the next few posts. And look for posts from Jason Pontius, president of White Whale will be jumping in here to author and comment as well.

I do hope you’ll participate. We’ve spent a good bit of time talking about ampersands and word marks, in addition to how to foster “community” and reduce the siloing that occurs both without and within the three schools that are Lewis & Clark. But that isn’t enough, we want your thoughts, impressions and opinions on this redesign.

Join us.

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

Filed Under

Make the whale happy; post a comment.

LC Redesign: Visual Design

What follows is a discussion of the website visual design in its current state spanning the four home pages (institutional plus the three schools). It begins with the institutional home page and highlights the major elements and functionality, and then proceeds to the school home pages. To see any of the designs below in a larger size, simply click the design.

Institutional Home Page: Brook Brisson

Site Header (navigation/word mark)

Institutional Home PageThe site header (the top of the page through the tan bar) will be used on every page, regardless of school, department or other page. (As before ~tilde accounts are considered personal space and are not affected by this change.) As many of you have probably experienced, it’s too easy to get lost on the site, and so every page would carry both the school navigation (tan bar) and the meta navigation (text across the top-right of the page). The search function and word mark are included with this section that will be carried through the entire site as well. (I’ll discuss the handwritten word mark shortly.)

School Navigation

Institutional Home Page (CAS Navigation)Institutional Home Page (Law Navigation)Institutional Home Page (Graduate Navigation)The school navigation appears closed by default on the institutional home page but you will be able to click through to any of the primary sub-navigation from the institutional home page. (The navigation operates differently within any school site; see below.) The views at right show the expanded navigation from each school.

While we know that many of our site visitors will not move from school-to-school very often, this series of the three schools together makes it very easy to not get lost, or if you do, get back to where you’d like to be. The other benefit of having the school names/navigation together is a visual one.

Throughout the meetings WW and I had with many members across the three schools, there was great concern about the siloing between the three schools and even within schools — in this design, the three names are closely linked not only with each other, but also in their visual support and proximity to the word mark Lewis & Clark.

Meta Navigation

The meta navigation is another slice of the same thought. It essentially is composed of the elements that all three schools share. The About Us would have not only the institutional “about” but also “abouts” for each of the schools. (Where appropriate, the meta navigation has segmented content.)

Another example is that we have a number of “Portland Oregon” sites, between three admissions offices and alumni, etc., this navigation not only gives us an opportunity to eliminate the duplication of work effort, but also then create a richer Portland sub-site with our role in the community and even some fun elements. The other follow in the same vein and the new web content management system will allow New Media to give people all across campus the ability to edit these pages. So for example, none of the admissions offices would lose their ability to help edit their Portland content.

Handwritten Word Mark

You’ll note that the word mark for Lewis & Clark is shown here in a handwritten style. This is by no means something on which we’ve completely settled, but after talking with everyone and summarizing the experiences we had, the words that kept re-appearing in our discussions were handmade, organic, community, among others.

For me, also being very new to Lewis & Clark, I learned about the unique paths that everyone here seems to take on their journey to us, as well as where they go afterward. Using the handwritten word mark, particularly in conjunction with a main feature with a matching handwritten signature, is in some form, recognizing that this is Brook’s Lewis & Clark.

The handwritten word mark would not be used throughout the site, but only in conjunction with appropriate content. (The school home pages also treat this element differently, so see those notes below.)

Internal navigation

On the right, beneath the school navigation is some new, primarily internal navigation. All the aforementioned navigation would be more externally focused than it is now, and to compensate and really, satisfy another major concern we heard across the campuses, we will be providing links to richer internal content.

The Source

The Source is the same site that public relations began to help communicate and create more community amongst faculty and staff. It may see some growth into providing more content on a more frequent basis and student-focused content, but that is yet to be decided.

The Green

This is a password-protected space for the LC community. To date, we’ve thought about housing carpool listings, a marketplace, a soapbox and other such forum-based content. (By keeping it password-protected, we do not have to monitor language, etc. and I would expect it to be relatively self-policing.) It would also create a virtual space where we might have groups be able to setup pages to help them organize and communicate to the community.

My LC

This is your own personal page for storing links and getting information directed to you. Upon login, we’d know that you might have one or more roles at Lewis & Clark and as a base, the system would suggest some popular links that might be of use to you. You would be able to add or delete links easily, and link suggestions would appear as dismissible notices. What’s more, on every page of the site, we’d have an “add to My LC” link so that you could easily store information pertinent to you. It would also be tied into the notices (as we try to reduce the amount of email we get), so that you would only see notices or announcements which apply to you.

This function would not be limited to the LC community alone however, if you were an alum or prospective student, you would also be able to create a My LC. In the case of a prospective student, you might choose “Graduate School Prospective Student” as an option and then, not only would Becky Haas get an email noting the sign up, but then, she would be able to push information of interest to the prospective student’s My LC. (Again, completely and easily dismissible by the recipient, so as not to be an annoyance and reduce usage.)

You will note that we are, with intent, breaking one of our own rules about our brand here. We almost always spell out “Lewis & Clark” rather than use any abbreviation, and only then use the approved “L&C”. However, as many community members know, no one speaks the ampersand when referring to themselves or a campus/school organization. Not using the ampersand for this feature is a specific recognition that if you have that level of relationship with us, we know that you don’t use the ampersand. For lack of a better term, it’s our secret handshake.

Blogs

This on is simple; we already have so many of our members that blog, we are simply going to show the richness that is already there.

Informational Content

Moving below the main feature, we have three primary areas for different forms of dynamic content — meaning always updated all the time. From left to right, they are: People, Headlines and Events.

People

If you’ve seen the new Expertise and Excellence appear on the home pages, you’ll recognize a lot of what were doing here. Basically, People simply has little blurbs and information on the great things that our community members are already doing, be it getting an award, speaking and an event, or being published. It includes all three schools and students, faculty and staff.

Headlines

This is the most recent news from a variety of Lewis & Clark sources.

Events

This is event-related content from on campus and off, so that we can include events held in Portland (among other locations). If you’ve noted the “On Campus” section of the home page, this would be very similar without the limiting name.

Portland-scape

Still somewhat in the draft stage is the Portland-scape directly beneath the informational content. This would effectively help us bring in more of our “In and Of Portland” theme into the design. We’re still playing with both the design and the functionality, but from the current mock-up, you should get a sense of where we are heading. (Suggestions? Make a comment.)

Site Footer

The site footer is exists beneath the page end and like the site header will be present on every page. It holds all the basic reference and contact information for the main site, as well as the shield and official word mark. Sub-sites are likely to include additional information pertinent to that site/page/content, but a good portion of this content will remain.

Page Feature

Now returning to the center of the page and the primary content of the page. Between the above example and this one, you can see two versions of how this space might be used. We will begin using the short phrase “Uncommon Journeys” for some, but not all of the stories that we tell in this area.

Function

Functionally, they will either have built-in audio and video, which would be watchable right in the page, or link out to a text story with images. (I suppose we could also run a slide show in the space as well — the intent is left open for the best adaptation for the story to tell.)

Timeline

Each story would be up for at least one day and could persist for as much as a week or so before being replaces, depending on the nature of the content.

Design

As for design, we will be writing rules to define what images work best in this space as one requirement is that the “title” image must break the left boundary of the page. Naturally, building a resource of imagery and story content is expected to be a challenge, but a doable one.

Content

Finally, as I hinted above, the content is not necessarily going to tell a story the we would call an “Uncommon Journey”. Frankly, the consultants felt that there are always going to be things that we might want to feature and forcing that content into a specific container would only hinder us. So, while no ratio yet exists, I would expect that the Uncommon Journeys content would hover around fifty percent with the balance made up of other types of content.

Call to Action

Just to the right of the main feature (and beneath the internal content links) is the Uncommon Journeys call to action. We do know that building a content stream to supply us with stories for this section is going to be a significant (but not insurmountable) challenge, and at that same time, that building a better connection with our alumni and internal communities was highlighted as a significant need by both the market research and our own meetings in this process. The call to action helps with both.

Please reference the site header regarding the link between the signature (as shown in the Brook Brisson example) in the main feature and the word mark.

School Home Pages

What are the differences?

College Home PageLaw Home PageGraduate Home PageFrom the designs are right, you can see that many of the same elements on the institutional home page design persist through to the school home pages, so the following is a discussion of what’s different.

Word Mark

Unlike the institutional home page, the word mark at the top of the page varies depending on the school rather than the content in the feature area. For the College, it will be written by a current student. For both the Law and Graduate schools, it will remain as the official Goudy word mark. In each of these cases, this is an important distinction based on the primary audiences of each school.

Navigation

First of all, whenever you are within a school site, that school’s navigation is open and available. It features sub-navigational elements, and each of which has a drop-down menu, so that you can quickly move throughout the site. (And again, since this navigation would exist everywhere on the site, it’s much harder to get lost within a school site, or even between the schools, since the exposure of the navigation gives you an immediately visible response of where you are.

Feature Area

Each of the main feature areas is thinner, to allow for additional “above the fold” school-specific content to be determined by each school. For distinction, each school has a defined accent color for navigational and title elements. (We aren’t fully committed to the colors shown, but they are proving to be our favorites to date.) Also, to facilitate easier content development, the main feature are does not break the left-hand barrier out of the “page”.

Informational Content

As you might expect, the informational content is tweaked to each school’s need. This is not only in the actual content, but also the groupings that are made. For example, “People” doesn’t persist through, although similar school-specific content might.

Portland-scape

To keep the home pages consistent with their enclosed sites and pages, the Portland-scape remains only on the institutional home page.

Filed Under

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