Backstory Radio

Responsive Development, Wordpress, Custom Web Design

The Brief

A sophisticated WordPress site with responsive design for mobile and tablet devices, created for the popular public radio show BackStory.

Background

Sponsored by the University of Virginia, the National Endowment for the Humanities, and the History Channel, BackStory is a public radio program & podcast that brings historical perspective to the events of the day. On each show, renowned U.S. historians Ed Ayers, Peter Onuf, and Brian Balogh plumb the historical depths of recent headlines in the news.

The show needed a web solution that would bring the vibrancy of the program to life on their website. This included both a need for a redesign and enhancements to the functionality of their existing WordPress website.

The Problem

How do you bring the past back to life – to make it feel vibrant, colorful, and dynamic? The American History Guys do this with aplomb on each episode of BackStory, and they challenged CO+LAB to help them do the same with their website. We were excited by the opportunity, but also slightly daunted by the prospect of designing something that would have to live up to the quality and standards of such a successful radio program.

There were also a few – not so minor – technical hurdles we would have to cross as well. For one, BackStory had been using WordPress, and wanted to continue with it, but various "parts" of a show – the audio file of the show, the transcript, the comments, the notes and resources – were spread across several posts in the CMS. They wanted all of those materials to be grouped together in a single post on the new site, which wasn't too bad, but they also wanted the entire archive of posts on their old site to be migrated and grouped as well, which is much more difficult venture.

Solution

None of the solutions for the challenges we faced in designing and developing the BackStory Radio website were arrived at easily. Each phase of the project took time and patience from everyone involved, but those efforts were rewarded, more often than not, with elegant solutions.

The show needed a web solution that would bring the vibrancy of the program to life on their website. This included both a need for a redesign and enhancements to the functionality of their existing WordPress website.

Refined & Intuitive Design

The graphic design of the BackStory website was among our first challenges, and we tried to capture the spirit of Backstory Radio through a juxtaposition of contemporary graphics and historical imagery throughout the site. Using Backstory's canonical clouds as our backdrop, we layered vintage-inspired script over crisp dimensional ribbons. We outlined the historic imagery with a wide graphic stroke and shadow, giving the image contemporary shape, dimension and weight.

Subtle treatment of elements scattered throughout the site provide a simple yet unique feel. Clean borders, high contrasting link colors, and simple, intuitive icons help amplify points of emphasis and simplify the browsing experience.

Stretching Wordpress

Programming the site required some creativity so that all of the disparate "arts" of a show could be combined into a single entity. To meet the needs of the BackStory team, we tailored their WordPress theme with multiple Custom Post Types, intuitive integration of Advanced Custom Fields, and a unique archiving structure. Not only are the WordPress admin pages of BackStory customized, but each portion of the site that involves content management was carefully designed to help their staff better manage the significant amount of content that is compiled for each show.

For the the individual Show pages, we spent nearly as much time designing the admin structure as we did on the front-end design for the page template. We crafted a new content entry structure including SoundCloud integration (SoundCloud is the audio service BackStory uses to present their shows on the web). Using all of the tools available with Advanced Custom Fields and some of our own PHP, we were able to extend WordPress and streamline the content entry process.

"CO+LAB built one of the most advanced WordPress themes I think I've ever seen. They understand the importance of web standards and designed a solution for us that uses modern markup methods to make our site look beautiful whether you are viewing it on a desktop computer, mobile phone, or tablet."

Trey Mitchell
Web Master - Virginia Foundation for the Humanities

Graceful Responsiveness

Despite producing a show steeped in history, BackStory is hardly behind the times. That is why they came to us looking for a responsive solution to their web needs. Responsive design allows the layout of a web site to adjust or "respond" to the size of the browser. This means that whether you view the site on a desktop computer, a tablet device, or a mobile phone, the site appears as though it is designed specifically and optimally for that device without limiting or reducing the amount of content. For the BackStory website to feel modern and high-quality, this was a necessity.

BackStory made a great decision to simplify their navigation structure, placing emphasis where it mattered most. This allowed us to collapse the menu into an easy to use container, which retains the same look across browsers of all sizes.

Another challenge was the custom archiving structure we developed for past shows – namely executing those archive pages on smaller screens. We used PHP and Javascript to create a mobile archives template variation that moved the archives sidebar into a select box for smaller viewports.

One of the biggest responsive challenges of the BackStory project were the individual Show pages. We decided to implement jQuery tabs to accommodate the large amount of content and help reduce page length. When scaling down to the mobile view, the tabs are denoted simply by an icon to avoid unwanted cluttering of the page.

Results

Open the BackStory Radio website in just about any device and you get a rich, dynamic experience that feels customized specifically for the computer, tablet, or mobile phone you are using. Regardless of which device you use, you get all of the same content on each one – every show, transcript, resource, and discussion – nothing less on a tablet or a mobile phone simply because the screens are smaller.

Building this site, we encountered many challenges we hadn't faced before, which lead us to some solutions we'd never considered before – some we'd never seen before (or since). Despite that, we still were able to build a product that didn't just follow web standards, but our own and BackStory's standards, as well. The website is one of our projects in which we take great pride, and the feedback we have received has been overwhelmingly positive.

Co+laboration

The team that produces the BackStory Radio show sets a high standard for the quality and attention to detail of their program, and they expect that same high standard for their website. At CO+LAB, we love clients like this because we also have exceptionally high standards for the work we do – something we insist on for every project we undertake – and it is most rewarding to us when we have a client who values quality work from professionals who take pride in what they do.

Trey Mitchell, who oversaw the project for the Virginia Foundation for the Humanities, was an amazing partner to have in the web design and development process. More knowledgeable about WordPress than any other client we've ever had, Trey was indispensable in making this project a success. We were able to communicate with Trey at a very high technical level, which made explaining issues and limitations much easier. His technical acumen also enabled him to make informed and timely decisions, which are key to any project's success.

All around, it was an exceptional team effort we would happily repeat.

Like our work?

Learn more about what services CO+LAB can offer you and your business.

Our Services

Have a project in mind?

We'd love to hear from you and answer any questions you have.


Shoot us an email and let's get started.

Say Hello!