Mullet Layout: A user-friendly front page

Both Jesper and I have been quite busy working on Capgemini projects the last month + the server move two weeks ago, a new version of WordPress, a skiing vacation and a broken leg took most of my spare time. So the posting-frequency have dropped a little lately. But don’t fear we are still here ;)

Anyway… If you are a frequent reader and take a look at the front page sometimes, you might have noticed that we updated the layout quite a bit. Blogging software like WordPress usually shows the last 10 to 20 posts on the front page in full length. This tends to give a lot of attention to the latest post whereas previous posts quickly move below the fold and away from people’s attention. We quickly changed this default behavior to on only show an excerpt (or teaser if you like). The readers then had to click on the excerpt to read the full story – But this was not enough…

Mullet Layout (image by Jonathan Boutelle)After reading Jonathan Boutelles “Mullet”-style blog layout article we our self’s started to wonder how to make the user experience better. So this is the first step: Mullet Layout on the front page.

As Jonathan writes the word “mullet” is used to describe the way posts / articles / stories / whatever gets trimmed more and more the longer you look down towards the bottom of the page:

1. At the top of our front page we list the latest 5 articles showing the headline, the excerpt and other relevant links and information:

Mullet Layout, showing excerpt

2. Below the teasers of first 5 articles we show headlines along with publishing dates of the previous 35 articles:

Mullet Layout, showing only headlines

It’s pretty neat if you ask me – Simple HTML list with a little CSS magic :)

3. All in the bottom we show a link that will guide the reader to our archives for even older articles:

Mullet Layout, link to archive

Related articles

In a couple of related articles we have written about what there can be done to improve the usability of blogs:

We will implement these improvements during the next couple of months and will post about our findings along the way…

UPDATE: I thought that I would add some links to other bloggers that have written about and implemented this new trend:

Technorati Tags: , , ,

22 Responses to “Mullet Layout: A user-friendly front page”

  1. Jonathan Boutelle's home on the net Says:

    Mullet sighting at justaddwater.dk…

    JustAddWater has implemented the mullet blog layout, and written an article about it. Here’s his description of the mullet:…

  2. Brainspill » The Wordpress Mullet Plugin Says:

    [...] I eventually arrived at Mullet Layout: A user-friendly front page and thought it’d be nice if you could just activate a plugin to get the user-friendlier mullet display of posts, instead of switching or modifying themes. [...]

  3. 紫雨~网上创业策略方案 Says:

    I am not sure whether I am the first chinese apply this Mullet style plugin. Anyway I like this layout very much bcoz it is consistent with the “shape” of “long tail”.

    The ending part of a homepage with a lot of titles shown is just like a long tail. You can have a look how its effect in a chinese blog here:
    http://www.g-economy.com

  4. justaddwater.dk | Time to revise our blog purpose Says:

    [...] Mullet Layout: A user-friendly front page [...]

  5. ZERO Says:

    it`s cool wp plugins!
    thanks!
    it is like sitemaps?!
    yeah!

  6. Girly Profile Layouts Says:

    The teaser posts you mentioned are a great plugin to have for wordpress. They are much more SEO friendly as they prevent duplicate content penalities from occuring (Google likes to see unique content on each page). I think these post excerpts also help to intrigue users to delve into the depths of your website and browse more posts as well–instead of just reading the full posts on the home page and leaving. I have used it personally and I have had great success with the post excerpt plugin.

    I had previously never heard of the mullet layout, but this a great add-on. I will have to try that for my other blogs as well! Overall, great post man :)

  7. Ferienwohnung piemont Says:

    Like the layout, and will implement something similar on my own blog. It’s a good concept to carry across to general site design as well of course.

  8. Grand Cayman Islands Says:

    “”business in the front, party in the back” I love that quote. I guess it could be said the same with this wordpress theme.

  9. Blogging Tips Says:

    Hey,

    Thanks a lot for this plugin.

    I’ve been searching for a plugin of this nature near and far this is perfect! Really appreciate your efforts and hope that you would be continuosly developing such great plugins!

    And I love the quote – “business in the front, party in the back”

    Cheers!
    Nadeesha.
    http://www.rockfuse.com/blog/

  10. Free Article Directory Says:

    Great plugin review I will be attemping to install it tonight

  11. Make Money at Home Jobs Says:

    I was just searching through your blog and I like the looks of it. I think I should try this plug-in on mine. I have been looking for something different.

    Does the SEO on this type of blog improve your serp rankings?

  12. Angela DeLeon Says:

    What an interesting plug-in. I think I will try it on my blog. I am getting more experience at blogging and always looking for ways to improve. You have a great way of explaining things.

  13. Algarve Portugal Says:

    Looks great! I will download the plug in and try it out. I have been trying out plugins to cut the post or show an excerpt on the front page but some break the layout when there is a picture and some don’t show the picture at all. I will check this one out! Thanks!

  14. KabonFootprint Says:

    People must always remember that they make a website for the visitor who is actual human! So always build your front page as humanly friendly as possible. I very much agree on that.

  15. Voos Baratos Says:

    Cool layout! Thanks for sharing this! Thanks for the link, i will be trying to implement this!

  16. Mark Says:

    WordPress is going better and better in these days and am wondering why they are so late to do so. on the other hand I have been reading a blog entry which explained that how we can change a wordpress blog to a Digg style site. I think it is much better to use plug-ins with wordpress to do that insteas of those dirty clones.

  17. Jerome Says:

    I’ve been mulling over front page layouts recently. My usual philosophy is ‘keep it simple’ and the mullet idea fits really well with that.

    I think the future is to present different front pages to different users. Show your latest posts to regular readers and a ‘must read’ selection for first time visitors.

  18. Sam Says:

    Man I like this mullet add-on, very user friendly for the front page, I will definitely be installing it on some of my blogs.

  19. Internet Entrepreneur Says:

    This is an awesome little feature for WordPress. That’s one thing that I don’t like about Blogger blogs. They often don’t have the cool little things that make WordPress cool.

    Have you tested out Drupal by any chance? I heard that it’s supposed to be a pretty good program.

  20. Sandy Says:

    I like that you lay out your thought process. I may be using the mullet layout…but the way I achieve it, I think, is by using the more tag. That compresses the posts and allows them to show more of the posts on the main index page.

  21. Frontpage Templates Says:

    Wish it didn’t remind of the mullet haircut. I do think this is an awesome feature to add to my WordPress site. I really prefer the snippets over long post descriptions that few people read anyway.

  22. Catherine Ellis Says:

    Is there anything similar available for Drupal?