Responsive Pagination

Give Webflow's paginated collection lists responsive page sizes, using Finsweet's CMS Load and some custom code.

Making Collection Lists Responsive

For some time we've been using a CSS-based technique to control the number of collection items that appear at various breakpoints e.g. 20 on desktop, 15 on tablet, 5 on mobile-portrait.

It's very useful for basic designs that have < 100 items, and it can be an ideal solution for non-essential views. When you're showing a series of testimonials, or the most recent blog posts... it makes sense to simply truncate list items from that part of your design when the screen size becomes too small.

But this approach does not support many situations;

• It does not support paginated collection lists, so you cannot have more than 100 items in your collection list
• Critical content, like a product catalog, cannot simply be "truncated" in mobile view to hide extra items when space is tight
• It doesn't work with Finsweet CMS Filter

Making Paginated Collection Lists Responsive

To make our paginated collection lists responsive, we've designed a new capability around Finsweet's powerful CMS Load more attribute.

Design Goals

• Make responsive pagination possible, using FS CMS Load as the underlying script-controllable paging mechanism
• Support all 7 Webflow breakpoints with varying item counts at every breakpoint
• Fully and seamlessly support FS CMS Filter as well
• Dynamically adjust the item count as the breakpoint changes
• If necessary, automatically adjust the current page to ensure a page is always being viewed

Demonstration

The implementation we did uses CMS Load plus some custom code to handle the responsive pagination.

It also uses CMS Filter, and dynamic column layout changes across the breakpoints to complete the UX.

https://responsive-pagination.webflow.io

Resources

• Demo - https://responsive-pagination.webflow.io
• Cloneable - https://webflow.com/made-in-webflow/website/responsive-pagination
• Codepen - https://codepen.io/memetican/pen/QWJQeKe/bea1116878a9bb9f41b1a7147e404eb5?editors=1010

Notes

Multiple Responsive Collection Lists On One Page

Is there a way to use this code for multiple paginations on one page?

Currently the code is designed for a page which has only one CMS Load-configured collection list. The code will need some adjustments if you have several, particularly if the responsive configuration ( N items at breakpoint X ) is different for different collection lists.

If you want to make those adjustments, check Finsweet's CMS Load API docs and look to identify and separate the CMS Load instances.

Need help?
Sygnal does custom programming for Webflow designers, contact us if you need some work done.

Old-School Conditional Visibility Hacks

“Why not use multiple lists and make each one conditionally visible by breakpoint?”

The old-school hack for this problem was to have multiple paginated collection lists on your page, and then to hide/show them by breakpoint.

There are a number of substantial downsides to this.

• Significant design admin overhead. Design changes must be made in every list-variant.
• Webflow supports 7 breakpoints. Do you want to trade your one collection list for seven? You're limited to 20 per page.
• Performance. Even with that content invisible, it's loaded into the page, which means you have 7x as much content as you need.
• Performance again. If you're also using CMS Load, they you may well be magnifying that load time by 7x as well.
• No support for Finsweet Filter. If you want a more powerful UX, around a key part of your site such as a product catalog, this approach doesn't work well. You'd need 7 different filter blocks for your 7 different collection lists... it gets messy fast.

Fortunately, there's a better mousetrap.

‍

‍

‍