How can a designer make responsive websites?

Question

Design

-How to make adaptive design directly to the designer?
How does the site adjust to the screen resolution?
-Do I need to design for several screen resolutions or is it the work of a layout designer/programmer?
According to adaptive design, search engines give out mainly how it is done in the code or in the layout.

Answer 1

Ideally, this is done:
1 design that can stretch to any width. Enabled if width > 1920px.
1 design for wide screens 1024 <= x <= 1920, where x is the width of the screen.
1 design for small screens 512 <= x < 1024 ( often omitted )
1 for tablets
1 for phones
Usually, these are the same designs, only slightly tweaked. But everyone has their own developments and ideas for implementing adaptive design.

Answer 2

There are as many layouts as needed, depending on each specific design (designer) and technical specifications.
Each additional +/- resolution layout is created when the UI elements, grid, etc. goes beyond simple "stretching" and thus the behavior of the elements on the page cannot be "predicted" at a milestone. Therefore, most likely the front-end developer will create simple rules according to which your design will simply stretch in the desired range.
Therefore, for example, if a future site should "look good" in the resolution range from 320 to 1920px and there are no strict requirements for its adaptability (note below 960px we have sensors, and the UI should be appropriate), the designer has the right to decide on what resolution he needs a new layout when a 200x20px button turns into 200x40px or when the additional icons illustrating menu items disappear and only the titles remain.

Answer 3

I think that the nature of a web designer leans more and more towards a front-end specialist every day. Those. website design is often just an interface, which is better not to draw in photoshop, but to use other tools.

Answer 4

1. Learn the dimensions and behavior of the grid that the layout designer uses. For example, what is the width of one column at what display resolution.
   
2. Делаете несколько соответствующих шаблонов в фотошопе, расставив направляющие и настроив сетку в фотошопе.
   
3. Разрабатывате дизайн, придерживаясь размеров сетки.