Thompson Rivers University Library (2012)

For the redesign and -development of the TRU Library website (summer 2012 — see image of homepage, below), I retained the pre-existing footprint (a compact 790 pixels wide), mainly because this footprint was still in use by the wider campus (and would remain so for another year). I also shortened the page a bit. Considering my ambitions for content and functionality, this small canvas presented design challenges, which were addressed partly via expandable menus — accordions, drop-downs and the tabbed Summon box. As well, gutters were kept somewhat wide (about 32 px) to emphasize modularity (i.e., to keep page elements well spaced in hopes of organizing the page).


Library websites are information-dense entities. They must guide users toward a range of elaborate information, some of it relating to services (course reserves, online forms, borrower information, etc.) and some comprised of complex and massive silos of knowledge (online article databases) with their own elaborate rules of engagement. Along the way these sites must provide contextual assistance while also marketing the library itself as a non-threatening, accessible entity. Of course, the homepage (the usual landing page) must set the tone while providing clear navigation.

Several additional features were added to the homepage, including:

  1. a slideshow under the Did You Know kicker (middle of page), to add a gentle bit of animation to the page (seven-second intervals) and highlight a range of library services (the earlier homepage, which can be seen lower right, loaded only one “Did You Know” box with the page);
  2. a Library News box (in the left column), which was a feed from a new library-news WordPress blog;
  3. a “Library” banner (the homepage — seen below right — had lacked any form of library banner);
  4. a site search box in the top right
  5. as noted, the tabbed box to cluster Summon, the catalogue, the databases and LibGuides into one compact module; and,
  6. homepage_olda customized AskAway chat box in the lower right of the page (with a “starry night” panel to indicate when the service was closed, i.e., after hours).

Also, during the remainder of my contract I would swap out the feature box (bottom centre) every week or so, usually with a rollover link taking the user to a news page on the blog that would provide details regarding the featured item. Lacking any mandated colour scheme from which to work, I used the blue and green from the TRU crest (and even a gradient of the two, in the case of the Did You Know kicker), though this was a somewhat cool or dour palette to work with. A gradient page background in summer-sky blue helped warm up the page (i.e., counterbalance the theme colours).

The balance of the site used a Dreamweaver template so that large portions of each page (i.e., the common elements: primarily banners/navbar + left column) could be updated easily from one location. The drop-down navbar was within the template and thus on all the pages. The template also included the customized AskAway chat widget so assistance was readily available from every page (also, to help market the AskAway service).

The inside pages used a variety of expandable content-holders to eliminate scrolling (and information overload) while providing users with a bit of interactivity. In the example below (left), the page loads with the accordion showing the “Frequently Called Numbers” panel. When the user then clicks one of the headings, the accordion shuts the “Frequently…” panel and rolls open the desired panel (in the example, right, the Collection Services panel):



0 Responses to “TRU Library”

  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: