Related Slider broken on production

[skleinfeldt]

Only shows one tile, some text, no arrows. For example https://jazkarta.com/projects/north-cascades-institute-mobile-refresh

[alecpm]

This should be fixed.

[skleinfeldt]

Here's the design:

Here's how it used to look:

Here's how it looks now on Firefox - on Safari the slider is black and does not have a white background and it is harder to "grab" with the cursor:

To fix: Titles should not show. "Similar Projects" heading should be left justified and there should be more vertical space between the heading and the images. Images should be bigger. There should not be an animation on mouseover where the image gets bigger. On Firefox the scrollbar should look like Safari. On both the scrollbar should be a little bigger so it is easier to grab. I'm OK giving up the black background under Similar Projects (that was never implemented.)

Bummer the scrollbar is more accessible than the arrows and that it is the new default implementation. For sighted people it is not nearly so obvious as arrows, and I don't think it looks nearly as nice. Please let me know how much effort it would be to re-implement the arrows. Depending on the answer I may make another ticket to do that later.

[alecpm]

The old scrollable used jQueryTools slider which isn't readily available in Plone anymore and is a bit outdated in terms of implementation and UX. If we want to use another JS slider implementation we'll have to research and pick one and implement it in the add-on, which will take some time.

Most of the other changes you request can be done fairly quickly (they are just css changes, and probably just require changing a couple of selectors). Though the button based scroller pattern is a bit more obvious than a standard HTML scroller (I think there are ways to work around that with styling), it's less usable and friendly on touch devices (and IMO on devices with touchpads, which together make up most web browsing these days) than a simple horizontal scroller.

Most JS sliders don't allow for multi-item sliding, like the jqTools one did, without having to use funny grouping markup to bundle the elements into "pages" (which makes responsiveness difficult). There's a pat-carousel in patternslib that we could try out,, but it's likely to have the above limitation and creates another add-on dependency. We could try to make our own simple JS button implementation that just scrolls the scroller by one item width. That would retain usability on touch devices, while making the interaction pattern more obvious for mouse users, but it's not trivial.

Here's some nice info on horizontal scroll UX. It's mainly oriented towards touch devices, but I think we can incorporate some of these techniques into the CSS to make it a bit friendlier.

[skleinfeldt]

I will open another ticket to address the slider/scrolling stuff, since that will take more effort. The only things that remain to be done on this ticket are the styling tweaks I mentioned. ("To fix:" paragraph in #143 (comment).)

Just curious since the link you provided didn't talk about accessibility: will a screenreader read all the material in the scrollable list (including things that a sighted reader wouldn't see w/o scrolling)? If that is the case (and true with JS as well as CSS solutions) then accessibility for the visually impaired seems like a non-issue.

All this makes me feel that I should minimize the use of slider behavior on the homepage. But we already have the related slider, which is a cool idea and it does add an attractive visual element to pages, especially as the design was originally conceived.

[skleinfeldt]

@alecpm could you please make the additional styling fixes on the Related Slider as the top priority jaz.com work this week? (See images above for visual aids.)

• Titles should not show
• "Similar Projects" heading should be left justified and there should be more vertical space between the heading and the images
• Images should be bigger
• There should not be an animation on image mouseover
• On Firefox the scrollbar should look like Safari, but the scrollbar should be a little bigger so it is easier to grab
• If possible the background under "Similar Projects" heading should be black (see design - that was never implemented before but would be nice)

[alecpm]

I've made the above fixes to staging and will push them to production shortly. Unfortunately, there's little to no control over the scrollbar appearance (which is mostly determined by the OS rather than the browser or CSS), that's especially true on Firefox. It's also not possible to extend a black background over the full width of the browser for just the header element, because the header is contained within the smaller slider container.

[skleinfeldt]

Much better, and no big deal about the black background under Similar Projects.

Too bad about lack of control over the scrollbar because it looks bad (especially on FF) and it's almost impossible to use on desktop Safari. That raises the priority of #156, but it's still on hold for now.

[alecpm]

One thing I want to note here, removing the animation on hover/active state is an accessibility regression, since there's no longer any indication of link focus/hover.

I think we can add some JS enabled buttons scroll buttons for simplified desktop use. In the end, Firefox desktop on OS X (which is where the issue is) accounts for only a fraction of one percent of web usage, and personally, I don't think it looks all that bad there.

[skleinfeldt]

I don't think I'm understanding your point about the accessibility regression - the hover animation is a visual indicator, just like the cursor changing to a pointer on mouse over is a visual indicator. How is one better than the other for a person who can't see?

I see your point about FF - both being a small number of users and not looking so horrible. The usability on Safari desktop is more of an issue. However I don't think this is worth doing anything further on, I'd rather put future efforts into #156.

[alecpm]

It's more about a person who can't use a mouse vs a person who can't see (so more about the active/focus state than the hover state). In general, I don't think a cursor change is considered a sufficient visual indicator though. My suggestion of adding some JS buttons essentially would address #156, so we can discuss it there.

[skleinfeldt]

Got it, thanks. Made a ticket, but low priority for now.