What screen resolutions should I design websites for in 2021?

Question

User interface

Despite the fact that I have been working in the field of web design for a long time, I still do not have a clear understanding of what screen sizes to prepare layouts for. I try to implement as much automation as possible in my workflow so that any new project can be started in "2 clicks", figuratively speaking. Design systems are our everything, but the very initial stage - the definition of artboards and grids - is what slows down my process and is not completely clear to me.
I understand that my question is similar to hundreds of others that are discussed every year both here and on other services. But I want to hear opinions that are relevant for 2021.
I would be grateful if you share your thoughts not only on the size of the screens for which you need to prepare the design, but also on the grid settings for each such size. It would be great to hear informed opinions on why a particular size/grid was chosen.

Answer 1

1. It is easier to complicate the simple than to simplify the complex.
2. Mobile first. PS this does not mean to deprive the desktop.
3. Stop thinking in grids and precise dimensions: make useful blocks first. Why do designers have a problem with adaptives? Yes, because they cover the blocks with feeble pieces of "designer" shitty solutions. When all this filthy tinsel is gone, then the issue with the grids disappears. A good site can be at least 500px wide on desktop, as long as there is a useful action.
I start from 290px, but even after laying out, I see what happens if the block is compressed further. More and more I come to the realization that you need to learn to think in relative units. On desktop, I use a width of 700 to 1200px for content, but I gradually move away from exact units towards relative ones.
There is a separate category of down designers who set the canvas width to 1920 in the editor and think that now this is a design for wide screens. (although the content area remains the same). https://css-live.ru/ here is an example of a site with a responsive design.
Another category complicates the desktop versions in every possible way so that it does not look simple. It is nonsense. Lack of understanding of site ranking factors, user behavior, and so on.
4. More responsive, more relative units, more grid css.
5. Decorations - last.
6. Design immediately in the browser. Yes, design the site right in the browser, use conditional elements, which can then be drawn into a graph. editor. To design in the browser, respectively, study layout + animation technologies on the web. + availability + performance.
7. Filter trends.
In my opinion, the problem of grids is a matter of moronic design and not understanding how it will be displayed in the browser. I don't see any advantage to start with.

Answer 2

Under the same as in 2020 (320/360 - 1920).

Answer 3

there was no clear understanding of what screen sizes to prepare layouts for.

And how are you doing? Random number generator every time?
Still haven't taken any grid as a basis for work and couldn't come up with 3 mobile/desktop/tablet resolutions?
https://960.gs/
https://getbootstrap.com/docs/5.0/layout/breakpoints/
https://bulma.io/documentation/overview/responsive...
https://get.foundation/sites/ docs/media-queries.ht...
https://materializecss.com/grid.html#grid-responsive

informed opinions

can be justified only for a specific project by the collected statistics.
To select "from the bulldozer" statistics on the Internet is general https://gs.statcounter.com/screen-resolution-stats