Pagination – Examples and good practices

Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it is for users to follow your arguments and get the message you are trying to deliver. On the Web this can be done in a variety of ways.In body copy headlines and enumerations are usually used to present the information as logically separated data chunks. An alternative solution is pagination, a mechanism which provides users with additional navigation options for browsing through single parts of the given article. Parts of the article are usually referred to by numbers, hints, arrows as well as “previous” and “next”-buttons.

Search engines almost always use pagination; newspapers tend to make use of it for navigation through the parts of rather large articles. And there are situations when pagination is also necessary for weblogs. Additional navigation can simplify the access to some site pages — e.g. make it easier for users to browse through the archives of the site.

In most cases pagination is better than traditional “previous – next” navigation as it offers visitors a more quick and convenient navigation through the site. It’s not a must, but a useful nice-to-have-feature.

The above article on Smashing Magazine shows that in my working example there are enough points for improvement:

example

for example:

example

example 2

Advertisements

2 thoughts on “Pagination – Examples and good practices

  1. Stephan H. Wissel 2007-November-28 / 3:59 pm

    Did you base your work on Bob Obringer’s Ultimate View Navigator? If I recall correctly the “current” page had its own class, so CSS could fix it. Bob’s page seems to be gone, so if u want the sample I can dig it out for you.
    🙂 stw

  2. quintessens 2007-December-11 / 9:43 am

    I believe the class you are referring to is called class=”navtablecur”….

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s