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