Designing the Front Page of Your Site

One of the things I kept thinking about, after writing about The New York Times website and advertising models post in general, is just how poorly most front pages are designed. I am not meaning that often sites have ugly front pages, but I mean that often sites are showing entirely the wrong things on the front page.

This applies to most websites, across a wide range of categories, but the greatest offenders are the blogs. It feels very much like people choose to show the same content on the front page of their blog, because that is how it has always been done, instead of thinking through what might actually be useful on those pages.

The typical blog shows a running list of all posts, with the newest post at the top. These pages are paginated, and all look identical. Aside from menus, logos, colors, and type — this is the layout that almost every blog utilizes. Oh, and I guess some blogs make the decision to show full posts or truncated posts on the front page, but whatever.

This design frustrates me more than it probably should, still I think it is worth talking about this — with the hope that maybe I can change a few of the sites I visit for the better.

What The Front Page Should Do

The first thing any designer has to ask is: what should the front page of my site do? This implies the page is active, and I think it needs to be, but that shouldn’t mean videos or other stupid tropes. The front page needs to do a few things right away:

  • Set the tone
  • Show what your site is
  • Entice new and old readers alike
  • Allow people to find what they want to find

That may sound stupidly obvious to many of you, but for those of you with blogs, did you think about any of these things before you decided to use a reverse chronological layout on your most recent posts? And I mean that as an honest question, because I am not sure most people think about this.

What About This Site?

Ok, now is when you have gone to the front page of my site to see how I do it, right? Spoiler, it’s a reverse chronological order — insert your gasp here — but it’s not quite, is it? In fact the front page of my site took weeks to refine and develop into exactly the right tone and feel I wanted.

But it’s still not a great design.

Let’s assume it is marginally better than the normal layout, and allow me to share with you some of the thinking behind the design. My front page is actually six parts.

  1. A header which tells you where you are (logo)
  2. Navigation, for those who have been to the site before.
  3. The most recent article, shown with Title, Sub-Head, Excerpt (first few paragraphs normally).
  4. Nag to become a member (not shown to members)
  5. Listing of 9 most recent articles showing just Title, sub-head, reading time, and publish date.
  6. Meta info about the site, and deeper links for those familiar with the site, including search.

Most of this is rather obvious in why I would want to include it, but there are two parts I want to explain more: part 3 and part 5.

Most Recent Article

The questions I developed at the start of this post, are the questions I asked myself. Since my site is about my writing, and my most recent writing is typically the “best” writing I have to offer, it makes the most sense to show the most recent article.

However, only the most recent articles, because the linked list posts, the quotes — those might not ever contain any original writing from me — so why on earth would I want to place those front and center? All that says to me is “Hey, I don’t really write stuff of my own, but here are some links.” If that is what I saw with a site, I would walk away. And because of reverse chronological order, this is what you see on a lot of sites out there.

So the thinking with how I show the first article is to give a reader a low commitment taste of what I have to offer. I show the headline, a sub-head, and 1-3 paragraphs for the post. This allows you to see what my writing is like, without having to feel overwhelmed by a potentially long article.

Aside about Subheads

A lot of people have commented to me how much they love my subheadings on the post. Not so much what I write there, but the look and the perspective they add. I think it is worth pointing out how I use those from a basic level.

There’s two possibilities for any one headline I write: it is vague and snarky, or it is boring a accurate. “How absurd is this” versus “Review of Super Cool New Bag Model 4”. I will write either depending on my mood, and the first one is a real problem if you are selective about your reading list, because what the hell am I talking about in the first one? There is no clear indication of what the post may be about.

This is where my subhead comes in, as I use it to clarify a vague and snarky headline. Likewise, I use it to pump a little life in to a boring and accurate headline. It works both ways to maintain guidance and personality for readers of the site.

Most Recent Article List

The list length is 9, so that the ten most recent things are on the front page. Ten items just felt right, I played with more and less. Less felt like the site was empty, and more made it take too long to get to the search bar at the bottom of the site. It was a balance between navigation and exploration.

The big question is why I omit the excerpts on these posts and instead just use the headline and subhead. My thinking is that the combination of those two should be enough for anyone to decide whether they want to click through to read, so I don’t lose much by not showing the opening of the post. However, I gain space back by omitting the openings and I can give a clearer picture to new readers of the topics I normally cover. It doesn’t take much to skim that list and get a feel for the site.

I do add in publish dates (showing new readers how active the site is) and reading times, which show the level of commitment for most of my posts. In writing this I do realize I don’t show some of this for the first post, and I think reading time should probably be added in there. Oops.

Wrapping Up My Site

Again, my site is by no means perfect. It’s not even a great example of what I am talking about, but I did put the thought into it which feels lacking on most other sites. More than anything else I wanted to go through my site to show you how I applied thinking through some of those questions.

My writing is the most important thing people come to my site for, so I need to showcase the best of my writing. Links and quotes are the worst of the writing I can offer, so I needed them off of the front page. That’s the gist of my thinking, and the design is simply how I executed on those thoughts — but there are many other ways to execute on this.

What Can Be Done?

There’s more to this than just writing sites, as you can look at how The Wirecutter shows information on its front page. A topical large link, like the holiday gift guide, new bits on the right, but the heart of that page is categories to allow readers to quickly move to what they came to the site for: recommendations. It’s not the prettiest design, but it is highly functional and informational for new readers.

If you run a blog of any type it is worth your time to step back and ask yourself what your best content is. And then ask yourself if you are showcasing your best content right on your front page, everyday, without fail. For some this is going to be writing, while for others this may be photography.

Ask yourself the question.

Think About It

After you ask yourself the question, you really need to think about it. You need to think through all the different angles of what would be helpful. Are you catering at all to new readers?

I designed my entire site to cater to new readers first and foremost. Then I looked for areas where I could help existing readers. It is likely that most of my existing readers are using RSS, so they likely rarely see the front page. But new readers always see the front page — so they had to come first in my mind.

If you do manage to redesign your site in anyway, I would love to hear about.

Become a Member

This site is 100% member supported and free of advertising. Members receive access to exclusive weekly content: iPad Productivity Report, videos, and the best products listing.

Join Now

Already a member? Please sign in.

Article Details

Published
by Ben Brooks
8 minutes to read.


tl;dr

Did you even consider not using a reverse chronological layout for your blog?