Comments (11)
Please include a URL and more information about what the problem is.
from bmrcportal.
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?
from bmrcportal.
Thanks very much. I'm going to tag this as "design".
from bmrcportal.
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.
from bmrcportal.
Consider #12 along with this issue.
from bmrcportal.
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.
from bmrcportal.
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?
from bmrcportal.
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.
from bmrcportal.
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.
from bmrcportal.
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.
from bmrcportal.
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.
from bmrcportal.
Related Issues (20)
- container inventory: labels displaying on top of other text HOT 4
- Accessibility: clickable logo in header HOT 1
- Accessibility: social icons HOT 5
- Accessibility: search button (magnifier icon) for WEBSITE HOT 1
- Error message for no site search results points to old link HOT 2
- Accessibility: need alt text for iframe HOT 4
- Accessibility: "Skip to" links not visible HOT 5
- Accessibility: two links in same context, different targets HOT 1
- Accessibility: line height too small in footer HOT 1
- Erroneous results in search
- North Park U name showing up in abbreviated form HOT 6
- Subject headings: identical heading with and without white space in dashes HOT 2
- seeing a lot of "Guide to the" in the SERP collection titles HOT 1
- font size seems very small in Edge browser
- Remove periods at end of subject and corpname terms HOT 1
- text is clipped when re-sized
- Accessibility per UC: need a link in the footer
- display of very detailed "extent" from MARCXML conversions is messy
- "Squished" display of multi-line inventory in finding aid view HOT 1
- Add contact info to Archives data page HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bmrcportal.