Front Page Design

Editor’s note (2018): Since the original publishing, I’ve changed my mind a few times on what makes a good front page. Ultimately, I’ve settled on the staggeringly simple opinion of “it depends” and “know your audience”. Shocking.

I’ve been toying with how best to structure the front page of sites that have a focus on writing. The front page is the first impression — a digital handshake — and ensuring it conveys your content in a way you want is extremely important.

A number of conventions exist for listing news-related content, however the two most popular are:

  1. Present a list of all the posts, much like an archive. Clicking on the post title will take the reader to a single-page view where the individual post lives. We’ll call this type of design conservative.
  2. Provide the latest 10-20 posts in full-text. Clicking on a post title will still take the reader to an individual page, but content is never hidden behind an extra click. Either you see the full article on the front page, or you see it on the individual permalink. I’ll refer to this design type as liberal.

From a news and journalistic standpoint, the liberal design makes the most sense. As the writer, you don’t want the reader to have to perform multiple clicks to begin reading your latest post, and the average length of most posts (from the blogs I follow) is short enough to allow the visitor to quickly scroll through a handful of articles and get a feeling of the recent news.

Another subset of writers I follow use an archive-as-front-page presentation. This conservative approach initially discourages the binging on content that the liberal design encourages. However, the trade-off brings a better high-level view of what new content has arrived since the reader’s last visit. The conservative presentation puts some of the power back into the hands of the reader, as they will only have to scroll through or read a post if they want to.

Now, the main question that I’ve been alluding to: What type of readers do you want to attract?

Take Michael Lopp, of Rands in Repose, who has written some truly great (and long) pieces. Lopp’s most recent design iteration is one that puts emphasis on his latest essay, with a conservative-style list of links to other posts at the bottom. This compromise conveys that Rands in Repose is primarily for long-form, and that it’s not updated with daily (or even weekly) cadence.

Devil’s advocate: Would someone still read Lopp’s writing if his front page was a conservative approach, with a long list of chronological post titles? Sure. But writers like Lopp and the others I’ve mentioned above (myself included) are acutely concerned with the experience that our visitors read our content in. The designs we choose to implement are intimately tied with our goals for both the site and our writing.

As for my goals, I am willing to sacrifice an engaging front page for one that sits more closely to the intersection of timely and timeless content. Not all my posts are long — some are only a few sentences long — but I want each piece to have the privilege of being the exclusive focus of an entire page. My front page currently lists every article that I’ve ever written, and clicking on a given title will take the reader to simple, and focused reading environment; I even remove unnecessary navigation links when not on the front page.

This conservative approach helps me attract the type of reader who appreciates being able to quickly scan for items of interest, and then read those pieces in a clean and minimal environment. This webcolumn’s focus is currently one of liberal arts-type subjects, and the design of the front page is one that encourages finding pieces of interest to the visitor, rather than forcing the reader to scan through posts they may not enjoy.

To close, many of these thoughts on front page design stemmed from an article I read, The Slow Web by Jack Cheng. Although Cheng’s focus was more on the companies who “want us to spend every moment of our waking lives with them,” the sentiments of what he wrote about are applicable to a news-based website as well. One of the choice, pull quotes from the essay:

Timely not real-time. Rhythm not random. Moderation not excess. Knowledge not information. These are a few of the many characteristics of the Slow Web. It’s not so much a checklist as a feeling, one of being at greater ease with the web-enabled products and services in our lives.

Despite the varied nature of my content here, I hope this design iteration allows for an easy reading experience and a focus on letting you read what you want to read. Thanks for reading.

Monday, 6 January 2014




Read more about this site, or follow via email, RSS, JSON.