An infinite scrolling news site I actually like.
ESPN’s new site design, which it launched last week, is the strongest implementation of infinite scrolling that I’ve yet seen. More and more sites seem to be moving in this direction, and while I’m not convinced that it’s ideal for every content provider, it does seem to fit sports perfectly.
The new site was launched April 1, which seems like a weird day to do that until you realize it was the twentieth anniversary of espn.com. The new site isn’t an equivalent leap online, but it does feel like a major step forward.
ESPN has clearly been working on this for a while. Conceptually, a lot of the design ideas that ESPN implemented here have been tested on ESPN FC, the company’s soccer vertical. That site—rolled out last year, just in time for the World Cup—also features infinite scrolling on both the front page and the news pages.
The front-page design is about halfway between the old ESPN (big photo or video on the left, with some related links, and the headlines on the right) and the new, while the article page is very similar.
Having that time to experiment likely helped ESPN address any bugs that came from the new article page (like Quartz and Bloomberg, the URL automatically updates as you scroll down), while it also allowed them to continue to tweak the way that the front page is laid out.
Brings in content from partner sites and TV. The espnfc.us front page is designed around tiles: after the top stories, every story receives about the same weight and is displayed in chronological order. The ESPN front page has a lot more layout features, which it has implemented without ever seeming too busy (like on Bloomberg’s front). On the desktop view, recent scores are always at the top of the page as you scroll (ESPN FC does not keep them in view), and the narrow left rail highlights the upcoming games and news about the user’s favorite teams.
The right rail is used to pull in recent stories and recent events on social media. In theory, ESPN could link out to other sources with good stories, but as is, it still allows for interesting juxtapositions. For example, last Thursday, ESPN posted a story that the Chicago Bears were releasing center Roberto Garza; the next item in the feed was a repost of his Instagram photo thanking the fans for his time on line.
The center rail retains much more in the way of layout than I might have anticipated. Instead of having multiple top news images duking it out, with tabs to switch between them, the new front stacks them on top of each other. Those stories are followed by cross-links to Grantland and FiveThirtyEight, with three stories from each displayed. (Since those partner sites’ coverages are broader than just sports, it’s a nice way to highlight them without going overboard).
The site can group stories together by other themes, for baseball’s opening day, or the NFL draft. Stories can also be added to the layout on their own, taking up the full column width and displaying a graphic to the right. While the order is broadly reverse chronological, even individual stories can be moved up the layout if it’s an important (or simply eye-catching) story.
Almost all stories were posted with a video icon, as ESPN has been working hard at distributing more video across the internet. Still, the text is usually the focus here: video is a sweetener, and only occasionally is it the main content of a post.
Infinite scrolling. And here’s where infinite scrolling comes into play. In general, I’m skeptical of infinite scrolling on news sites; I prefer one story per page. Part of it is that, when I’m reading longer content, I want time to take what I’m reading into consideration; another part is that I find it makes navigating a site much more difficult, especially on mobile devices (try following a link on twitter and then getting back to the initial tweet, for example). It is also difficult to implement with the immersive style of a Snow Fall article.
Sports news isn’t a bad fit for this kind of layout. I strongly doubt that I’d want to follow, say, Charles Siebert’s profile of Rory McIlroy with a ten-sentence follow-up on Tiger’s chances next week, but I wouldn’t mind seeing that same story right after a recap about yesterday’s Shell Houston Open playoff (that’s not actually the story that follows it–it’s instead a longish piece on Augusta National Chairman Billy Payne). If I click on a story and it’s just a video clip, there’s probably text for me to read right below it. That’s probably the right kind of balance.
ESPN’s infinite scrolling is smartly implemented, too: the front-page layout migrates to the left rail, complete with a progress bar that ticks down as I scroll through each story. Most importantly, it remembers where I was on the previous page. If I scroll past the first few stories before clicking through something, the next article that scrolls through is the next story in the layout. Not, as happens on some other sites, the first story on the front page that I wasn’t interested in to start.
There are still a few hiccoughs. I’m not sure, now that they share broadly similar designs, why soccer content is still relegated to ESPN FC. Even though a story about Cristiano Ronaldo’s five goals against Granada yesterday was on the main page, when I scrolled down to it, I just got the next story after it. I had to click through to the football site in order to see it. It’s not a huge deal, but I’m not sure the division still makes sense now that both sites have been updated.
On the whole though, it’s a strong redesign that puts the timeliness of sports scores front and center, while still allowing the editorial team plenty of room to layout news as they like. If infinite scrolling is here to stay, let’s hope that more implementations follow ESPN’s lead.