2

Is there any design pattern to hide content under the toggle / accordion on the mobile and to show it fully on the desktop?

I have a list, that I'm hiding on small resolutions and showing on desktop. Is it a good practice or you should rather avoid it?

enter image description here

4
  • 2
    I believe that is good to hide specific elements on smaller screens. It sometimes depends on the content. "Advantages" maybe is something that you shouldn't hide, since in my eyes seems important. Can we have some context on it? Commented Apr 6, 2017 at 9:51
  • @DimitraMiha modified image a bit. I actually provide a small description for mobile with key things; and those are not advantages but rather what's included in the trip. My assertion is that user on the mobile won't scroll through a long list of included stuff.
    – Runnick
    Commented Apr 7, 2017 at 10:58
  • 1
    That sounds valid. I think that a sum up of the features included is interesting for the user, small or bigger screens. Maybe I would also change the +Learn more => See all the features included or smth similar. Commented Apr 7, 2017 at 11:35
  • Not exactly the same, but a hamburger menu in Material Design should be always open on the desktop, but closed on mobile
    – penalosa
    Commented Apr 7, 2017 at 18:02

1 Answer 1

0

Yes, revealing varying degrees of content based upon the screen size is good practice. Delivering responsive content can be just as important as a responsive layout. A good progressive disclosure strategy aims to appropriately show the content in each form factor that's required for the user to make a click decision. Google Material Design, even if you're not using the component library, has some simple guidance:

"Content on a small screen that only appears after tapping an element may be revealed by default when more space is available."

Source: https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-patterns

Think about your unique usage pattern and what your users need to know when deciding whether/which links to click for further action or detail.

Not the answer you're looking for? Browse other questions tagged or ask your own question.