Devices come in different forms, but we have collected here those for which we most often draw adaptive layouts.

Before adapting the design for different resolutions, it is important to understand the principles of layout and the types of layout adaptation for various devices.

There are 3 types of layout in the modern web:

• Fluid layout: the content on the site is stretched in proportion to the width of the screen (or height, if we are talking, for example, about horizontal scrolling). This type is best used for individual blocks, and not for the entire site.
• Adaptive layout: the basic approach: the site is displayed exactly as it was drawn in the layout. If the screen width is larger than the layout, margins are added or the layout switches to another breakpoint.
• Responsive layout: design elements change depending on the width of the window. In Figma, this can be implemented using the Constraints function.

Adaptive design adjusts to the device on which it is displayed, using several fixed layouts. For example, versions are created for desktop, tablet, and smartphone. There will be one version of the site for all tablets, another for all phones, and a third for desktops, without taking into account differences in screen sizes within each group of devices.

Adaptive design or mobile version? It is necessary to distinguish between the adaptability of the site and the creation of a separate mobile version.

Adaptive layout is an integral part of the site, which allows you to create one resource designed for different types of devices. This approach can be more difficult to implement, as it involves multiple versions of design elements. However, it simplifies administration: for example, changing prices requires making edits in only one place, and they are automatically updated on all versions of the site.

The mobile version, on the contrary, is a separate site, specially optimized for small screens. This allows you to adapt the interface for mobile devices as much as possible, but complicates administration, since changes need to be made on two different sites, which requires additional resources.

A website with a responsive design automatically adapts to changes in the width of the browser window or screen, adjusting the placement of elements depending on the available space.

When you resize the browser window or screen, the content on the responsive site dynamically rebuilds itself to make optimal use of the new space. On mobile devices, this process also happens automatically: the site analyzes the screen size and displays the content in accordance with the available space.

Responsive design ensures a smooth transition between different display options, creating a convenient and logical placement of elements on any device.

Responsive design is simpler: we do not need to draw a million resolutions, since the adaptation occurs automatically. Its development takes less time. However, it provides less control over your design for each screen size.

Adaptive design involves creating a design for use on all screens. Designers usually start its development with an average resolution (1440), and then make adjustments for other screen resolutions.

Adaptive design theoretically allows you to create a more efficient user interface, as it offers individual solutions for each type of screen. For example, on mobile devices, you can enlarge buttons, remove unnecessary elements and add more space, while on the desktop — place large banners and more complex elements. Thus, adaptive design allows you to take into account the situational needs and capabilities of the user, as well as comply with the usual behavior patterns on different devices.

• If you are to work with a layout similar to adaptive, then it is better to use the following scheme: 1920 → 1440 → 1024 → 768 → 375
• If you use an approach similar to fluid layout, then: 1440 → The developer is working on the adaptation of the tablet → 375