jamesohara.net

Web Design

wfuv.org Site Redesign

WFUV's website, wfuv.org, had recently been converted to a Drupal 6 site, after many years of being a static html site. Unfortunately, the goal of the Drupal conversion was administrative only. We needed to provide our entire staff with the ability to contribute to the site. It did not include a redesign to the front end. The site still had a very old/stale layout and design and a completely unmanageable navigation (the last redesign was in December of 2006). In the Fall of 2011, my colleague Tim Teeling and I decided to give the site a long overdue redesign. We had a long list of goals we wished to accomplish. The most important ones were:

  • To create a responsive design, resulting in a consistent experience regardless of device (computer, tablet, mobile device)
  • To simplify the layout and navigation of the site so visitors could easily find what they were looking for
  • To prominently feature our most important assets including on demand audio, video and photos

Early on, we decided to use a responsive framework rather than build the layout from scratch. We figured, why waste our time building something that's already been built? We demoed a couple of different frameworks, but in the end we selected 1140 GS. It did exactly what we were looking for and we liked the simplicity of the code. We focused on building 3 "versions" of the site, a desktop version, a tablet version and a mobile version. We used Javascript to detect the browser's user agent and apply body classes based on the agent. Together with the CSS display property, we were able to show and hide specific page elements based on device.

The first step in simplifying the navigation was to identify which links were considered our most important (primary links), which were not as important (secondary links), and which we could eliminate altogether. The secondary links were moved from the main navigation menu to a secondary menu which we put in the footer. The nine primary links would remain in the main menu. Instead of a traditional drop-down menu with static, generic menu items, we decided to build sub-menus with dynamically generated content. For instance, if the visitor clicked on the "Archives" link, they would be shown a sub-menu of some of our most recent archive entries, instead of getting sent to a new page. Essentially the visitor could browse our most recent content without having to leave the home page. We built the menu using jQuery, with fallbacks for devices that have javascript disabled.

One of our greatest assets is our collection of in-studio performances and interviews. Our goal was to present the audio, video and photos from these sessions across all platforms (including iOS devices) in a responsive design. Our video is hosted by YouTube, our photos by Flickr and our audio by Streamguys. Videos were easy. We used You Tube embeds, wrapped inside FitVids so they adapted to the width of the page. For audio, we decided to use MediaElement.js a HTML 5 audio/video player with Flash fallback, to ensure that the audio is playable on just about any device/browser. Lastly, we picked Fancybox to serve our photo galleries. It was a piece of cake to configure, and it's completely responsive.

Check out the site, at wfuv.org.