By: Jina Bolton

August 4th, 2008

Reader Rating: 9.5

When it comes to beautiful web design, one of the most overlooked elements of a web site is the site’s archive listings. As a result, I really appreciate a well-designed archive listing when I come across one, and have gathered together some of the best examples I’ve seen for this article.

Let’s take a tour through this collection of sites in which the archive listings are original, beautifully designed and, in some cases, bursting with attention to detail. Along the way, we’ll discuss what magic has been employed to make an archive’s look work so well.

A couple of really standout sites appear more than once here, due to the multiple ways in which archive listings are presented on the same site.

Sidebars

One of the most common places for a site to display its archive listings is in the sidebar. These listings are typically broken up into a listing by category and by date, and sometimes may include a listing by recency, a calendar view, or a tag cloud.

Let’s take a look at Szabolcs Bakos’s site, New Concept [1].

In this example, the archive listing is displayed in the second column—one of two sidebars on the right side of the page.

This archive listing starts with Categories, then has two links to a complete archive and a category archive, followed by Recent Comments. It has a very blocky treatment, but it works nicely with the site design.

Here’s Viget Labs Inspire [2]

The archive treatment in this sidebar, showing the recent comments and recent entries, are minimal yet elegant. The spacing and typography work well and make this example very attractive.

The header treatments in this sidebar are nice. But what really catches my eye is the most recent comment, which is beautifully styled in a phylactery with a watercolor background. The type is low-contrast, so could be considered hard to read; however, in this context, as it’s not the predominant element on the page, it’s a great effect (and includes a link to the comment where it can be read in higher contrast).

Next, The Statement [3].

The Statement uses a bold sidebar for its archive listing, which feels dimensional, even though it’s just a solid stripe with rules.

The most popular posts are very dominant, and use a fun numbered style to indicate the order of popularity.

Calendars

The next sidebar treatment we’ll look at uses a calendar, a feature that was seen frequently on earlier blogs, and not as much on newer blogs. Here’s the Viget Extend [4] web page.

And here’s a close-up of the calendar.

The blocky date style in the calendar above is a nice touch. The days with posts stand out more, and you can view the previous and next month using the pagination appearing to the left and right of the month and year listed on top of the calendar.

Take a look at Intensify.org by Rachel [5]

This site also uses a calendar in the sidebar, and not much else, other than a link to an index and the RSS feed linked icon.

The calendar is more open than blocky, which works well with this layout’s whitespace. The linked days use a bold yet fun pink underline.

Tag Cloud

For something a little different, here’s coda.coza [6].

The sidebar treatment on this site uses a tag cloud to show the popularity of keywords that the post has been tagged with. It also lists recent comments and most popular posts, in a simple but nicely styled set of lists.

The tags are in low contrast against the background, and use different sizes to indicate popularity.

Other Treatments

This is Jeff Croft [7]’s homepage.

Jeff’s site is very clean and minimal, yet uses some really nice details, ranging from rounded corners and drop shadows to incredible-looking bar graphs.

The archive styling in this sidebar focuses on clean typography. However, the most eye-catching element would be his fun, unique way of displaying popular tags; rather than using the tag cloud, he uses a horizontal bar-graph CSS-styled info-graphic. I could actually steal this ...

Interactive

Next, we have the web page of Alex Buga [8].

The archive treatment in this sidebar, showing the recent comments and recent entries, are minimal yet elegant. The spacing and typography work well to make this example very attractive.

The recent articles module in the sidebar are very glossy, and have expand and contract features to show or hide the content. While the unfortunate wrapping issue is unsightly, everything else looks really tight.

Here’s another approach: Darren Hoyt Dot Com [9]

The archive listing in the sidebar on this site avoids being over-designed, and is very compact.

The list style is nice, and I like the colors. A criticism is that the list looks very detached from the interactive header it belongs to, and there are a few spacing issues.

Then there’s Komodo Media [10].

This sidebar uses a tab-switcher style archive listing, which shows different archive listing views, and helps keep the sidebar uncluttered from all the views.

Tab-switching content can sometimes hinder usability, but the icons in the tabs help draw attention to it.

Footers

Rather than using a sidebar, a common trend in web site design is to place supplementary information (such as navigation, archive listings, photo thumbnails, and so on) in the footer. If used instead of a sidebar, the footer allows for more room in the content area for that page’s primary content; it also creates a nice anchor for the bottom of the page. We’ll look at footers that are more defined as the “floor” of the web site; we’ll also look at some “pseudo-footers,” in which the content falls at the bottom of the content post area.

Some of these examples are of sites we’ve already looked at for sidebars. Those sites get double points!

Let’s talk lists in footers: first, Viget Labs Inspire [11].

The footer treatment for this site is a large, dark area mostly used for archives. The category listing follows the same width as the content area, while the monthly archive follow the same width as the sidebar area.

The typography used in these archive listings are gorgeous, and accented by nice rules and simple, yet elegant graphic treatments.

Next, Designing the News [12].

Designing the News also uses a dark space at the bottom of the page to display supplementary information.

The archive treatment here is super simple: just a list of popular tags and the latest experiment.

Nimbupani Designs [13] has an interesting and effective solution.

The archive listing in this footer section cannot be missed; bright yellow is hard to overlook!

The stitching appearance around the border is playful and really makes this footer work. The archive listing simply uses a Popular posts listing and a tag cloud for Categories.

Other Approaches

Let's look at Komodo Media [14] again.

Komodo makes use of a really great-looking calendar at the bottom of the content area; this is what I’m calling a “pseudo-footer”, because it’s more like the bottom of the post area, rather than the bottom of the web site.

The calendar uses horizontal rows, each representing one year’s worth of posts; months that contain posts are brighter and linked. The wood-grain header and leave detail are a very nice touch.

Another site we’ve looked at before, Intensify.org by Rachel [15] uses the bottom sections of the page to summarize reviews of movies, books, and music.

In this Movies footer section, the typewritten and hand-drawn look is fun and playful.

Interactive

For something different: Fling Media [16].

Fling Media uses a “swisher” or a “slider” (whatever you might call it), at the bottom of the page.

Each article posting represented here are designed to look like little pages: very cute!

Archive Pages

Some web sites have an entire page or pages devoted to archives. Unfortunately, the majority of the examples I have seen use a very bland list of posts. They seem to be the forgotten pages, or an afterthought. So it’s really nice to come across a striking archive page—often, it can make or break the design of the web site.

The examples we’ll look at now show a few different ways designers have chosen to display their archive pages. Once again, a few of these examples are of web sites we’ve already looked at. (Triple points!)

Jason Santa Maria [17]’s archive page, entitled Articles, is a super-clean, minimal design, and it’s very well done.

Recent entries, a category listing, monthly archive, and “design tags” make up the components. The “design tag” is a fun concept, where Jason plans to add additional styling and imagery for the web site design, depending on post; these designs are tagged with attributes of the design, which can then be indexed here.

Boagworld [18] uses a simple styled list for the archive page.

There is also a latest shows listing for the podcasts, which uses another simple styled list, but shows more detail for the most recent show. Finally, a tag filtering mechanism makes finding relevant posts much easier.

Orderedlist [19] uses a clean article listing, with nice subtle rules to add a bit of dimensionality.

There is also a filter search field that uses “live-search” -like effects, which could be compared to Mac OS X’s Spotlight search.

Designing the News [20] uses a simple archive page with archives by month and by category.

While I do feel that this page could have been pushed a little bit further, I like the combination of Archives with Search.

Here’s Jeff Croft [21]’s site again.

The bar graph style that Jeff used in his sidebar implementation is used again on his tag archive page—a refreshing way to visualize popularity.

And another appearance from The Statement [22]!

The Statement uses the previously mentioned sidebar treatment again on its archive page, but also dedicates a sleek, attractive archive page.

Honestly, I don’t think I need to say much about AvalonStar [23] ...

... except that it’s gorgeous.

Conclusion

I hope you enjoyed this little tour! As you can see, archive listings come in many forms and styles, and can deploy many different types of features. Whatever location and functionality it is that you decide to use when designing an archive listing, give it some extra love and care. Do something unexpected and beautiful. It will be like that really well-organized, color-coordinated closet you have in your home. Unless you’re like me ...

[1] http://newconcept.hu/
[2] http://www.viget.com/inspire
[3] http://theoldstate.com/blog/
[4] http://www.viget.com/extend
[5] http://intensify.org/
[6] http://coda.co.za/blog/
[7] http://jeffcroft.com/
[8] http://www.alexbuga.com/
[9] http://www.darrenhoyt.com/
[10] http://www.komodomedia.com/blog/
[11] http://www.viget.com/inspire
[12] http://www.designingthenews.com/archive/
[13] http://nimbupani.com/blog/
[14] http://www.komodomedia.com/blog/
[15] http://intensify.org/
[16] http://flingmedia.com/articles
[17] http://jasonsantamaria.com/articles/
[18] http://boagworld.com/archive.php
[19] http://orderedlist.com/archive
[20] http://www.designingthenews.com/archive/
[21] http://jeffcroft.com/tags/
[22] http://theoldstate.com/blog/?local=archive
[23] http://avalonstar.com/blog/