Mobile Web for NPR Stations

Key Technologies

  • CSS/Sass
  • JavaScript
  • jQuery
  • Drupal/PHP

Background

Before NPR decided to embark on a responsive redesign for our member stations' web platform (see the Core Publisher project), we created a mobile-only version. In a few weeks, I designed and helped develop a clean, usable mobile-optimized site that elevated the listening experience while still respecting the large amount of text content that was present throughout the sites.

Ultimately, nearly a hundred stations adopted our mobile theme.

I worked with another developer to create a custom Drupal theme using JavaScript, PHP, and CSS. We made it responsive — a first for NPR at the time — and, while it was only optimized for small screens at first, the pieces were in place for us to design for large screen sizes if business goals changed.

Listening

We wanted to make listening prominent, and enable users to easily find and listen to a station's primary live stream (many stations have several, sometimes many). On the other hand, we didn't want to make the experience only about listening — because stations have lots of other content. After some trial and error working with real-world public radio listeners, we settled on a clear, prominent button, "Listen Live," followed by a stream of posts.

Story Pages

We built story pages to accommodate all of the content that station editors put into stories, ensuring that text, pictures, videos, and inline audio worked well. The video below demonstrates the flow of a typical story, ending with related stories from the site to encourage continued discovery.