closed livingstoneonline/livingstoneonline#132

Discussion on hover used in the grid pages.

nigelgbanks

In working on the grid pages it came to my attention we have no reliable to detect if a device supports hovering / touch or not. Currently we're doing this based on resolution of the screen, but that leads to odd edge cases in which the user might be using a large iPad (which has a screen resolution higher than some laptops), currently in this case the text on the grid page is not visible to them.

Also it occurred to me that the users can't see the categories of pages until they individually mouse over each one, which doesn't seem that user friendly as it obstructs useful information for navigating the site.

I suggest we drop the hover functionality and display text at all times, what do you think?

<img width="1007" alt="hover" src="https://cloud.githubusercontent.com/assets/487373/25948286/b3cf8452-364a-11e7-936f-4b7ab3ebff19.png">

awisnicki

I've just emailed the individual (Angela Aliff, you haven't met her) who led site design, so hope to discuss this with her soon. This is only an issue on desktop as, once the site goes to mobile variants, the titles are display as an overlay, which may be a good solution for desktop as well. The one issue is that the subtitles (which are useful) are lost in how it's currently set up.

nigelgbanks

How about something like this?

Large: <img width="1188" alt="screen shot 2017-05-11 at 19 17 01" src="https://cloud.githubusercontent.com/assets/487373/25964970/81059cb2-367e-11e7-959f-d6d57ff9c234.png">

Medium: <img width="976" alt="screen shot 2017-05-11 at 19 18 27" src="https://cloud.githubusercontent.com/assets/487373/25965039/b157d416-367e-11e7-98ba-b7056b059e52.png">

Small: <img width="304" alt="screen shot 2017-05-11 at 19 18 44" src="https://cloud.githubusercontent.com/assets/487373/25965042/b458be46-367e-11e7-85cd-8f3d8ca48890.png">

awisnicki

The issue with this is we lose all the color from the images. The 1/4 overlay option may be the best. I'll be back in touch about this soon.

awisnicki

We've looked into this and would like to stay with the set up as is since it took quite a bit of work to arrive at this. Our designer will research more into this going forward (she actually sent me quite a few things on which she'll be following up), but this is also something we could revisit down the road as part of a more elaborate redesign through another grant, the one we're currently developing and will discuss with you later this week.

Also, our designer and I take your point about the edge cases, but this actually translates to only a small percentage of our users (see screen shot). Only about 6% of our users use tablet and only some percentage of those would be edge cases, maybe 1% or so. So it would be nice to address all scenarios, but in this case it has rather complex implications for the overall integrated design.

In terms of the hovering, would it be possible to alt text to the grid tiles that would have title: subtitle?

screen shot 2017-05-21 at 20 24 11

nigelgbanks

How about if we always show it below and then do a more detailed display when hovered? This way the image isn't covered, and the link text is visible. People really shouldn't have to hover over every image in a page to see what links are available.

grid

In terms of the hovering, would it be possible to alt text to the grid tiles that would have title: subtitle?

No real point to adding alt text when the text is already displayed on hover?

nigelgbanks

Reverted to the old behaviour.

awisnicki

Almost. See screen shot. At this size, the tiles simply get too big. Could you check against prod and use the same sizes as there? screen shot 2017-06-08 at 16 46 02

nigelgbanks

Should be sorted out now (was a bug in Firefox according to the css spec).

awisnicki

You've restored the spacing between tiles (that was another issue that I hadn't gotten around to ticketing yet). But this issue is still persisting. Here's a screen shot of prod at, relatively speaking, the same screen width. Note that the tiles here are three across and smaller, whereas above they're two across and much larger. screen shot 2017-06-13 at 9 10 56

nigelgbanks

Ready for review.

awisnicki

And looks good on this one. I think this takes care of it. Thank you.