Tabs & accordion

01 Tabs on mobile

Tabs don't work well on small screens. Therefore, it is best to turn the tabs into an accordion view with collapsible blocks when the screen is smaller.

Scrolling down the phone screen is not that difficult. It is much harder to open, close, then open and close the accordion tabs again. Although you can actually show, all the blocks unfolded at once.

In general, this is strange when a designer tries to save height space and hide everything possible from the user. The height of a web page is unlimited, and scrolling is an effortless action that quickly helps the user see the content.

02 Expand accordion on desktop

Accordion on large screens looks questionable more often than not. Users are much more comfortable scrolling through the page looking for information than clicking on the small controllers of the Accordion blocks, looking through each panel in sequence — terrible pattern.

So on large screens, it's better to expand the accordion panels and show their content immediately without hiding them. Better yet, add a search or table of contents. Or both together. This is a good solution. It makes no sense to save space in height on big screens.

03 Collapse accordion on mobile

On small screens, both solutions make sense. Content that is immediately shown is always a good thing.

On the other hand, Accordion is suitable as a solution when you want to show the main thing, and it's immediately expanded, but also to show on-demand the secondary things that may be of little importance to the user.

For example, on a product page: its description is important and should be shown immediately in the Accordion expanded panel. Technical specifications and other less relevant information can be hidden in other panels.