Redesigning the Blog Index

For the sake of readers' eyes, I've redesigned the blog index. This post explains what changed, and why.

Before the Changes

Here are the problems with the "before" picture.

• Cluttered presentation of notes

  The reader can be told, "This is a note," without nearly as much text as shown at (1). Let's take a lesson from Tufte and not put so much ink on the screen.

  Notes are the foundation on which specialized IndieWeb post types are built, and are so basic they don't even need titles. The note's presentation should get out of the reader's way.

  Furthermore, if there are multiple consecutive notes (not pictured), then, whether they are on the same day or not, the clutter pointed out in (1) makes it hard to tell when the date changes.

• Articles aren't distinguished from poems

  Within articles, I have a "poem" subtype. These are sufficiently different from normal articles that they have their own markup and visual styling.

  "The Man from H.0.P.3." is a poem, while "A Round of Thanks" is an article, but that's not made clear on this page at (2) and (3).

• Articles don't display publication dates

  "The Man from H.0.P.3." was written on June 22nd, but the reader isn't told that; as shown at (2), the reader can only see the last time the was updated (if ever). Articles are the core of my website, so their publication dates should definitely appear. That alone would be enough to demand a change, but the lack of dates also poses this problem: since the blog represents a chronological ordering of site activity, its presentation shouldn't leave the reader guessing at when something was published.

After the Changes

Here is the new and improved blog page:

The new layout only shows a given date once, and below that line are all the items published that day. The amount of text displayed for each note is vastly decreased, and each post's type is displayed. (Since this post, I've also set list-style: none to remove bullets from the list items.)

Adding post types (article/note/poem) to post metadata was easy: that information was already accessible to my static site generator's Python programs, so that they could apply page templates. Changing the code to group posts under their shared publication dates took a bit longer, but led to other backend improvements along the way.

Wrapping Up

All I have left to say is a reminder that today is June 30th. Happy Old Year's Eve!