How to Display Your Content on a Blog’s Front Page

By WebdesignerDepot Staff Posted Sep. 14, 2009 Reading time: 7 minutes

The front page of a blog is obviously of great importance to the overall design.

Up until a few years ago, most blogs simply showed posts in order of publication, the most recent at the top.

Then excerpts became popular, and later magazine-style front pages.

The purpose of the front page will, of course, vary a bit from one type to another; for example, a personal blog will be different from a professional multi-author blog.

In this post, we will take a look at the options that bloggers and designers have for showing content on the front page, and some reasons for choosing each.

Before getting into the details, let’s consider the purpose of the front page, so that you can make a more informed decision about the type to use for your own blog.

The front page is important because it has a substantial impact on the first impression of visitors.

New visitors expect to be able to get a good idea of what the blog offers from the front page alone. Visitors also want to be able to find content they are looking for through it.

Easy navigation and usability are important because the front page will likely be the most frequently viewed page on the website.

The front page is important, finally, because it will promote the most important or recent content.

 

Options for Displaying Content on a Front Page

You have basically three options for displaying blog content on the front page: full posts, post excerpts and magazine-style. We’ll look at the benefits of each, which will hopefully assist you in understanding your situation and making an informed decision.

1. Full Posts

With the full posts option, blog posts are displayed in full, not truncated, in reverse chronological order. This method is not nearly as popular as it was a few years ago. Here are the benefits of showing full posts on the front page:

  • Visitors Can Read Entire Posts Without Leaving Page
    Not many blogs show full posts on their front page anymore because other options provide more benefits. But one benefit of showing full posts is that visitors can read several recent posts in full without leaving the page. The only thing they probably couldn’t do is comment on a particular post.
  • Works Well With Short Posts
    If your blog posts are relatively short (say, 500 words or less), showing them in full on the front page may be easier. Excerpts can look funny if they already contain half the post, and visitors can get annoyed if they click through to the full post and find only two more paragraphs to read.
  • Doesn’t Break Reader’s Flow
    Having to click through to an individual post after having read the excerpt can break the reader’s flow and perhaps cause them to lose interest and leave the website altogether.


2. Post Excerpts

Another option is to show only excerpts of posts, with links to the full content for those who are interested.

You could show teasers to, say, 10 articles on the front page and let visitors choose what to read. WordPress generates excerpts automatically, or you could create a custom excerpt taken directly from the post or show any other text you like.

Showing excerpts on the front page is a popular option now. Here are the benefits:

  • Scanning Is Easier
    Most visitors prefer to scan content on the front page to see what is available and what kind of posts are published. Full posts make scanning difficult. Showing excerpts makes it quick and easy for visitors to see what has been recently published and to choose what they like.
  • Control of Design
    Theme designers and bloggers can be a bit more creative with excerpts than with full posts. You can control the length of excerpts, which allows you to more precisely position and line up content, without worrying about long posts breaking the layout. As you will see in the showcase at the end, some theme designers are quite creative with excerpts. Excerpts simply give the designer more control over how the front page looks.
  • Shorter Front Page
    If your posts are relatively long and you display several of them in full on the front page, the page will quickly become unmanageable. Excerpts keep the page shorter, making it easier for visitors to navigate. Of course, the number of excerpts you display affects manageability as well, so adjust that accordingly.
  • More Page Views
    Some bloggers use excerpts to increase page views: if a visitor reads an excerpt and wants to see the full content, they will have to leave the front page, giving the blog another page view. More page views can lead to more income for certain types of advertising. However, inflating page views for more revenue can irritate visitors. In general, if this is your only reason for showing excerpts on the front page, don’t do it.
  • Duplicate Content Is Avoided
    Search engines don’t like duplicate content and might penalize you if they suspect your blog has it. A front page that shows full posts essentially duplicates the content of individual blog pages. Showing excerpts instead can help prevent this problem.


3. Magazine-Style

The third option is a magazine-style page. It is similar to excerpts, but posts are not necessarily shown in chronological order. Instead, they are usually categorized, with their dates shown.

This is typical of news websites, on which headlines and teasers are arranged in columns by subject, such as sports, world news and so on.

This magazine style brings all of the benefits of excerpts and a few others. Here are the benefits:

  • Better Organization of Content
    The most significant benefit is that the magazine style allows for better organization of content. Rather than simply displaying the five or ten most recent posts, you can display posts by category or even reserve a feature area for posts you want to give the most exposure to. You control what content visitors see first. And visitors may be able to better understand what your blog offers by seeing the content arranged by category.
  • Control of Design
    This benefit is even greater with magazine-style front pages than with excerpts. The blogger chooses exactly where to display each piece of content, based on category. And plenty of layout styles are possible with this option.
  • Looks Like Typical News Website
    Organizing and classifying content by subject tends to make the front page look like a news website. If your blog has a lot of content and is news-oriented, this could be the deciding factor. This style tends to create the impression of a larger website because it shows off so much content and variety of topics.

 

Tutorials for Designing and Laying Out Blog Front Pages with WordPress

Here are several tutorials on creating front pages in WordPress and the types of layouts we have discussed.

 

Blog Front Page Showcase

Now we’ll feature a number of blog front pages that demonstrate various approaches to displaying content.

Excerpts

Vectips
This style of excerpts, with thumbnails to the left, is rather popular.

Vectips


Lokalisten Sprechblase
A brief excerpt of each post, with accompanying image. The front page shows only the three most recent posts.

Lokalisten Sprechblase


Blogfullbliss
The images on this front page are to the right of the excerpts.

Blogfullbliss


Francesca Battistelli
Just text excerpts, no images.

Francesca Battistelli


Creative Tempest
Very brief excerpts, with a thumbnail of the lead image from each post.

Creative Tempest


Blog Me Tender
Excerpts of the three most recent posts, each with an image.

Blog Me Tender


The Art of Nonconformity
This unique layout is split down the middle. Five post excerpts are shown on the left.

The Art of Nonconformity


Bluedots Design
The images on this front page appear above, rather than beside, the excerpts.

Bluedots Design


Design Reviver
Here is an example of the flexibility that excerpts can bring to the front page. The layout of these two columns would not have been possible with full posts.

Design Reviver


Excerpts Plus Featured Content

Tutorial9
Includes a slider featuring five recent posts, with post excerpts shown below.

Tutorial9


Colorburned
A similar slider and excerpt combination is used here.

Colorburned


L’effet Crea
This front page also has a featured content area above excerpts of recent posts.

L'effet Crea


Magazine Style

Pop Culture Tees
Four headlines are displayed horizontally (with their categories) above excerpts of recent posts. “Latest Tees” are shown to the left of the excerpts.

Pop Culture Tees


The 9513
Excerpts of “Editor’s Picks” are shown in the main column, with headlines of the latest blog entries to the right.

The 9513


Kineda
One post is featured “In the spotlight,” with four other popular posts from the week displayed horizontally. Excerpts of other recent posts are shown below.

Kineda


ANidea
Includes an area for one featured headline and excerpt. Four other excerpts from various categories appear below.

ANidea


Ecoki
A featured article is at the top, with four recent posts listed horizontally, and then another row of four “Must reads.”

Ecoki


Full Posts:

Freshivore

Freshivore


Owltastic

Owltastic


Unusual Front Pages

Story Pixel
Headlines of three recent posts, but no excerpts or full posts.

Story Pixel


Michela Chiucini
One post excerpt, with headlines of other recent posts listed below.

Michela Chiucini


Dirt Du Jour
One post shown in full.

Dirt Du Jour


This post was written exclusively for Webdesigner Depot by Steven Snell, a web designer and blogger. Steven runs Blog Design Heroes, which showcases well-designed blogs.

Which system works best for you and why? Please share your feedback with us.



Aa