destroytoday.com

Article pagination

Now that I’ve reached the point with the blog where I’ve started linking specific articles on Twitter, I realized that each article has become a dead end to anyone landing on it. Once they reach the end of the article, there’s nothing else—not even an obligatory “Made with ❤️ in Brooklyn”. I imagine (and hope) there are folks who stumble upon a single post, then want to read another. Up until now, they would need to go back to the blog and find the next article, which is even more difficult if it’s not on the front page, but that’s another story.

To correct this, I added pagination on the individual article route in the form of next and previous links. At first, I had a single “Continue reading” link to the previous (or older) article, but then I had a chicken or the egg situation—do people read older articles to newer or newer to older? This journal-like format makes me think older to newer, but there’s a good chance someone discovered the most recent article and simply wanted to read more—newer to older.

Before polling the audience, I decided to keep it simple, and cover both directions, by linking to both the next article as well as the previous article. For the markup itself, I originally had “Next” and “Previous”, but with a side-by-side layout, the extra four characters of “Previous” irked me, so I changed it to “Prev”. Then, I realized I could use the ever-handy-but-rarely-used <abbr> tag to still include the full word.

I was almost ready to hit deploy when I realized that using a simple conditional on the “Next” article would make it go away if you’re viewing the most recent article. I started to center the text on the “Previous” text to make the layout work, but then I stopped myself. For instances like this, I think it’s better not to hide something when it doesn’t exist, but rather explain why it’s not there. I knew I couldn’t have a link to nothing, so I replaced the would-be next article with italicized text that says, “No newer article”. Now, if someone keeps clicking on the next or previous article, they don’t hit another empty dead end—they can easily see that there’s no more content, like they’re all caught up.