What's Global Moxie?

Global Moxie specializes in mobile design strategy and user experience for a multiscreen world. We offer consulting services, training, and product-invention workshops to help creative organizations build tapworthy mobile apps and effective websites. We're based in Brooklyn, NY. Learn more.

Big Medium in the Stacks

Posted Jan 24, 2007 (updated Feb 8, 2008)

A big shout out to the Association of Research Libraries, which just launched a newly designed website powered by Big Medium 2. As you might expect from a group of web-savvy librarians, the result is well organized and elegant. I was happy to give them a bit of help and advice from the sidelines, but all of the real work was done by ARL's enthusiastic web team along with designer Kevin Osborn.

The site sports a clean, tidy design with some clever applications of Big Medium's design widgets.

Pure-CSS dropdown menus with graphic rollovers

ARL navigation

Big Medium offers built-in dropdown menus (look, Ma, no JavaScript!), but the ARL site takes it a step further with attractive graphic rollovers. Under the hood, it's just a good old-fashioned HTML <ul> list with CSS styles applied.

The Global Moxie help FAQ describes the basic technique for adding graphic rollovers to Big Medium's navigation.

Google search results in a Big Medium page

ARL search

The ARL site uses Google's free Google Co-Op search service, but displays the results inside a Big Medium page with the site's own look and feel.

Fill out the search form at the top of any ARL page, and the form submits the page to a Big Medium-generated page with Google-provided JavaScript in the page's content area (entered as "raw HTML"). The JavaScript automagically reads the search query, submits it to Google, and displays the search results from the site. Voila, a low-impact custom search engine, powered by Google.

Vertical breadcrumbs

ARL breadcrumbs

The site includes two types of breadcrumbs. The first is the traditional breadcrumb display, generated by Big Medium's <%breadcrumbs%> widget at the top of the page, displaying your path back to the homepage.

But I'm also digging the site's second, vertical breadcrumb display. Check out the purple and maroon bars above the page content, linking you back to the parent sections of the page. It's a nifty effect that they used with some well placed server-side-include tags (conditional expressions, how I love thee) and a bit of CSS pixie dust applied to Big Medium's section navigation widgets:

  • <%sectionlink%>
  • <%parentlink%>
  • <%mainsectionlink%>

Simple site map

ARL site map

The site's site-map section uses Big Medium's <%navigation%> widget in its section template to generate a nested set of <ul> lists of every content section of the site. Sprinkle in some attractive CSS styling and ARL got itself a quick-and-dirty site map that updates automatically when sections are changed, added or removed.

Nice going, gang, and congrats on your launch.

Tags: , ,

Add a Comment

Don't be shy.

(Use Markdown for formatting.)

This question helps prevent spam:

Listen Up

“I listen to what Josh Clark has to say.”
—Matt Legend Gemmell, developer, Instinctive Code

“Tapworthy is a great iPhone development book.”
—Joe Hewitt, creator of the Facebook iPhone app

“I snagged a copy of Josh Clark’s Tapworthy. Mmmm... that’s good interface.
—Boon Sheridan