Earlier this week, we made public the new homepage for MPR News. This is the final big piece of our ongoing responsive re-design of the site. Technology-wise, there aren’t any new systems or components on the homepage that haven’t been put in use in the topic pages or story pages. But, the homepage is a very visible and important design change.
The biggest problem we were trying to solve is that our old page didn’t work well on a mobile device. Today, about 40% of our total traffic comes from mobile devices. That’s a lot, and to remain relevant to that growing percentage, we need to not be a bad experience, and maybe even a good one.
The last redesign of MPR News was done in 2008, before responsive websites were really a thing, and mobile websites were only just starting to pop up. In addition to not being mobile-friendly, there were numerous other substantial problems with our old homepage: The type was too small and without hierarchy. There were too many topical sections that all looked alike. Some testing showed that few visitors (under 25%) scrolled past the “blog box”. And there were so many different links and elements on the page that it was too much to practically take in and decipher.
To design the new homepage, we formed a small group of invested parties, the core group of which was Digital News Director Jon Gordon, Product Director Peter Rasmussen, and myself. We started by making a list of the things that we wanted to be on the new homepage. Designing a page to work well on a mobile device means you need to focus on the things that are relevant to someone with a limited screen size. We settled on the following things, which neatly explain our final design:
- News stories that editors can adjust in order and prominence
- NewsCut, updraft, and the weather forecast are important and well loved by our audiences
- Today’s Question needed to make an appearance when relevant, as decided by editors
- We do news related events, and those needed to show up, and not as ads
- Links to the major sections of the site for more focused news
- Most viewed is very popular, and we wanted that to stand out more
- We do excellent photos and video, and wanted that to stay omnipresent, but not huge
- The radio schedule should be present, since we are, after all, a radio service
- More links to find us in other places: social media, our apps, podcasts, and email
- Audio everywhere, because we create great audio
Much like our section fronts, we settled on a three column layout. Unlike the section fronts, the persistent column moves depending on screen size. On desktops & larger screens, it is on the left, on tablets and medium screens, it moves to the right. We debated this, but ultimately liked it a lot on tablets because it puts the latest news furthest to the left and felt that was most appropriate. On phones, this all shifts to one column, and puts the news stories first.
When we display the news stories, we default to reverse chronological of our latest stories, but editors can and do override that to put the more important and noteworthy stories at the top of the heap. This listing of stories integrates content from our internal CMS, itasca, our blogs, and the PMP, through our internal search normalizer, The Barn. In addition to ordering, there are five different levels of prominence a story can be given. They are:
- Level 0: Just the headline
- Level 1: Headline slightly larger, thumbnail image, and a short description. This is a “described story”
- Level 2: Headline larger yet, larger image, and the short description. This is a “promoted story”
- Level 3: Much bigger headline, short description, no image, goes across both columns on tablet and desktop screens. We probably won’t use this very often. This is a “blowout story”
- Level 4: Just like the blowout story, but with an even bigger headline. Think “Dewey Defeats Truman”. This a “super blowout”.
In addition to these levels, editors can turn on or off the date stamps and add labels, e.g. “BREAKING NEWS”, above headlines.
We’ve also fully switched to using Franklin Gothic Demi Condensed as our headline typeface, and use Franklin Gothic Medium in some places as well. As any newspaper designer knows, using a condensed font allows more characters to fit into a line, a consideration that is particularly important on smaller phone-sized screens. The MPR News logotype is Akzidenz Grotesk, but Akzidenz is not easy to license as a webfont. Franklin is easier to license and is a close relative of Akzidenz, so it suits our needs. This change to Franklin Gothic now propagates to all the pages on the site, including the stories, topics, and section fronts.
One element I particularly like is the new schedule. We are a radio station, and the schedule serves a very utilitarian and necessary function of informing the audience when shows are going to be on. It was surprisingly difficult to find on our old site. With the new homepage, the schedule will move to the top of the page on the weekends, when the news slows down somewhat and the programs are different from the week. It is a carousel, which is somewhat taboo for mobile, but slick works fairly well for our limited and text-based implementation.
We still have some work left to do on the homepage and mprnews.org: Our show pages aren’t fully migrated to the new layout; Our media player & playlist system needs to be re-worked to use websockets; There is an election coming up… The list goes on and a website is never truly finished (well, maybe). But, we are in a better place for more of our visitors than we were a year ago when we started this project.
We know everyone won’t agree with all the choices that we’ve made, and we know we’re not perfect. Please feel free to share your thoughts on our design here in the comments, or use the feedback forum we’ve set up.