Navigation

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

How To, Marketing, Web Design | Sep 14, 2009

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.



Share this post
Comments (no login required)
  • http://www.brandfreeze.com Brandon

    Great information here. I’ve been thinking a lot about this lately as well. Currently I’m displaying the latest post in full with older posts as excerpts/teasers. I’ve been thinking about changing that, but I don’t want to lose the interest of the readers. I’ll have to keep these tips in mind. Thanks again!

  • http://blankbots.com Diesel Laws

    Nice post! There are so many different ways to showcase your front page, and to be honest, it is so hard to choose which one to use! This should hopefully give people a basic understanding before they start their blogs :D

  • http://www.azureautonomie.com Hannah Hu

    Very informative, resource-rich article. I’m glad to see more sites taking the excerpts approach, as sometimes when I wish to return to a fairly recent article, having excerpts can save a trip to the search box. The magazine-style approach is even better; readers can pick and choose the topic/category they wish to read.

    I myself use a kind of magazine-type approach for my website (www.azureautonomie.com), but it’s not a newspaper layout. Check it out!

  • http://thedjpodcast.com Peter

    I’ve been wrestling with what to put on my front page for a while. This will definitely help me make up my mind.

  • http://graphicdesignblender.com/ Preston Lee

    Surprisingly enough, I was just about to revamp the front page of my blog, GraphicDesignBlender.com, as well. This article will be a great tool in doing so. Thanks!

  • http://www.orphicpixel.com Mars

    oh uh! this is long sitting in front of my laptop, i love this topic, what i was looking about wordpress is all in here, thanks for this one Walter

  • http://www.moinid.com Most Interesting Ideas

    Beautiful examples

  • http://www.empfehlenswert-wien.at wien

    nice post

  • http://vandelaydesign.com/ Steven Snell

    Preston,
    I’m glad the article will be helpful for you when you revamp your blog.

    Hannah,
    I agree, I think it’s easier to scan with excerpts and I prefer that approach as a reader.

  • http://www.blog.exxcorpio.com Luis Lopez

    Great article, some great ideas, as I want to try the excerpts but I can’t for the moment do what I want because of the theme I am using. I hope to change that really soon

  • http://acrisdesign.com vikas ghodke

    Great information thx you for such a nice post

  • http://www.crearedesign.co.uk Luci

    A lot of great points here, i like how you’ve demonstrated the advantages of each layout, though I wouldn’t have been offended if you’d described what you feel is wrong about each type (personally, I currently go for the full posts look when there aren’t many posts, and then to excerpts when post count has gone up).
    Great, enjoyable, blog. Thanks!

  • http://www.sametomorrow.com/blog Adam

    Good post and tips about this topic.

  • http://www.digitalartempire.com Ben Rama

    le poste très intéressant et long j’aime thankyou

  • woras144

    Very interesting.

  • http://www.apackersmoverspune.com/ Manoj singh

    great you are clear so many doubts of mine big thanks

  • http://www.packersmovers.ws/ahmedabad-packers-movers.jsp Manoj singh

    and i want to more detail about blogs,i am hungry about knowledge

  • http://www.abloggersbooks.com Anne Lyken-Garner

    This is an excellent article! I’m going to link to it on my site as a ‘resource’ for writers and bloggers.

  • http://www.kamikazemusic.com Dave Sparks

    Some good examples, excerpts is certainly my preferred method although for sites with really short posts full articles can work.

  • http://www.vividwebgraphics.com/ sean

    Great post !! really liked it

  • http://www.bruceslogos.com logo design

    Thanks for sharing and I will be using this tips to my blog

  • http://www.web-optimize.com/ arizona seo

    Nice post! There are so many different ways to showcase your front page, and to be honest, it is so hard to choose which one to use!

  • http://confort-it.com moto_kate

    Thanks for this helpful post. I’m definitely going to use these advices soon.

  • http://www.kaplang.com Kaplang

    I am always wanting to change the way i display my own blog, I wish for once that I would just stick to one design and one way of displaying my content but I never can because I am a total fuss pot lol really useful post though, thanks :)

  • http://www.blogfullbliss.com/ Adrian

    Thank you for the mention! And great post!

  • http://www.cypherbox.net cypherbox

    Nice post. Thanks!

  • http://www.correresmidestino.com Zhu

    I basically went through all the stages.

    I first displayed the full post on the front page, with my first Blogger blog. I soon changed it to excerpts and I have now been using a magazine style blog for over a year.

    This was interesting though, because I never really considered the implications. I just switched to fit my content best. At first, I didn’t have a lot of post but they were quite long, so I thought they were best displayed one at the time on the front page. Then excerpts when I started having lots of contents.

    I now love photography and I find my blog more visually appealing with thumbnails, a feature section etc.

  • http://webcare.com.au Web Design Australia

    Thanks for sharing these sites showing various types of content layouts. Stating each layout’s advantages and disadvantages would surely be a great help for both designers and bloggers.

  • http://www.chimera-studios.co.uk/ Chimera Studios web design

    These sites are superb!!!

  • http://savvysavingbytes.com savvy saving bytes

    Some terrific design here & good ideas for home pages. I was wondering if you had experienced a google image problem I’ve just come up against. My home page has 10 full blog posts with images. The next 4 posts are on page 2. The problem is all the images (except a special exception) disappeared from google images the second they hit page 2, although the accompanying older posts continued to show up on google. The wordpress forum said google bots could no longer find the new image URLs and it was suggested I make my home page a static page. Any other ideas here? Thanks.

  • http://www.2webvideo.com Partha Bhattacharya

    Highly helpful, informative post here. I just followed you on Twitter, @parthabha

  • http://www.k3rb.com Kerberos

    Thanks, very helpful.

    -Kerberos

  • http://www.loopwhole.co.uk suffolk websites

    Some great blog designs going on there.

  • http://www.searchtoppers.com/ DHurowitz

    Enjoy reading your tips, I now plan to follow you on twitter.

  • http://www.bondmedia.co.uk/ Web Design London

    These designs are absolutely fantastic. Thanks for sharing.

  • C. Francis

    Brilliant and informative!

  • http://lovesmedia.com SEO AZ

    WordPress is the best for this! There are sooo mnay different themes. Your options are endless. Thanks!

  • http://www.i-graphic.co.uk/ Bournemouth Web Design

    Favouring the Excerpts Plus Featured Content approach

  • http://gas4freeweb.co.cc save fuel

    The wordpress forum said google bots could no longer find the new image URLs and it was suggested I make my home page a static page. Any other ideas here? Thanks.

  • http://www.stevecove.co.uk Woodbridge web design

    Some very creative designs indeed, nice collection. WordPress is so flexible I find i hardly use any other platform nowadays.

  • http://www.dotpeak.com Shahid Khan

    Nice article and good collection Blog’s front pages. I personally like the excerpts instead of the full page post but full page would make sense if a blog doesn’t have many posts.