NPR's digital audiences are constantly growing and changing, and today we're recognizing that growth with the introduction of a new experience in our blogs.
It's a simpler, smarter and stronger experience that recognizes people are looking at and listening to NPR on an amazing array of devices, with screen sizes ranging from quite small to very large. As everyone's digital habits continue to evolve, we're adapting with the changes you see today.
We've rebuilt our blogs using an approach called responsive web design. Web pages will now work on mobile platforms such as the iPhone, iPad and Android devices in ways that haven't been possible before now. The Two-Way, Planet Money, Monkey See and the full range of NPR blogs are now optimized for multiple screen sizes — whether big or small.
Responsive design focuses on building a Web experience that works well across both current phones, tablets and desktops, and future devices, like the Microsoft Surface and the much-rumored iPad Mini.
These changes won't affect NPR's native iPhone, iPad and Android apps. The new look today is just for blogs on NPR.org. We expect, however, to do more of this work soon, making more NPR.org pages responsive to your phones and tablets. We're building on what you've told us you want from NPR.
Major changes across platforms
Mobile users should see dramatic gains in site performance, especially on phones. Audio, video, images, links and comments from blog posts now flow cleanly into iOS and Android phones. We've also optimized the blogs for tablets like the iPad and Nexus 7, loading high-density graphics and photos when appropriate.
Storytelling on the desktop also makes its own leap forward with this release. We've stripped away distractions from the page, putting the focus on reading and listening to the story at hand. NPR images and multimedia dominate the page at larger screen sizes, creating new narrative possibilities for our bloggers.
Included in this new look is an answer to a long-standing request from our readers: the color of the story text is now black instead of gray.
At the end of every post we've added links to the latest content from the blog you're reading. On NPR Music blogs, you also see links to stories about featured artists and purchase options for the music you've just heard.
We've taken a fresh approach to the front page of each blog, emphasizing scan-ability. Posts are more compact on blog home pages and an infinite scroll makes it easier to peruse older stories, much like the experience on Facebook and Twitter. This experience is consistent across platforms. So, if you've missed a day of your favorite blog, it's easy to catch-up, wherever you are.
How we built it
The roots of this project came nearly two years ago when we undertook an experimental redesign of our Shots health blog. The redesign put a fresh focus on the content and simplified the page significantly, scrubbing away rarely clicked-on promotional boxes.
Subsequently, we began to implement responsive techniques in a some corners of our site. NPR Mobile Technology Manager Jeremy Pennycook led the charge. About a year ago, NPR Music introduced live event pages that support desktop browsers, iPads and iPhones. Early in 2012, the overall site made a change that optimized stories on the iPad for a better reading and listening experience.
Along the way we introduced internally a host of new metrics to learn more about the features our audience did, or didn't use. We simplified our story construction, both in the site code and in the workflows of the NPR digital newsroom. Trimming away unused features helped us create a responsive design more quickly, while avoiding negative impacts to existing stories.
Building on those steps, this project has taken about two-and-a-half months. We see this as a beginning, the creation of a platform we can continue to build on as we continue to look for new ways to tell and deliver the stories our audience expects from NPR.
For interested coders, we've used the Zurb Foundation as the basis for our responsive grid and LESS for managing our homegrown CSS. We've created three breakpoints — small, medium and large — and are working next toward an extra-large breakpoint. In designing, we've kept our user-experience emphasis on screen size, instead of specific devices.
With members of the NPR audience panel, we've completed seven rounds of usability testing, with more to come. Thank you to all of the users who helped evaluate our designs and directions. (Want to help give input for future projects? Join the NPR Listens audience panel.)
We've stuck to mobile-first and story-centric approaches in both coding and designing. The result is a minimalist page that works better on more platforms. On tablets and desktops, the page is also substantially lighter and faster-loading than our previous blog pages. In testing, we've used Adobe Edge Inspect, TestLodge and an assortment of browsers, devices and performance-evaluation tools.
Where we are and where we're going
The new blog pages perform well on the latest versions of Chrome, Firefox, Internet Explorer and Safari; all iPhones and iPads; and most newer Android devices. Users of Internet Explorer 8 should have a reduced — but still functional — experience. On Android, users may see sporadic issues on Gingerbread and earlier operating systems. We're continuing to code improvements.
This upgrade doesn't affect story pages on NPR.org, the homepage or mobile apps. Additionally, for the near future, you will still see the old blog experience if you start your visit to our site on the mobile homepage. But it won't be long. We're pushing forward on that front.
Our goal is to give you the best experience wherever you read or listen to NPR. Today's refresh of our blogging template is another step in that process.
With that in mind, we want to hear from you. Once you've had a chance to kick the tires, send us your feedback on the new look and mobile functionality. Tell us what works for you and where you'd like to see us go with future iterations of this experience.
Patrick Cooper is the senior product manager for NPR.org and storytelling tools. Wright Bryan is the editor for blogs at NPR and a member of the Social Media Desk.
Copyright 2021 NPR. To see more, visit https://www.npr.org.