Reflecting on the Web Trends of 2017: News Feeds
As 2018 begins, we look back on the trends of 2017 and how different things were handled on the web. In this post, Web designer Miche Li evaluates the different ways media websites display article feeds.
Since childhood, I have always been a voracious reader. These days, I am often on news media websites, reading about everything from baking tips to tech trends. Although individual publications seek to differentiate themselves from their competition, they also utilize familiar patterns that users will recognize and know intuitively how to navigate. One of these patterns is a news feed.
A news feed is essentially a collection of articles, usually in chronological order, that includes at bare minimum the title of each article. There is also frequently a date of publication, image, byline, topic, and a few lines of teaser text. Because so many of Palantir’s clients like to feature recent news on their websites, I spend a lot of time thinking about and designing news feeds.
The following is an assortment of news feeds that I often reference for inspiration:
The New Yorker is a very design-centric publication, with its distinctive typeface, witty cartoons, and iconic covers. At the top of the feed is a featured subject with multiple related articles. Below, each subsequent article in the feed is labelled by the section it falls under (such as “Culture Desk” or “The Financial Page”) and includes the byline and a teaser. In desktop, not every article has a corresponding image. This creates a sense of hierarchy in which the articles with images appear more important. But, in mobile, every article has an image that is floated to the right of the teaser, with the teaser text wrapping around the image. This works well because the text is relatively large, and there is quite a bit of it. Positioning the image to the right maintains consistency down the left side of the screen.
Popsugar is another highly visual online publication. Over the years, the original concept of multiple “sugars” has been streamlined to cover a myriad of pop culture topics under one heading. Unlike The New Yorker, Popsugar labels each article with a single tag, not by section. Even though most articles have multiple tags, the editors are strategic about selecting a only one to appear in the feed. This concise choice helps the user scan the page and quickly assess which articles they want to read.
Vox redesigned their homepage in 2017 (read more about the Vox redesign) with a newspaper-inspired layout that allows for greater density of information than than the previous layout, which felt more like a blog. It is also interesting to note that the Vox team felt this layout would help establish their credibility by utilizing a familiar visual pattern that can also be found on the NY Times and Wall Street Journal websites. The news feeds for all three websites feature a primary article centered at the top of the feed, flanked by columns of articles on the left and right. Below, Vox presents all remaining articles under the heading “The Latest,” while the NYT and WSJ break their feeds down into sections such as “Smarter Living” and “World.”
Each of Vox’s articles include a byline. The articles featured at the top of the page also include teaser text. All of the articles have images, except for a few at the top. While Vox used to be highly image-centric, eliminating some of the photos helped to increase the density of text. At mobile, all of the articles except for the first one look identical, mirroring the New Yorker’s approach to eliminating most of the hierarchy at this size. Teaser text is dropped in mobile, and with a relatively small font size, the title and byline and sit comfortably to the right of the image without wrapping.
Unlike Vox, the Times’ and WSJ’s newsfeeds are very inconsistent. Bylines, topics, date, and teaser text are applied seemingly at random, although there does seem to be a rule in place for each section of the feed. The same mixed approach in applied in mobile. Here, some articles take a stacked approach, with a full width image sitting above the text. This is a nice presentation because the user gets the largest view of the image. It does however take up a lot of vertical real estate and relies on strong photography. Both the Times and the WSJ also eliminate byline in mobile.
It is interesting to note that the WSJ does not include dates of publication in their newsfeed and instead chooses to call out articles published within the last hour. For readers who frequent this site, it is a handy way to spot new content, while still allowing content editors to keep high value pieces that may be a little older at the top of the page.
The New Yorker, Popsugar, Vox, The New York Times, and The Wall Street Journal each employ unique strategies in tackling the same problem, based on their individuals needs and the needs of their users. When designing news feeds for my clients, I aim to provide each client with a custom solution, considering the overarching goals, content, and functionality of their website. Below are some points to consider when designing your own news feed:
- Are some articles more important than others? If so, how will you convey hierarchy? All of the publications above have multiple levels of hierarchy evident in how they display articles in their feeds. However, this hierarchy is less important if your news feed features very few articles.
- Do your news stories include compelling imagery? Many clients prefer not to utilize imagery in order to lessen the burden of pairing each story with a photograph.
- How is your content organized and tagged, and should that be evident in the feed? For clients who have a wealth of diverse content, this is an important way for users to pick out the articles that are relevant or interesting to them.
- Are you aiming for a more blog-like presentation with calming negative space and a contemporary aesthetic, or do you want to look like a print publication with dense content and a more traditional vibe? You don’t need to choose one or the other; you can navigate the space in between.
And, the next time you are absentmindedly scrolling through a Huffington Post editorial or a Buzzfeed list, why not take a moment to appreciate the design of it?
Stay connected with the latest news on web strategy, design, and development.