New collection pages for MPR News


If you’re a die-hard fan of MPR News, you may have noticed some new page layouts on our site recently. We have been working hard on our search and grouping tools that allow us to generate these pages. We call these groups collections: pages that list and link to other pieces of content, almost always news stories and/or audio segments.

Collections aren’t generally pages that get much traffic or attention from audiences or search engines. But, they can occasionally serve a few useful purposes. First, for a small (and I mean small) subset of our visitors, they are highly utilitarian pages that allow browsing and refining by topic, where search doesn’t work well. Secondly, collection pages are useful for grouping particular highly focused stories together, at times when there is a lot of coverage happening for a relatively short period of time. For example, coverage of a Franken/Coleman recount or 35W Bridge Collapse.

The other important consideration for us is that our homepage is essentially a collection page, but the collection it “searches” is every story we create. What we’re building for our low traffic collection pages will be hugely important for building our new homepage.

Old collection pages: Bad

On our old site, we have had very little standardization of our visual design, and this was most evident on our collection, project, and episode pages. Each collection and project page was a special little flower, crafted and cared for during it’s special little moment, then left to wither and die. Here are a few examples:

A non-responsive mess.

Collection pages on our old site were not conceived in a time when smartphones, tablets, and retina screens were a thing. But today they are, and our pages obviously need to deal with that. Most of the old pages pages feature too many or too small images, type that can only be read with a magnifying glass, and little standardization between collections. Not only is this a web developer maintenance nightmare and not responsive to device capabilities, it is confusing and scattershot for our audiences.

New collection pages: Less bad

Our new collections have a range of visual and utility options that can be turned on and off by editors, depending on the needs of the story. Some collections can just be a basic list of stories, others need an introduction paragraph or two, a sidebar with links to evergreen interactive tools, and/or a listing of people who worked on a project. During the design process, I called them basic, fancy, fanciest, and visual. Here’s a few of the various flavors now in use on our live site:

We severely constrained the design options that can be changed on these pages by non-developers. The only visual flourish that can be manipulated by an editor is the title for a collection, such as on The Daily Circuit collection page. We’re still working on the actual implementation for the fanciest and major topic/section pages, but the visual design is solidified. You can preview our high fidelity mockups in InVision.

A small amount of nerdy details

The configuration for these pages is read from a JSON config file that lets editors change text and turn on/off options. Right now, these JSON files are hard-coded, but we’re working on a general-purpose configuration management tool that can be used by all our websites for just this type of situation.

For the listings of stories on these pages, it is a little more complex. We have an internal tool we call “The Barn”, built for the PMP, based on Dezi, that indexes and normalizes content from our various CMSes in real-time (every animal/CMS is welcome in the barn, even the stinky & bad tasting ones). We have another tool, we call Meeker, that allows us to save queries and some metadata about the queries to The Barn. Both The Barn and Meeker spit out JSON, which makes them effectively language/platform agnostic for our web apps. The web app is essentially the VC in MVC, relying on RESTy JSON models on other servers for the data.

My geekier colleagues will hopefully be sharing more details about how Meeker, The Barn, and our other REST API systems work  and allow us to evolve our CMSes.

Comments are closed.