How to determine the number and width of layouts?

Question

Windows Forms

Hello. I have experience in designing banners, logos, printing. There was a suggestion to create a psd site layout. I do not want to refuse, I want to master a new area.
After collecting information, it was concluded that in order for the site to be adequately displayed on all devices, you need to create layouts according to the bootstrap grid - the width of the containers is 1170, 970, 750, 480, 320, the width of the layouts is not important. There were several questions, please tell me:
1) Is it necessary to create all 5 layouts? I read that the number of layouts depends on the breakpoints, let's say I create the desktop version first, how to determine the breakpoints if I only have a psd file? I suspect that 3 desktop, tablet and mobile layouts are enough. What width to choose containers for tablet and mobile?
2) Since I am a beginner, I need layouts that can be taken as an ideal and know for sure that if you do the same, it will turn out normal and someone will be able to make it up later. So I went to themeforest. I see that most layouts are 1920 wide, 1800 px wide and have a bootstrap container of 1170px. Layouts with a width of 1920 look fine even on the retina. But with such a width, rather large margins remain (about 400px), most likely this will not suit the customer, as I understand it, I cannot increase the width of the container.
It turns out that it remains only to reduce the width of the layout (fields), but then I will lose in resolution. How will a website rendered from a 1300px wide layout look on high resolution monitors? Or is it ok to use smart objects for all graphic elements?
I would be grateful for any information on these matters.

Answer 1

TreeView CheckBoxes

Answer 2

The number of layouts depends on what you draw in the blocks and when (at what width) you rebuild them.
Usually 2 or 3 layouts are enough. You can also 1.
In addition to the layout itself, you can attach a text file with comments if the behavior is not obvious in transitional places.
At the same time, you yourself should understand well how the layout will look on huge monitors and on tiny smartphones and in all intermediate states.
In some cases, you can not rebuild the blocks, but only vary the font size or indentation.
You can.
Customers are different.
Bootstrap mesh sizes are quite common and viable.
But on the bootstrap, the light did not converge like a wedge, and on the grid, too.
The most reasonable thing, in my opinion, is to visit guests and watch selected sites on different devices.
Then do the same with sites made up according to your layouts.
There is an easier option - an emulator in chrome, but I would vote for real devices.

Answer 3

By default, 3 responsive layouts are enough - 480, 768, 1024.
I advise you to simply study the adaptive behavior of sites in the browser, many questions will disappear by themselves. For example: https://www.smashingmagazine.com/tag/responsive-we... Just change the screen width and carefully watch the behavior of the blocks.