Pagination on websites - how to arrange

It would seem that implementing 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 may be further from the truth. Pagination is very easy to "repulse".

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. Select the current site.

Let's start with clichés.

The page the user is on should be highlighted.

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

This color must 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 your links big enough.

I know pagination seems like a necessary evil to many designers. 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 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 meet 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 large enough. Simply put.

3. Use a color scheme that matches the website.

I don't open anything claiming pagination on the web sites should match the color of the appearance of individual sites.

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

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

However, in such cases, be sure to change the style so that it blends in seamlessly with the rest of your site.

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

This paragraph is some continuation of the thought set forth in the second paragraph .

Look at the image below:

The individual links appear to be the correct size, but the spacing 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 the mouse cursor.

K Unfortunately, there is no clear answer to the question of how large the indent between elements should be. Use your intuition when trying to find the sweet spot.

5. Limit the number of available pages.

Sometimes you can find "monsters" in various blogs.

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

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

A few readers are targeted to 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. the previous or next page, or possibly the first or last. It is these four functional types of pages that we use most often among pagination. or is it better to limit yourself to only numbers?

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

So the whole point is to correctly style pagination 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.

Pagination on websites necessarily creates additional links in the form:

• page.com/blog/page/2/
• page.com/blog/page/3/
• page.com/blog/page/4/
• and etc.

I know a lot of people don't mind English inserts of the word " page", which are most often generated by various CMS and add-ons.

However, let's think about this: if replacing the "page" with the "website" will take literally two minutes, maybe it's still worth doing? After all, most of the time 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:

if ( ! function_exists( 'page_strona' ) )

{

register_activation_hook( __FILE__ , '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 = 'autor';

}

function flush_rewrite_init()

{

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

}

}

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

8 If you are using WordPress, please note attention to the WP-PageNavi plugin.

Staying with the above mentioned 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 you can of course 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 come across 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 is loaded dynamically below it.

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

So think about 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 on websites a prerequisite?

The main goal should be to be as smooth, fast as possible and an intuitive way for users to explore your site's content.

If it contains a lot of repetitive content types (for example, posts in blog), then it probably also has pages that combine them into a single whole (for example, the main page of the blog). This is where the pagination, or infinite scrolling mentioned in point nine, should take place.

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