Website Archives Design: Good Practices and Examples

Advertisement

The archive is one of those often-overlooked parts of a website that doesn’t get the attention it deserves. Too often it’s thrown on a page that’s no different from any other page on the website, or it’s ignored altogether. The archive offers a lot of room for creativity, though. Whether you opt for an abbreviated one in the sidebar or footer or devote an entire page to it, the archive an opportunity to make your design stand out.

Common Design Approaches

While there is plenty of room for creativity, there is also a number of things to keep in mind to make sure your archive is functional and user-friendly.

1. Use as Much Space as You Need

There’s no sense cramming your archive into a space that’s too small. If your archive is extensive, consider devoting an entire page to it, rather than forcing it into the sidebar or footer.

Screenshot1
Neography2 uses a lot of white space to showcase its posts. Every single post is highlighted with red on the calendar. Also, short excerpts are displayed in the chronological order under the calendar. Nice design.

The opposite is also true. If your archive is small or fairly simple, you may not need an entire page for it. Instead, consider putting it in the sidebar or footer or even in a drop-down menu.

2. Make It Easy to Find

You archive should be findable by casual visitors. Put it (or a link to it) somewhere obvious: the header, footer or sidebar are the best choices. Label it clearly, too, so that visitors know this is your archive and not an off-site link.

Screenshot3
Instead of naming its archive section “blog posts”, “older blog posts”, “recent articles” etc., Kyle Meyer4 calls it “Archives” and prominently places it in the main navigation on the top of the page. Also notice the archive design approach: the posts are placed vertically according to the timeline. An interesting solution.

There’s no point in having an archive if you make it impossible to find.

3. Clearly Delineate It

Especially if it appears in your sidebar or footer, your archive should be clearly defined and distinct from surrounding content. This can be achieved with a border, a different font, color, whatever you want. Make sure it’s immediately apparent where your archive begins and ends.

Screenshot5

If your archive is on its own page, consider omitting things like the sidebar, which might add to the visual clutter. If not, make sure it’s at least obvious which parts of the page are the archive and which are the regular sidebar, header and footer content.

4. Use Categories

If your archive is big, use categories to make it easier for visitors to find content they’re interested in. Even in a smaller archive, categories can be useful. Just remember that too many categories can confuse users more than they help.

Screenshot6
On Colly.com7 users can browse archives by year or by categories.

Alternatives are a date-based archive (which works well for personal blogs but is less effective for topic-based websites) and a tag-based archive (which is particularly helpful on blogs with diverse content and for very large archives).

5. Don’t Show the Full Content

If you give the archive its own page, don’t show the full articles on that page. All that does is take up space and make it more difficult to navigate.

Screenshot8

Screenshot9
On her redesigned portfolio site, Veerle Pieters10 gives her archive an own page and shows only excerpts of the articles together with illustrations. The excerpts are placed in two columns and are sorted by date.

Instead, include just the title or the title and a short excerpt (one or two sentences). This keeps the page looking clean and organized and makes skimming much easier.

6. Give Your Visitors Various View Options

If you are displaying excerpts on your archive page, it may be useful to provide users with an option to quickly scan the titles of the articles instead of scrolling the excerpts of the articles endlessly. A simple switcher would be enough. You may want to use cookies to save the current preference of the user, though.

Screenshot11

Screenshot12
VisitMix13 provides two view options to its readers: by default, the excerpts view is selected, but if you click on the corresponding icon in the right upper corner, the view changes right away. Unfortunately, this state is not saved, so if you prefer to browse archives in the “short” view, you would need to always click on the icon first.

7. Split Things Up

No one says your entire archive has to be contained within a single list. Especially if your archive is in the sidebar, consider breaking it up with lists of the most popular posts, random posts, most recent posts, etc.

Lists like these can help visitors find interesting and relevant content that they might not find in a conventional archive. They also add more visual interest to your website, depending on how you structure them. A list of random or featured posts also draws attention to posts deep in your archive that might not get much traffic otherwise.

Do You Even Need an Archive?

Not every website needs a dedicated archive. Some designers opt for just category-based navigation instead. Others have no archive navigation other than an “Old posts” link.

If your website has timeless content that visitors might find useful six months or a year down the line, then an archive can be valuable. On the other hand, if it’s a personal blog that has mainly a chronological structure, then you could safely forget about an archive unless you really want one.

Also, consider offering a category-based or tag cloud-based system to access older posts, instead of a formal archive. Either might be more useful for visitors looking for specific content. An archive, though, can present an interesting and efficient method for visitors to find content that they’re not explicitly searching for. Consider this carefully before deciding not to include one on your website.

Showcase

QN5 Blog14
QN5 includes an area in the sidebar to show both recent posts and posts with the most comments.

Screenshot15

Screenshot16

WellMedicated17
WellMedicated includes a small section in its sidebar for most popular and most recent posts.

Screenshot18

Screenshot19

The Official Squarespace Blog20
The Squarespace blog displays its archive by month, right alongside the category archive in the sidebar.

Screenshot21

Screenshot22

Inspect Element23
Inspect Element sets its “Most Popular Posts” section apart with a background texture.

Screenshot24

Screenshot25

Burciaga26
The archive here is kept simple: just a list of links by date.

Screenshot27

Screenshot28

Learning jQuery29
In addition to an “Archives” link in the header, Learning jQuery includes a brief list of popular posts at the top of the sidebar.

Screenshot30

Screenshot31

BHoff32
BHoff’s archive is located in the sidebar, organized by date and shown alongside the category list.

Screenshot33

Screenshot34

jord&chan35
The archive here is in the footer, organized as a simple chart by month and year. Months with no entries are shown in lighter type than those with entries.

Screenshot36

Screenshot37

Cut & Taste38
Cut & Taste puts its archive on a separate page, with a link in the header. On the archive page, articles are organized by date.

Screenshot39

Screenshot40

Web Is Love41
Web Is Love has a brief list of its most popular articles in the sidebar. Other archived posts can be accessed through the categories in the header.

Screenshot42

Screenshot43

Twirk Ethic44
Twirk Ethic organizes its archive by category and displays it in an AJAX slider, linked from the main navigation. One of the most elegant solutions in this showcase.

Screenshot45

Screenshot46

Web Design Ledger47
Web Design Ledger has an extensive list of recent posts in the sidebar, accompanied by thumbnails.

Screenshot48

Screenshot49

ThinkVitamin50
ThinkVitamin puts lists of popular and recent posts in its sidebar.

Screenshot51

Screenshot52

Obox Design53
Obox includes a brief list of recent posts at the top of its sidebar, with icons.

Screenshot54

Screenshot55

Jason Santa Maria56
Jason Santa Maria devotes a page to his archive, with a list of recent posts as well as lists broken up by category, date and tag.

Screenshot57

Screenshot58

Jaredigital Weblogue59
A page is devoted to this archive, linked from the sidebar on the main blog page. The archive page itself is kept simple, with articles organized by date.

Screenshot60

Screenshot61

Cynosura62
The archive here also has its own page (linked from the header) and is organized by category.

Screenshot63

Screenshot64

Maxvoltar65
Maxvoltar’s archive is linked from the sidebar and is presented in a well-organized table on its own page.

Screenshot66

Screenshot67

Rustin Jessen68
Rustin Jessen’s archive is given its own page and is organized by tag, type and date.

Screenshot69

Screenshot70

City Cyclops Comics71
City Cyclops Comics put both its comics archive and its blog archive on a single page, with the blog archive organized by date and positioned in the sidebar. The comics archive is given much more space and detail.

Screenshot72

Screenshot73

The FontFeed74
The FontFeed offers a simple drop-down menu, among other options (“Search” and “Subscribe”), to browse its archives by month. Simple but effective.

Screenshot75

Screenshot76

Spyre Studios77
Spyre Studios devotes a page to its archives and includes simple date-based links in the sidebar.

Screenshot78

Screenshot79

Josdigital80
Another website that devotes a page to its archive, this time with thumbnails for the main posts instead of text, as well as some featured posts with text excerpts below.

Screenshot81

Screenshot82

Podlob83
It makes sense for a photoblog to have a more visual archive, and this calendar with thumbnails works brilliantly. This kind of set-up is obviously best suited to blogs that are updated daily (or close to it).

Screenshot84

Screenshot85

Epaper Central86
Another website with a simple sidebar-based list of recent posts.

Screenshot87

Screenshot88

Thomas Finley89
Thomas Finley dedicates a full page to his archive, with an option for the latest posts as well as links by month.

Screenshot90

Screenshot91

Nonesuch Records92
Nonesuch Records lets you browse its archive by date, category and artist, all in easy-to-use drop-down menus.

Screenshot93

Screenshot94

(al)

Footnotes

  1. 1 http://neography.com/journal/
  2. 2 http://neography.com/journal
  3. 3 http://astheria.com/archives
  4. 4 http://astheria.com/archives
  5. 5 http://thebolditalic.com/stories
  6. 6 http://colly.com/archives/
  7. 7 http://www.colly.com
  8. 8 http://thestraymuse.com/articles/archive
  9. 9 http://veerle.duoh.com
  10. 10 http://veerle.duoh.com
  11. 11 http://visitmix.com/writings/
  12. 12 http://visitmix.com/writings/
  13. 13 http://visitmix.com/writings/
  14. 14 http://qn5.com/blog
  15. 15 http://qn5.com/blog
  16. 16 http://qn5.com/blog
  17. 17 http://wellmedicated.com/
  18. 18 http://wellmedicated.com/
  19. 19 http://wellmedicated.com/
  20. 20 http://blog.squarespace.com/
  21. 21 http://blog.squarespace.com/
  22. 22 http://blog.squarespace.com/
  23. 23 http://inspectelement.com/
  24. 24 http://inspectelement.com/
  25. 25 http://inspectelement.com/
  26. 26 http://ismaelburciaga.com/articles/
  27. 27 http://ismaelburciaga.com/articles/
  28. 28 http://ismaelburciaga.com/articles/
  29. 29 http://www.learningjquery.com/
  30. 30 http://www.learningjquery.com/
  31. 31 http://www.learningjquery.com/
  32. 32 http://www.behoff.com/
  33. 33 http://www.behoff.com/
  34. 34 http://www.behoff.com/
  35. 35 http://www.jordandchan.com/
  36. 36 http://www.jordandchan.com/
  37. 37 http://www.jordandchan.com/
  38. 38 http://cutandtaste.com/
  39. 39 http://cutandtaste.com/
  40. 40 http://cutandtaste.com/blog/
  41. 41 http://webislove.com/
  42. 42 http://webislove.com/
  43. 43 http://webislove.com/
  44. 44 http://www.twirkethic.com/
  45. 45 http://www.twirkethic.com/
  46. 46 http://www.twirkethic.com/
  47. 47 http://webdesignledger.com/
  48. 48 http://webdesignledger.com/
  49. 49 http://webdesignledger.com/
  50. 50 http://carsonified.com/blog/
  51. 51 http://carsonified.com/blog/
  52. 52 http://carsonified.com/blog/
  53. 53 http://obox-design.com/blog.cfm
  54. 54 http://obox-design.com/blog.cfm
  55. 55 http://obox-design.com/blog.cfm
  56. 56 http://jasonsantamaria.com/
  57. 57 http://jasonsantamaria.com/
  58. 58 http://jasonsantamaria.com/articles/
  59. 59 http://www.jaredigital.com/weblogue
  60. 60 http://www.jaredigital.com/weblogue
  61. 61 http://www.jaredigital.com/archive/
  62. 62 http://weblog.cynosura.eu/
  63. 63 http://weblog.cynosura.eu/
  64. 64 http://weblog.cynosura.eu/archive.aspx
  65. 65 http://www.maxvoltar.com/
  66. 66 http://www.maxvoltar.com/
  67. 67 http://maxvoltar.com/archive/
  68. 68 http://rustinjessen.com/
  69. 69 http://rustinjessen.com/
  70. 70 http://rustinjessen.com/weblog
  71. 71 http://www.citycyclops.com/
  72. 72 http://www.citycyclops.com/
  73. 73 http://www.citycyclops.com/archives.php
  74. 74 http://fontfeed.com/
  75. 75 http://fontfeed.com/
  76. 76 http://fontfeed.com/
  77. 77 http://spyrestudios.com/
  78. 78 http://spyrestudios.com/
  79. 79 http://spyrestudios.com/archives/
  80. 80 http://josdigital.com/blog/
  81. 81 http://josdigital.com/blog/
  82. 82 http://josdigital.com/blog/archives/
  83. 83 http://podlob.com/
  84. 84 http://podlob.com/
  85. 85 http://podlob.com/calendar/2010-04/
  86. 86 http://www.epapercentral.com/
  87. 87 http://www.epapercentral.com/
  88. 88 http://www.epapercentral.com/
  89. 89 http://www.tff4.com/
  90. 90 http://www.tff4.com/
  91. 91 http://www.tff4.com/archives.php
  92. 92 http://www.nonesuch.com/journal
  93. 93 http://www.nonesuch.com/journal
  94. 94 http://www.nonesuch.com/journal

↑ Back to topShare on Twitter

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of The Smashing Idea Book: From Inspiration to Application.

Advertising
  1. 1

    albyantoniazzi

    May 24, 2010 1:41 am

    Cool post, you forgot Tumblr archive page!

    2
  2. 2

    nice article.

    1
  3. 3

    Thanks for this post. I recently wrote an article about archives with others examples http://www.tutoweb.be/blog/archives-blog/ (in french).

    0
  4. 4

    Very nice, thank you

    0
  5. 5

    Cool, I was looking for something like this since I’ve been banging my head against the wall trying to come up with a decent archive page for one of my projects. :)

    0
  6. 6

    Sergey Kuznetsov

    May 24, 2010 3:21 am

    The cool, simple and very informative archives feature you can find on this website: railstips.org/

    0
  7. 7

    Great….

    -1
  8. 8

    Eko Setiawan-dynamicwp.net

    May 24, 2010 4:29 am

    Great, give me some inspirations…
    Thanks.

    1
  9. 9

    awesome!

    0
  10. 10

    Excellent article. Once I populate my blog with a few more articles, I need design an archive section for my website as well!

    0
  11. 11

    Could there be anything less useful than archives listed by date?

    0
    • 12

      Exactly this, archives organized by date are useless. The date something was written is only important to the author. Chances are the reader didn’t find the content immediately so their only guidepost is when they first read it, not when it was posted. Little archive calendar widgets need to die.

      0
    • 13

      I know 1 thing that’s more useless. A header thats linked to the same page as you are reading. It makes me curious and i just got to click on it. The joy of seeing the entire page loading again it makes me so cheerful.

      0
    • 14

      Couldn’t agree more. I’ve been to some sites where Archive by Date was the only navigation, and I just left. Like I am going to click 8 different years to maybe find something of interest? I bet if these sites looked at their analytics, they’d find out that a minuscle to non-existent percent of visitors browse by Calendar/Date

      0
  12. 15

    Very nice. In my opinion, the appealing designs are the most minimal in approach. Clean intuitive and big readable fonts are key. well done.

    0
  13. 16

    Excelent post, in my website goldenbierd.mx i´ll be posting some like this

    0
  14. 17

    Very Nice……. Thanks for sharing.

    0
  15. 18

    great post.. thanks for sharing..

    0
  16. 19

    Great article. I’ll definitely be referencing this for future projects

    0
  17. 20

    Thanks for including Cut&Taste and QN5!

    0
  18. 21

    Nice footer on this page ;)

    0
  19. 22

    Nice and interesting article about archive-pages. Very thanks for so much visual examples and a clear definition about – what is an archive.

    0
  20. 23

    Thanks for sharing good showcases.

    0
  21. 24

    Too many examples, not nearly enough analysis, and the layout makes it hard to see what is a thumbnail and what is zoomed in.

    0
  22. 25

    Muito bom.
    Uma das melhores listas que já vi aqui no Smashing Magazine.
    É inspirador!

    0
  23. 26

    Nice Article

    0
  24. 27

    Great Article……

    0
  25. 28

    great article…
    check this one..awesome!!

    http://bit.ly/thedesigncubicle

    0
  26. 29

    thanks for sharing-
    nice article!

    0
  27. 30

    Another top quality article!

    0
  28. 31

    I’ve just been trying to customize the archive page in my tumblr blog theme, Scaffold, and I am struck by how really kind of ugly the design/css is of the archive page for that theme. It doesn’t look anything like the main pages, in terms of sharing typography or other elements. Suddenly introduces gradient chrome look on buttons and stuff, which doesn’t match the rest of the theme. Not to pick on this particular theme, but it did make me start to wonder about other WP or tumblr themes’ Archive page designs. I’ll be working more on mine, http://www.designtank.tumblr.com, including seeing if I can use the API to order by tag instead of date–but at least with Scaffold, it does show thumbs of every post in a given month, so that’s not totally bad.

    0

↑ Back to top