Menu that can't be collapsed

[subornaakter40]

Adaptive website layout_non-collapsible menu

Adaptive website layout should solve a very important problem: functional elements should become compact, but remain accessible to the visitor. On a small screen, all elements line up in an list of timeshare owners endless queue (unlike the position on a PC monitor). Therefore, the menu deserves special attention.

First of all, because it is always quite bulky and covers the entire screen, depriving the possibility of free scrolling (the user, touching the screen, will definitely click on one of the menu buttons and get to some page).

Practical experience suggests a solution to this problem: a special icon with help and a menu should appear on the screen of the mobile device.

When hovering, an event is triggered
Often, events are set up on a site that can be triggered when the cursor hovers over it (hints, photos, drop-down menus). But a mobile device works a little differently: it does not have a cursor in the form that we are accustomed to when using a PC or laptop.

Touching a screen element causes an event equal to a mouse click (press). Consequently, actions that should occur after touching cause certain inconveniences. Adaptive website layout should take this nuance into account, or better yet, get rid of such events altogether.

Active elements and font are too small
Adaptive website layout_small font

It is worth remembering that reducing the screen size entails reducing the font size, therefore, text that is easy to read on a PC monitor is almost impossible to make out on a smartphone screen.

It is also worth considering the fact that a tablet or smartphone is usually used “on the go”, which adds certain problems.

Yandex recommends using a 12px font (not smaller) for mobile versions of the site.

This also applies to interactive elements of the site (buttons, links, etc.). It is easier to click the mouse cursor on the monitor than to click a tiny button with your finger.

Therefore, when trying to create a compact site, do not do it by reducing the font and active elements. Otherwise, the effect will be the opposite of what you expected: due to the inconvenience of using the resource, interest in it will begin to decrease.

Let's sum it up:

Adaptive website layout is not limited to arranging content in one vertical column. It is important to take into account the differences in usability of PC monitors and mobile devices.

It is necessary to clearly plan the content structure and make the necessary changes.

It is not advisable to use scrolling blocks, menus that cannot be collapsed, elements that are triggered by touch, small fonts and small active elements on mobile devices.