How to design a responsive layout?

Question

Layouts and prototypes

The task is to develop a layout for an adaptive site.
As far as I understand, for this you need to make three layouts: for mobile, for tablets and for monitors.
How to use adaptive grid? It has reserves in%.
Where can I see an example of such layouts?

Answer 1

Have you looked at Bootstrap?

Answer 2

@Elu_k Well then it's harder. In short, there are several options in bootstrap, depending on the width of the screen: @Balaka 's comment has a link to a table of these widths. Depending on the width, the layout should first become narrower (in steps, that is, there will be several grids for this option), and then the blocks begin to be located one under the other, for mobile, for example.
I think that if you make up in photoshop, then you can find ready-made grids in the internet. Something like www.youtube.com/watch?v=eqLR3XDmx9w or something like www.coolwebmasters.com/tools/3409-webzap-beautiful...
I don't do layout in photoshop myself, just the first results from the list. search, think

Answer 3

@Elu_k , let's break away from bootstrap: Responsive PSD Template
Make it similar, but it would be better for you to know who will be typesetting, whether they will use the framework and so on. You can google other results for:
psd for responsive website
Responsive PSD Template
and so on, the grid can be taken from these examples, and twitter bootstrap look for an example.

Answer 4

I will answer this way, all topics related to adaptive layout imply the use of HTML5 and CSS3, this is a typical SEO scam . None of the above in numerous articles will work on real mobile phones!! With the rare exception of a cool iPhone, but on faith.
We look here caniuse.com/#search=grid for grid search and see that FF 28 and Crome 33 have only part of the possibilities. And this is true. However, there are significant errors in mobile versions: a discrepancy between the given and real screen sizes. That is, adaptive layout, but for what? It can be said for a tablet, a slightly larger screen (more than 1025 in width) is actually perceived as a computer, and less looks like a mobile phone.
How did I solve this problem. I took the proven Cotonti engine and wrote a bunch of extensions for it, and so far I have achieved excellent results only for mini Opera. Here is my site www.cotonti.mobi Now it's not layout, but the use of special Bbcodes, which give the desired adaptive layout.
For the new year, I was presented with a good android smartphone. My MobiCot - PHP Mobile Content Management Framework looks exceptionally well on mine Opera, I didn't even expect how well it turned out (there used to be mobile phones and tablets). My PDF versions of articles have been especially beneficial. Android downloads them remarkably and they are reproduced by its readers. Which, as I understand it, is convenient for readers, you don’t need an Internet all the time. This direction I, of course, will decide.
My advice is to find a mobile plugin for your engine and don't bother with responsive layout. So far, I practically don’t meet sites that work on real mobile phones with grids. There are mobile applications, but this is completely different.

Answer 5

- download yadi.sk/d/7cIiaT6PKvvXL
- open any site on bootstrap, you can get the official getbootstrap, take screenshots at various resolutions within the limits described on getbootstrap.com/css/#grid insert into the downloaded grid files (a large screen in a large file, medium to medium, small to small) and see how cleverly the grid and screen of the site match.
- make up your future layouts on these wonderful columns. For a coder with a bootstrap, in general, a layout for medium resolution and for mobile phones will be enough from you, the rest in 90% of cases stretches and narrows by itself. Yes, and blocks for mobile phones are also built automatically and they don’t ask to eat or drink.

Answer 6

Explore the adaptive grid you need. For example, go to the site of the Skeleton or Bootstrap framework, read the documentation, look at the examples, dig deeper into the sites made on them. And you make the layout in Photoshop, using the sizes of the grid columns for the desired resolution. Dimensions can be applied with guides.
The question “How to develop a responsive design/layout” comes up a lot on Toaster. In addition, try to research the issue using the Toaster search.