Ino Detelić

Designing the perfect pagination for mobile web

Pagination on mobile is usually done with infinite scrolling or a ‘load more’ button when you reach the bottom, but when you’re required to use a pagination element, how do you do it?

A good pagination should provide:

  • previous and next page links
  • the total number of pages
  • first and last page links
  • current page number
  • a quick way to get to an arbitrary page number

 

The problem here is you want big buttons that are easy to click, but they take space and you don’t want to lose any functionality, so the common  ‘«first «prev 12 13 14 15 of 28 16 17 18 next» last»’ pagination is too bulky for use in a mobile touch screen.

To solve this problem, I merged some points shown above to save space without compromise in functionality. Starting with the common

«first «prev 12 13 14 15 of 28 16 17 18 next» last»

the ‘«first and last» page links’ can be merged with the total number of pages simply by transforming them into a numerical link. That leads us to

«prev 1 … 12 13 14 15 16 17 18 … 28 next»

which is shorter with no loss of information or functionality.

Now the ’12 13 14 15 16 17 18′ links give us the current page number and some control to get to nearby pages. Notice how 14 and 16 function the same as «prev and next» links, repetition which is fine on desktop with lots of space, but for mobile we have to cut redundancies like these.

In order to save space, we can replace the whole ’12 13 14 15 16 17 18′ portion with either a dropdown <select> tag or a numerical <input> field which default to the current page number. Both work well even if you have a large number of pages because the iPhone and android browsers have good dropdown selectors.

note: If you’re using the input field, don’t forget to specify type as number so the browser shows the numerical keyboard.

This is the pagination I ended up with:

Large buttons, prev and next links, visual representation of current page and total number of pages, first and last page links and the possibility to quickly go to an arbitrary page number, all in 5 buttons and an input field. I could have also done it with a dropdown <select>.

Also notice how the previous page and first page links are greyed out and they do nothing when you click on them, and how the input field and go button are bundled together.

Posted on December 3rd, 2011 under random