We do not recommend horizontal scrolling.
This basically amounts to a slider, which are a poor user experience and Yoast thinks sliders should be banned.
We agree.
Mobile
Horizontal scrolling seems to be a good concept for mobile, allowing you to cram in more things into the page, but it fails in a major mobile-first way.
There is already a widely accepted user-first experience for displaying additional items: vertical scrolling. This is how ever site and mobile app behaves, and how your site should behave as well.
DOM nodes
Each item hidden horizontally off-screen still adds DOM nodes to the page, which contribute to the "Avoid an excessive DOM size" pagespeed warning:
Pagespeed
In addition to adding DOM nodes that aren't immediately visible to the user, the browser has to run through your CSS and calculate which items to display and not display.
It has to spend time calculating and rendering these items, even though they're not visible. This contributes to the "Minimize main-thread work" warning in pagespeed insights:
Design principle
In general, anything that isn't important enough to be statically displayed (eg. sliders, carousels), isn't important enough to be on the page at all.
This means that if you have 12 items that you want to cram into a 4-item width, those last 4 items shouldn't even be on the page.
If they are important enough to be on the page, then they should be static on the page and always visible without requiring user interaction.
Accessibility
While a sighted user can simply skip over the 4 elements visible on screen if it's not what they're looking for, an accessible user with a keyword or screen reader has to navigate over each of the 12 items in order to get past it.
Image taking 12 times longer to get through a section of the website that you're not even interested in.
This creates a worse user experience for accessible users.
Leave a Reply