What content areas should be designed for?

Question

Design

How to understand under what permissions to design a site? How many columns should there be, and what width, including indents and indents for the content part, You probably also need to follow the requirements of Bootsrap. Members come with displays of such authorizations (for the year):
360x640 visitors 12463
1920x1080 visitors 11419 1366x768
visitors 8371
360h780 visitors 5688
360h720 visitors 5389
375h667 visitors 4046
393h851 visitors 3762
360h760 visitors 3218
1024x600 visitors 3036
1536h864 visitors 2755
412h892 visitors 2659
1280x1024 visitors 2454
1600x900 visitors in 2334
414х896 visitors 2202
412х846 visitors 1709
360x740 visitors 1690
375x812 visitors 1680
320x568 visitors 1580
1440x900 visitors 1387

Answer 1

Please tell the noob how to understand under what permissions to design the site.

Take the same Bootstrap, TailwindCSS and take the same permissions for media queries, you won't regret it.
Someone suggests starting the layout for mobile phones, and then expanding to the desktop. Someone is the opposite. Here as you need and depending on what kind of project.

How many columns should there be, and what width, including padding and padding for a particular part.

It should be purely individual. It all depends on what kind of design you want to have.

Probably also need to comply with the requirements of Bootsrap

Didn't know Bootstrap had any requirements...

Answer 2

xs = extra small <576px. Max container width None (auto)
sm = Small ≥576px. Max container width 540px.
md = Medium ≥768px. Max container width 720px.
lg = Large ≥992px. Max container width 960px.
xl = Extra large ≥1200px. Max container width 1140px.
Moreover, on the bootstrap site itself, there are no such
XS media queries - I would not draw at all. For sm, it is more convenient to use a grid of 4 columns.
In all cases, the standard spacing between cells is 30px. From the edges to 15.
Personally, although I use bootstrap, I never use a fixed container width. Only the maximum for the desktop, in all other cases, no width limit

Answer 3

I will outline a few theses that I am sure of and, I hope, some of this will be useful to you
1. The content part of 1000 - 1200 pixels is convenient for reading text on large monitors. If you stretch a text block, for example, by 1600px or more, it will simply be inconvenient to read.
2. If your content and design elements are limited to 1200 pixels, then in principle it doesn’t matter in what size you draw the layout / with what resolution the user will view the site 1366px / 1440px / 1600px / 1920px. Everywhere there will be one design, only the size of the fields will differ. (For layouts choose any width > 1300px)
3. The number of layouts a designer has to provide depends on many factors. In some cases, only a desktop is enough, a normal layout designer will add adaptability himself or will use the same bootstrap. In others, the designer can draw an additional layout for the mobile version, for example, to show how the size of fonts, indents, and the position of interface elements will change. If the design is not square-nested and contains complex elements consisting of different blocks, then it is worth drawing several states.
4. In principle, for the mobile version it would be nice to draw 2 options, for large and small screens. The minimum site size for a mobile phone is 320px, the maximum is close to 900px (the long side of the 11th iPhone).
Small screens, this resolution is from 320px (or less) to 480px/576px/640px. For adaptive layout, take the minimum resolution, for fluid layout, any size from this range. In theory, you, as a designer, can choose how the site should behave in this range. I made a couple of examples, narrow
the browser window to see the behavior of the cards
5. The number of columns and grid parameters in Bootstrap can be changed and set your own values. Yes, and the 4th bootstrap is so flexible that it is easy to typeset elements that do not fall into the grid. Therefore, focus on good composition, logical arrangement of elements, etc.