WNYC’s website turns audio into something visually compelling

Public radio is a source of great pride for both those who create content and those who listen. Where I live, NPR is a favorite destination for news, intelligent discussion (no shouting!) and entertainment.

WNYC’s website turns audio into something visually compelling – here’s how you can do it too

WNYC’s website turns audio into something visually compelling – here’s how you can do it too

Among the many NPR affiliate stations in the United States, WNYC is considered one of the very best. Broadcasting from New York City since 1924, WNYC is home to some of public radio’s best programs. Homegrown shows like The Brian Lehrer Show (a personal favorite) and The Leonard Lopate Show feature discussions on issues ranging from city hall happenings all the way to the biggest international stories. Listeners often have the opportunity to express their opinions on air.

WNYC is also home to some outstanding podcasts, including Alec Baldwin’s Here’s the Thing, LIES (an interview show where every statement is a lie) and Song Exploder (where musicians break apart their songs).

In other words, WNYC is a great place for compelling content. But this old media entity also translates seamlessly online, with a website that is every bit worthy of its parent’s reputation.

Let’s explore WNYC’s online hub and see what makes it click. Then, we’ll check out some WordPress themes, plugins and other assets you can use to make your own mark in online broadcasting.

Why We Love It

At first glance, WNYC’s website is simple and straightforward. Navigation choices are quite limited and are tucked into a red sidebar. In fact, if you’re looking at the site on a widescreen monitor, the navigation will go all the way to the very left of the screen. Taking advantage of the extra real estate keeps the focus on the content itself. WNYC focuses on news and current events, so secondary pages might not be the priority many visitors.

WNYC’s website turns audio into something visually compelling – here’s how you can do it too

The content area of the home page focuses solely on the top on-air stories. The biggest stories are at the top, followed by categorized listings below.

The look of each story is quite minimal – a photo, along with some very basic information. This makes for an easier-to-read listing of such wide-ranging content.

WNYC’s website turns audio into something visually compelling – here’s how you can do it too

Underneath that simple layout is some awesome functionality. Each story has two buttons:

  1. A blue Play button that will open up a media player on the lower portion of the screen.
  2. An Add to Queue button that allows you to save an audio segment for later.

It’s powerful, yet even easier to use than your old Walkman (and it doesn’t need new batteries every few hours).

Digging deeper, there is some gold hidden in those secondary pages as well. You’ll find quick links to each live stream (including some sister-stations and a dedicated opera channel) and a full listing of shows and podcasts. Each show has its own landing page with episode information and host biographies.

But the coolest find has to be WNYC’s Discover page. It’s a way to build a personalized playlist based on your interests without having to wade through multiple individual categories or pages. Simply click on the topics that interest you and select which shows you want to hear from. The site will generate a listing of audio segments for listening. You can go back and edit your list of topics and shows at any time to better reflect your tastes.

WNYC’s website turns audio into something visually compelling – here’s how you can do it too

Project Assets

WNYC is a prime example of how a media-rich site should both look and function. Keeping those lessons in mind, here are some WordPress themes, plugins and other assorted design assets that will bring some of WNYC’s best features to your own website.

Themes

Podcaster

WNYC’s website turns audio into something visually compelling – here’s how you can do it too

Podcaster’s nicely-styled embedded media player (which also handles video) provides similar functionality to WNYC. The theme also sports its own simple layout – keeping visitors focused on your content. You can upload your media directly to WordPress, or pull it in from other sources like SoundCloud.

Soundbyte

WNYC’s website turns audio into something visually compelling – here’s how you can do it too

Soundbyte uses a minimal (yet beautiful) episode listing grid that puts a little twist on what WNYC is doing. The theme utilizes the episode’s featured image as a background, rather than as a standalone image. This saves a bit of space and makes for an eclectic home page. Each episode also has a Show Notes area, where you can highlight content that comes up at specific times during a show.

Dunamis

WNYC’s website turns audio into something visually compelling – here’s how you can do it too

Dunamis is a theme aimed at churches, but has some great audio capabilities that could extend to those who create other media content. The sermons area of the theme’s demo shows an attractive post listing with various media player options to the right of each post. There are buttons for streaming audio and video, along with mp3 and pdf downloads. The unique functionality here is something fans of WNYC’s site can appreciate.

Plugins

The Grid

WNYC’s website turns audio into something visually compelling – here’s how you can do it too

One of the things WNYC does best is provide the convenience of an audio player with each post on their home page. The Grid takes advantage of WordPress Post Formats to create responsive grid listings. Using the Audio post format, you can create a listing of your podcast episodes with an embedded media player. You’ll also be able to import audio feeds from SoundCloud.

Fullwidth Audio Player

WNYC’s website turns audio into something visually compelling – here’s how you can do it too

Much like WNYC, Fullwidth Audio Player lets you select an audio track and plays it in an attractive media player bar at the bottom of the screen. The user can also launch the player in a popup window to allow for continued listening while browsing other sites.

WavePlayer

WNYC’s website turns audio into something visually compelling – here’s how you can do it too

While WordPress has audio player capabilities built in, WavePlayer takes it a step further by allowing you to create more visually appealing playlists right from the WordPress media library. You’ll be able to easily add audio to your site’s pages and posts. WavePlayer also features the ability to customize the look and size of the audio player.

Audio Clips

Since WNYC’s focus is on audio, let’s change up the assets section this time around to include some cool clips from AudioJungle. If you’re a podcaster, these clips will help you sound like a seasoned public broadcasting pro.

Breaking News Ident

Epic Orchestral Logo

News Talk Logo Ident

Elegant Electronic Ident

Jazzy Piano Interlude Ident

Make It Your Own

As we’ve taken an inside look at WNYC’s website, we can see why the station is so revered amongst radio fans worldwide. The station strives to achieve quality and balance in everything they do – their website being no exception.

While most of us aren’t going to match WNYC’s depth of great content (Alec Baldwin might be tough to book on your own show), we can use some of the same elements that make their website so successful. Features like the embedded audio player are native to WordPress and can be enhanced with the right theme or plugin. Their simple and elegant site layout shows us how to focus on our own great content. These are things that allow users to find what they’re looking for and maybe even become fans of your site.

Featured image: AndrewParfenov

More web design deconstructed: