Optimizing the pagination of a tumblelog

I have always been unnerved about links that lead me to the first page of a tumblelog where i dont find the item i originally foung interesting and wanted to know more about. With the rise of reblogging and tumblr-like blogs it has become more click-intensive to reach the origin of a really great image or other mind-blowing posting. Or even worse with the “great” introduction of infinite scrolling you would need to scroll for like forever to reach a sought for image.

When we started our own tumblelog “Inspirationade” at nexum we thought about a more reliable way to supply our users with links that stay permanently although we have a dynamic ever-changing website.

Here is how:
Instead of having the first “page” holding the newest items, we reversed that – just like you would write a book. The first page would be the oldest. But as we tried this we noticed that the newest page would only contain very few elements once we have reached our page limit of 25.

So we had to think of a trick as to make sure our startpage is not totally empty.

For that we combined the two pages that are newest. As long as the newest page doesn’t at least contain 15 items, there is no Page 18 for example thus offering only the “NEW” Page and 17 others to our user.

But once we hit 15 elements on our startpage, page 18 starts to exist letting us offer the “NEW” page and 18 others.

In order to make the elements on the “NEW” Page “savable” with a permalink although a page number does not exist and the “NEW” page constantly changes, we made a simple logic that would allow permalinks without page numbers: As hyperlink the page offers a listing-like syntax: inspirationade.de/?from=475&to=511

In this example we are listing 25+11 items on the “NEW” page. We need only more 4 items to create a new page.

Have a look for yourself:

Inspirationade is filled with Gimmebar

6. Juni 2013, Simon Theis
Hinterlasse eine Antwort »

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>