Here at Perishable Press, the number of posts listed in my archives is rapidly approaching the 700 mark. While this is good news in general, displaying such a large number of posts in an effective, user-friendly fashion continues to prove challenging. Unfortunately, my current strategy of simply dumping all posts into an unordered list just isn’t working. I think it’s fair to say that archive lists containing more than like 50 or 100 post titles are effectively useless and nothing more than a usability nightmare. With growing numbers of blogs building up massive collections of posts, finding better ways to display vast quantities of archived material becomes increasingly important.

One solution that seems popular involves breaking the archives down into various categories, tags, and time periods. This provides meta-context to each list of titles and usually eliminates the need for any hideously long post listings. This solution works well, especially when the different category lists are displayed adjacently in multiple vertical columns. For example, a blog with three categories would do well to display each category’s archive listings in its own vertical column. Something like this:

Continue Reading

After announcing my intention to redesign Perishable Press, I received some great feedback addressing everything from site architecture and navigation to appearance and usability. As the conversations continue, I want to spend some time thinking about usability, navigation, columns and sidebars. The current minimalist design features a single column layout with no sidebars. Content is located prominently front and center, with all navigational links appearing in either the oversized “footer” area or at the end of each individual post. As several people have pointed out, such navigational strategy (or lack thereof) discourages visitors from digging deeper into the site. Apparently, the pile of links at the bottom of each page — the menu, as I like to call it — requires far too much effort to decipher. I mean, really, just because it all makes perfect sense to me, doesn’t mean that everyone else will “get it” too.

Continue Reading

Recently, a reader named Max encountered some scrolling issues while implementing our absolutely centered layout technique. Of course, by “absolutely centered” we are referring to content that remains positioned dead-center regardless of how the browser is resized. After noticing the scrollbar deficiency, Max kindly dropped a comment to explain the issue:

…the div solution works well, only one problem maybe somebody can help: if you make the browser window smaller then the div is -> the scrollbar doenst fit right und you cant scroll over the whole area…

Apparently, because the horizontal/vertical centering method outlined in our original article employs absolute positioning with negative margins, resizing the browser to be smaller than the centered division results in cropped content that is inaccessible via scrollbar. Although this is the first I have heard about this issue, I went ahead and examined the alternate centering technique via the link generously shared by Max.

Continue Reading

Absolute Centering with CSS & (X)HTML

Designing an absolutely centered layout involves centering a division both horizontally and vertically. When this is done, the centered division (or other element) is centered according to the browser window. To accomplish this, use this (X)HTML:

<div id="wrapper">
 <div id="center">
 </div>
</div>

And employ this CSS (commented with explanations):

Continue Reading