Better Pagination Styles With Farcry and Foundation

Let’s face it, pagination is tough. Especially with the need to be flexible across varying display sizes. But today, I’m going to show you how I do it, which I think is pretty great and I think you, and your users, will too.

blog

  • This instruction for FarCry pagination has a prerequisite for the understanding of how to deploy a webskin for FarCry’s pagination. Jump here first for that if needed.
  • Also, I use the front-end CSS/JS framework Foundation. It is similar to Bootstrap, but much much better, in my opinion.
  • Full disclosure, I am a write access level contributor for Foundation. Check out Foundation here
  • And some of my awesome contributions here and here. And, finally, some of the nice things people say about the things I do for Foundation here and here.

The Problem

Typically pagination looks something like this.

pagination-desktop-look

Looks great on a desktop, functions well and centers in the screen nicely, but as the screen collapses to smaller and then mobile you get something like this.

pagination-mobile-look

Responsive design nightmare. Broken and jacked up. And just ‘displaying fewer numbers’ is not really the answer we are looking for. So what do you do?

The Solution

You should create a new UI pattern for mobile users.

screen-shot-2017-02-17-at-10-56-17-am

With a mouse, the pointer is an almost exact extension of the user’s hand, but with touch-screens, single buttons are a difficult click for the user’s finger to pinpoint. Especially with multiple buttons being in such close proximity of one another as in the example above.

A much more elegant user pattern would be to use the phone’s built-in “fast-scrolling dropdown” selector. Take a look at how much cleaner this look is. You still give the user all the functionality they need, just in a more pleasant experience.

pagination-finished-look

 

How do we do it?

Let’s start with displayPagePagination.cfm

The big change from the traditional method is the addition of this

li class="show-for-small-only"

Show-for-small-only is a Foundation visibility class for only showing an item on a small screen. We use this in conjunction with hide-for-small-only on the single number boxes to remove them from view on smaller screens. We simply add in an options dropdown to our loop to display, or hide, or small and large screens. Our CSS is pretty straightforward as well.

Our CSS is pretty straightforward as well.

So as you can see, this new pagination usability pattern will give your users a satisfying experience no matter their device.

Advertisements

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