Pagination on websites - how to arrange

It would seem that the introduction of pagination is a trifling matter, taking no more than a minute, and that's it. Or it may not exist at all, because, for example, the wordpress theme is equipped with it by default.

Nothing could be further from the truth. Pagination is very easy to "beat off".

Pagination on websites can be considered from three points of view: usability, visual perception and SEO. In this article, only the first two aspects will be considered - the third is left in reserve, since a completely separate and even quite extensive text could be devoted to it.

Let's get down to specifics.

Pagination on websites - 9 tips for using it

1. Highlight the current site.

Let's start with a cliché.

The page the user is on should be highlighted.

This can be done by applying a color directly to a number, or by coloring the background of that number.

This color should be unique for pagination. And all this so that the user does not have the slightest doubt as to why such a color difference is needed.

2. Make links big enough.

I know that for many designers, pagination seems like a necessary evil. Something that, in principle, has no right to look beautiful, but, nevertheless, should be present on the page.

Therefore, they try to completely marginalize its presence, in particular by using a small size for individual elements.

This is a mistake. Why?

The reason is simple: each element must be large enough. Especially if we are considering an interactive element, i.e. one that performs an action when selected.

The situation becomes even more complicated when there are not only many such elements, but also when they are found very close to each other. In this case, it is easy to make a mistake, for example, by pressing the wrong button. This is even more difficult on mobile devices, where it's easier to tap the wrong page with your finger.

In general, make links big enough. Simply put.

3. Use a color scheme that matches the website.

I'm not opening anything, arguing that pagination on websites should match the color of the appearance of individual sites.

If the appearance of such a site is "cut" from scratch, then it is hardly worth worrying about it.

However, many people use some ready-made plugins (in the case of WordPress) or other add-ons that impose a predefined style.

However, in such cases, don't forget to change the style so that it blends in with the rest of your site.

4. Create a sufficiently large spacing between links to individual pages.

This paragraph is some continuation of the thought stated in the second paragraph.

Take a look at the image below:

The individual links seem to be the right size, but the distance between them is still too small.

In such cases, it is very easy to select a different page than intended. Mobile users are particularly susceptible to this, as our finger is a less accurate pointer than a mouse cursor.

Unfortunately, there is no clear answer to the question of how much spacing between elements should be. Rely on your intuition when trying to find the sweet spot.

5. Limit the number of available pages.

Sometimes you can meet "monsters" in various blogs.

While visually the individual "tiles" still look good enough, the whole thing looks bad.

Moreover, imagine this view on mobile devices, where, for example, only 8 pieces will fit in one row. Then the whole pagination will have a truly colossal size, since the six rows of elements will almost merge into each other.

Few readers target a specific, very precise page. If you really want to display all pages at once, it is best to serve them in the form of, for example, some kind of drop-down menu. In any other situation, serving pages to users at a fixed interval, such as every ten pages, will work well.

6. Add links like "next", "previous", "first", "last".

In the previous paragraph, I mentioned that few readers target a specific, very precise page.

Much more often we are interested in the previous or next page, and perhaps the first or last. It is these four functional types of pages among pagination that we use most often.

Question: is it better to use verbal designations, or is it better to limit ourselves to numbers only?

Words, in principle, will always be as intuitive as possible. However, the disadvantage is that they take up significantly more space than numbers.

That's why it's all about getting the pagination right, using only numbers. If individual links are clear and unambiguous for use, then you can safely replace words with them.

7. Polish the so-called slug in URLs. Page .com/blog/page/4/

etc.

I know that many people don't mind the English word "page" inserts that are most often generated by various CMS and add-ons.

However, let's think about this: if it takes literally two minutes to replace a "page" with a "website", maybe it's still worth doing? After all, most often we only have pages in Polish, so using the word "page" in such cases is just careless.

If you are using WordPress, you can put the following code in your functions.php file:

if ( ! function_exists( 'page_strona' ) )

{

register_activation_hook( __FI LE__ , 'flush_rewrite_init ');

register_deactivation_hook( __FILE__ , 'flush_rewrite_init' );

add_action( 'init', 'page_strona' );

function page_strona()

{

global $wp_rewrite;

$wp_rewrite->pagination_base = 'strona';

$wp_rewrite->author_base = 'author';

}

function flush_rewrite_init()

{

add_action( 'init', 'flush_rewrite_rules', 11 );

}

}

Thanks to this, among the links on your site, not only the default WordPress "page" but also the "author" will acquire their Polish equivalents.

8 If you use WordPress, check out the WP-PageNavi plugin.

Staying with the aforementioned CMS, pagination will be completely taken care of by the plugin mentioned in the title of this section, namely WP-PageNavi.

With it, you can easily set labels for all functional pages ("first", "last", "next", "previous" and many others), as well as configure several other very useful options.

You can also use the CSS prepared by the authors, although of course you can stay with your own.

The implementation is to simply insert the appropriate string into your theme template.

9. What about the so-called infinite scroll?

This is the solution you face every day, for example on Facebook.

When you scroll to the very bottom of the news view, you don't have a "next page" button, but the content loads dynamically below it.

For some sites this is incredibly useful as it eliminates the need to manually load page after page. Viewing content becomes simply seamless.

Therefore, consider whether the infinite scroll feature will be useful on your site. If you think so, then contact the person responsible for the technical aspects of your site to implement this solution.

Is pagination required on websites?

The main goal should be the smoothest, fastest and most intuitive user experience of your site content.

If it contains a lot of repetitive content types (like blog posts), then it probably also has pages that bring them together (like a blog home page). This is where the pagination or infinite scrolling mentioned in the ninth point should take place.

I hope that thanks to this blog post, pagination on websites will not be too much of a mystery for you.