Mullet-style blog layout and complete archive page
Return of the mullet
Five months ago, Jonathan Boutelle wrote about what he calls the “mullet-style blog layout“. Very interesting from a usability perspective: The thought is to make more content available from the front page, by utilizing time as a filter: The older the article, the less content is available on the front page. I really like the idea and would love to implement something similar on Justaddwater.dk.
Does anybody know of a WordPress plugin that can do this?
A successful web site should have direct links to as much useful content as possible on the front page (I think of craiglist as being the prototypical effective website: with one click you get down to pretty much any content that you are looking for). Most blogs simply don’t provide that kind of information density, even though there is plenty of space for it.
My new “Mullet” layout (rolled out over the weekend) solves this problem. The first 5 stories appear as before, with summary descriptions. This makes sure that the blog gives of the right “information scent”. But instead of having 5 more stories with summary descriptions underneath, I have links to the next 45 stories! This provides direct access to five times as much content as was available before.
I call it the Mullet for the obvious reason that it is much longer in the back (bottom of the page) than you would expect.
Complete archive page — remove monthly folders for increased user experience
Also, while you’re there, check out Jonathan’s recent article “Blog Layout: The Long-Tail Archive (or: Monthly Archives Considered Harmful)“. He argues that a one-page complete archive is superior to an archive based in monthly folders.
The casual browser who wants to explore your older content is forced to click on each month in succession, “pogo-sticking” from month to month just to scan your stories for interesting content. Loyal readers looking for a particular article are also forced into the same pattern.
This is a huge waste of time for readers. A much better approach to the archiving problem is to provide one page with hyperlinks to ALL your content, organized by date. This allows your readers to scroll immediately to the article they are looking for, bypassing the annoying “pogo-sticking”.
I call this archiving style the “Long Tail Archive”. The archive doesn’t have to include story excerpts: just the name of the article, and a link to it, are sufficient. This allows you to fit hundreds of links to stories on one page.
Jonathan also refers to Luke Wroblewski and Jed Wood that has some exellent roundup of ideas for blog interface design (and a follow-up):
Archives
Most blog archives are represented by either a listing of dates, titles,
or at best both. This lack of context makes it quite difficult to find
or discover relevant content “buried” in the archives.To address this issue, Jakob Nielsen recently
recommended employing a categorization of blog posts (so users can
find content related by subject matter), using clear titles, and including
a list of popular (and thereby potentially valuable) posts. Solid suggestions,
but there’s ample opportunity to go further.Effective ways to filter blog archives and contextual links included
with blog posts can go a long way toward exposing valuable content to
readers. Archives can be accessed by:
- Headline (title)
- Subject (tags and/or categories)
- Time (time, day, month, year)
- Author (of post, of comments)
- Format (links, reviews, articles)
- Popularity (incoming links, comments, trackbacks, traffic, ratings)
- Editorial Selection
- Continuum (how an idea develops over time)
blogging, usability, mullet, jonathan boutelle, mullet style layout, long tail, long tail archive, lukew, luke wroblewski, jed wood
January 9th, 2006 at 20:39 (GMT-1)
Hey Jesper,
These two layout styles are not very amenable to being packaged as plugins. They are essentially layout, so they are embedded in the template itself.
You basically do TWO loops instead of one for your main page. I’m not familiar with the coding details in wordpress but it should be dead easy to do something like the following:
Similarly, for the archive, you make a new template that does a loop like so.
I’ll cook up some sample code and shoot you a line when it’s ready… it should be _really_ trivial (basically a couple of parameters on the WP_Query object).
January 9th, 2006 at 23:31 (GMT-1)
Jonathan,
Thanks for your reply. Unfortunately, our blog ate the some of your comment. The code parts are missing. I’m a bit reserved about posting my email address here (I want mail from humans not spambots), so I’ll send you a ping via my Gmail account.
January 12th, 2006 at 02:59 (GMT-1)
[…] Mullet-style blog layout and complete archive page (Jesper Rønn-Jensen and Thomas Watson Steen) — “Very interesting from a usability perspective: The thought is to make more content available from the front page, by utilizing time as a filter: The older the article, the less content is available on the front page.” […]
January 12th, 2006 at 09:41 (GMT-1)
Hey John. Thanks for pointing to the article. According to Jonathan Boutelle, who coined the idea, the value to the user is less pogo-sticking (that is less searching for content). And also to make old content available and easier to find.
As I see it, that has a significant business value, although (like you I suppose) I’d love to see some data confirming it.
January 14th, 2006 at 17:37 (GMT-1)
You should look at http://www.subtraction.com/, which uses precisely the scheme you describe.
January 17th, 2006 at 00:41 (GMT-1)
[…] In the previous “Mullet-style blog layout and complete archive page” we had a look on the Mullet-style blog page that makes more content available on the fronpage, and also argued for replacing monthly archives with a single archive page.Danish “brugervenligeblogs.dk” pointed me to a research document from July 2005: Blog Mainstream Market Penetration Likely Limited By Basic Usability Issues by Catalyst Group Design. The 19 page usability report is available as PDF (119KB). Highlights of the study include: […]
January 18th, 2006 at 00:21 (GMT-1)
[…] Note: We have previously blogged about topics related to this in Mullet-style blog layout and complete archive page and Weblog usability followup. […]
January 19th, 2006 at 11:35 (GMT-1)
[…] Create a single complete archive page and remove monthly archives […]
January 23rd, 2006 at 07:20 (GMT-1)
Kapil Mohan has just published the code for doing the mullet in wordpress …
I linked to it in my sig, the URL is
http://www.kapilmohan.com/2006/01/22/mullet-code-for-wordpress/
-Jonathan Boutelle
February 5th, 2006 at 18:41 (GMT-1)
[…] I previously referred to this in a post about mullet style blog design and long archive pages, and this is actually something we’ll change on this blog. […]
February 12th, 2006 at 05:12 (GMT-1)
I find this post to be quite interesting because the front page of my site is in that style. I find the mullet-style to be appealing because I want people to give focus (and read) my latest entry, however, they should know that there are previous entries which they might be interested to read too.
March 12th, 2006 at 22:41 (GMT-1)
[…] 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. […]
November 14th, 2006 at 13:18 (GMT-1)
[…] Mullet-style blog layout and complete archive page […]
February 18th, 2007 at 14:37 (GMT-1)
I like it and the background and colors make it easy to read+
December 19th, 2007 at 10:04 (GMT-1)
Hey guys,
I am only looking for
The best soft to PC-where to buy, join site & other tipe to do a home online business.
With best regards.
May 5th, 2008 at 04:48 (GMT-1)
Most Interested facts about that you can read here:,
November 28th, 2008 at 13:36 (GMT-1)
Interesting but what I would really love to know is how to make my standard wordpress search function work better – It tends to come up with all sorts of rubbish – does anyone know of a better search plugin?