PSD layouts for responsive layout?

Question

Design

I'm getting started with responsive design. You need to make 3 PSD site layouts - for desktops, tablets and mobiles. With a resolution, it is even more or less clear for tablets - 720 or 768, for mobile devices - 320 or 480. And what should be done with the grid. For example, I take the 1140 grid for desktops. What to take in this case, the grid for mobile and tablets? Reduce the number of columns, build an arbitrary grid in general, or is it all not important for layout?

Answer 1

Follow the simple rule of reducing content in width. Roughly speaking:
4 columns, desktop -> 2 columns, tablets -> 1 column, mobile phones.
Then try to do it multiple times to make it convenient to change the grid to css on the fly. Well, it all depends on your imagination. Although you can follow some standard grids that are easy to google.

Answer 2

You know, there is such a principle in adaptive design - mobile first. This is when the design is first created for mobile, and only then for large resolutions. Perhaps you should read about it, there are a couple of good books on the subject.

Answer 3

The number of columns is not reduced, just the grid shrinks proportionally. And there you choose how much this or that column element will occupy at a given resolution. I would advise you to familiarize yourself with the bootstrap guideline (the principle is more or less the same for everyone) getbootstrap.com/css/#grid

Answer 4

freebiesbug.com/psd-freebies/bootstrap-3-grid-syst...