Should I develop multiple layouts for different devices?

Question

Design

Hello!
I have an idea for a startup. We are developing a website. We decided that the layout should be adaptive, i.e. adapt to different devices.
Do I need to develop multiple layouts for this? If yes, how much? Let's say we're going to type on Bootstrap 3, then there should be 4 layout options? Then what size should the minimum layout have?
If this is some kind of control panel, such as an admin panel, is it worth developing using the mobile-first technique? In the future, it is planned to create mobile applications. My opinion is that it is better to move here in the opposite direction, from large screens to small ones, in the direction of decreasing functionality. But I would like to hear what experienced developers advise.

Answer 1

I think it's too early for you to create a responsive site, since you're asking about it. Gain experience in adaptability. After all, an adaptive website is not just a change in the structure of blocks. This is purely my opinion. Otherwise, step on a bunch of rakes. First of all, you need to know the basics of layout. Without it, nowhere. So you will never understand how the browser works.
What does the mobile application and mobile-first have to do with it?
Bootstram won't tell you how many layouts there should be. It all depends on your design. If it's simple, then you won't need layouts. Knowing the bootstrap grid will be enough for you to rebuild the blocks. And also, using bootstrap imposes some restrictions on you. After all, you have to draw under it. Choose tools out of necessity, not because that's what most people do most often.
First, you need to understand what the truth of mobile-first is and where to start. For I'm sure you don't know what the difference is. This is just my opinion.
I see 3 options to solve the problem.
1) Draw a layout for 1920 for example. Let's say you have photoshop. Then, little by little, reduce the work area and all the elements, see what and how it looks. All OK? Reduce further. If you see that one block looks no longer good, the text does not fit or something. Here is the 2nd layout. And so on up to 320px. But this method will not give you the full picture. The browser is not photoshop or illustrator. He does not know how much, and what he can does not always work the way it does in Photoshop. Well, I think you already know it)))
Cons:
- It's very long.
- You all exactly do not foresee all possible nuances.
2) This is to sit with the frontend and do it live. So you will see how everything works live and see all the problems. After all, some things you may not even think about. The main thing is to work closely with the front-end developer. It will be easier for you to find the width, height points for drawing the layout.
Pros:
More detailed study of the site
Cons:
Time
3) Most often, 4 layouts are drawn. This is a desktop (1920), laptop (1366), tablet (1024 - 768), phone (480 - 320). And there the developer himself changes small moments along the way.
Pros:
Easiest and fastest option
Cons:
The developer can change some elements to his taste that are not included in these ranges, which in the end may not be to your liking. And I don't really want to change it. Or do it the way it is easier for him in terms of implementation

Answer 2

1) throw out Bootstrap 3. Use FlexBox. Even PostCss + GULP (WebPack if needed)
2) mobile-first has some advantages and conveniences. + Recommended by Google. By the way, you can also go to mobile-first through the desktop version. For example, like this:
- We make up the desktop top version, and then, when improvising the layout for phones, we simply take out what is needed for dots (min-width).
3) As for layouts, it all depends on your time, usually they make a layout for the desktop, and then the developers improvise. Ideally 3 layouts will be enough. Ie mobile, tablets, desktop.