Curated topics on mobile

[MomoMoses]

Featured topic display is stacked on mobile: makes the image and heading seem to appear twice for no apparent reason

[johnjung]

Please include a URL and more information about what the problem is.

[MomoMoses]

https://bmrcportal-test.lib.uchicago.edu/curated/
Appearance on desktop: LH sidebar has Browse heading at the top, with facets links listed underneath. Below that is the Featured Topic heading, the image for that topic, with a caption indicating the current featured topic (this links to the page you're on), and lastly a link to "View all" curated topics. In the middle content area the display shows the topic heading, an image on the left, and explanatory text to the right of the image, with links below the text to a SERP using that topic, and "Explore all" curated topics.

Appearance on mobile is less satisfactory, and possibly a reason to bounce off the site. :(
At the top is the Browse heading with linked facets underneath. All good there.
Below that section is the "Featured Topic" heading, the topic image, the linked caption, and the link to a SERP using that topic.
Next is the specific topic heading e.g. "Black Nurses", and the same image. Finally you get to the narrative about the topic! Then two links--SERP, Explore all.
The problem is seeing the heading + image then the heading + image again right underneath it with no added content. Is it possible to omit the second appearance of the image when the viewport is determined to be mobile?

[johnjung]

Thanks very much. I'm going to tag this as "design".

[kzadrozny]

Using Bulma helper classes, apply is-hidden-mobile to the img tag for the Featured Topics. This will hide only the image but leave the link to the topic.

[johnjung]

Consider #12 along with this issue.

[kzadrozny]

I'm recommending the image in "Feature topic" is hidden in mobile, rather than what I believe Laurie is requesting which is to hide the second thumbnail, which is in the body of the page. The size of the thumbnail shouldn't be in conflict with whether or not it is visible in mobile as in all non-mobile sizes it will be shown in that size.

[MomoMoses]

OK, so when the user clicks to the content description for the Featured Topic on mobile, they won't see the image at all, is this correct? I don't think that's a problem, as they will have seen it before they clicked on the Home Page, presumably.

Could we/should we add a link to "View image"? if they want to see just the included image/eye candy?

[kzadrozny]

My mobile view technique is to only hide things when it is helpful or useful to the user. Images are one of the best things to hide in order to allow users to get straight to the content. If you hide an image, especially if it is decorative, there is no need to let the mobile user know what is being hidden or to ask them to take an action for something that is not imperative to them completing a task.

[johnjung]

I agree with Kathy's comment above. Laurie, please let me know if that solution is acceptable. If so, I'll hide the sidebar "featured topic" image on mobile.

[MomoMoses]

YES. Let's do this. Thanks for that insight, Kathy about not offering something they don't need!
John, for Issue #12 let's see how this plays out vs. ditching the images altogether right now.

[johnjung]

Excellent- thanks very much, both of you. This is now implemented in ba6af14 and live on the site. I'm closing this issue out, please feel free to re-open if necessary.