How to learn to adapt websites from a design standpoint? What to read about this?

Question

Design

Often layouts come in one desktop version, which need to be adapted adaptively. There are no problems with layout. With design, I don’t understand how best to do it - the size of the indents, the font size of headings, content .., when, what and how much to reduce. Maybe some blocks should keep the size and it is better not to touch them?

Answer 1

Let them send a second layout. Because usually the mobile version is very different from the desktop one, in terms of the arrangement of elements and their presence in general, and even in navigation.
Or take money for a mobile layout and make it yourself.
Or you can not bother at all, because the smartphone completely eats the desktop site. Well, you have to think a little, but what can you do if no funds have been allocated for the mobile version.

Answer 2

it’s better to draw separate layouts on different screens,
but if getting a mobile layout doesn’t seem realistic, in such cases I’ll follow the same plan,
run through all the necessary standard pages, define elements that are not particularly needed in a mobile phone. we eventually close them on mobile resolutions
then determine the possible menus. I move unnecessary menus and breadcrumbs under the content / in the footer, I hide the main modals under the burger
on the mobile screen, we start dragging from edge to edge of the screen
, I try to define all buttons with a height and width of at least 40 pixels
, font sizes increase as a result on almost all mobile screen sizes, but not much. headings and heading indents are reduced
all multi-column blocks in a tablet are compressed into 2-3 columns, on a mobile phone it is desirable to
enlarge the images by one, if there are any, it is better to try through some kind of lightbox, because many pictures, and even more so any infographics, often become unreadable on a mobile
phone in all possible places,
vertical and horizontal indents between blocks are also usually reduced in many places, because the mobile phone is much smaller on the screen, and you are already starting to save space,
like I described everything as I usually do when ordering for an adaptive without mobile layouts

Answer 3

I do 4-5 layouts usually if the design.
If you order on a turnkey basis, then the desktop is enough, the sizes of the elements are intuitively adjusted, the main thing is to understand that important elements need to fit in 600px + - (single block), if the first screen is usually contacts, offers, form / button.
From here, the fonts are reduced to fit, but not less than 13px (Google's requirement) and the buttons are not too small, again, the requirement of Google and the convenience of hitting them. width: 100%.
Extra elements that do not carry information load in display: none.
Column elements: if a trifle, then in 2 columns, the rest in 1.
According to the fonts of the headings: if the text is long, then you need to reduce it in order to fit the rest of the headings into at least 3 lines, they are adjusted to the size of the longest one so that there is not one screen 2 words large, and the next heading takes 2 screens.
It is also better to cut out heavy elements or resize them for a mobile phone.
When ordering on tilde, I don’t worry about such things as a mobile phone at all (+3-4 hours for 14+ screens).
But if the manual layout is better to take payment for it. most of the edits are on the mobile phone.

Answer 4

Responsive layout involves hiding blocks on the mobile version. Start with priorities, which blocks are important and which can be sacrificed in the mobile version. The same goes for elements inside blocks.