Mobile pagination

Patterns Released patterns
1

Hello community

We would like to hear your input on effective pagination for mobile view. There are a few options to consider and as an interim we have applied a fix (pertaining to this bug) so that with extra small screens the list of pages breaks to another line as oppose to trying to squeeze everything onto a single line.

image

While this works fine, we would ideally like some better visual treatment, but without compromising on usability and accessibility.

Thanks all
Mason.

2

Hi

Personally, I would suggest placing the back and next on the bottom line.
That way you balance the UI without altering the implementation.

image

3

I like that suggestion @bwardrop. It keeps the information clear over the 2 lines, and neater too

4

Thanks for this - I like this idea. @SeanElliott what are your thoughts? And how would we manage spacing of the numbers when they do not fully extend the width of the mobile screen?.. evenly space them out?

5

This is interesting, but is there enough hit area to avoid fat fingering the numbers versus the back/next?