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
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.