1

We're displaying a paginated collection of tiles (fixed width and height) within a variable width container. We have an upper limit of showing only 15 tiles per page due to the server resources required to get data for each tile.

example

On certain screen widths, there might be space at the end of the arrangement of tiles, which gives the impression the user has reached the end of the collection.

One option we considered would be to determine the # of items per page based on browser size, (ie responsive pagination), but I forsee two problems:

  1. If you're on a non-first page and change the browser width, items toward the beginning or end of that page might disappear to another page.

  2. There might still be space at the end of a page's collection if the calculated # of items per page isn't divisible by the number of rows.

Any ideas for achieving a better experience in this situation?

1
  • So your problem is with the extra space at the side for some browser widths?
    – Franchesca
    May 15, 2014 at 15:50

2 Answers 2

1

You can have your grid increase the spacing between items so that you always receive a pleasant visual spacing. As for indicating there are additional items, there are several ways for having that affordance displayed.

Some examples. Symbol for additional content present in a passive display

0

Well it seems that you have been considering a lot of options here, perhaps instead of only having the collection of tiles vary in width horizontally you could also have it adjust vertically. This would make it so even if someone were to make the browser extremely narrow or extremely short the collection would be able to fit itself without having to push images to the next page. The spacing is where the real problem comes in because you want it to have that effect if they reach the end of the images to kind of signal that they are at the end. You could take @slyminperator suggestion and have your grid increase the spacing between the items, or you could set fixed spacing and have the images move around the spacing when they are adjusting to the browser, this would make it so no matter what you could count on your spacing always being a constant.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.