How to make the design responsive?

When you, as a beginner, ask an experienced designer how to make your design responsive, the answer may confuse you even more.

Adaptability as a concept is not so complicated, but in real life, you will have to take into account many details. These details are in motion, and you will need to look for the most common screen resolutions, make a prototype to see everything in action, decide which elements to leave and which ones to discard, and so on. The page layout change as the screen size changes.
We design in several stages.

First, design the site for a mobile device. This approach is called “mobile first”. The site will probably be just one column because the screen of the phone is too small to fit something bigger. Here you will have to remove a lot of excesses, otherwise, you will get ridiculously long pages.

So, you will begin to remove all unnecessary and continue until only the most important functions and content remain.

And when you finally feel that the site looks good on the phone, take this layout and transfer it to the screen size of the iPad.
If a normal, “ fixed ” web design can be compared to target shooting, then an adaptive design is shooting at a moving target.

People familiar with the technical aspects of adaptive design usually start talking about percentages, multimedia features, and details of adaptive typography, as well as how to load different images depending on the resolution. This is all, of course, interesting and useful, but this is not what the newcomer wants to know.

You do not need to know how to implement an adaptive design.

You need to know how to start sketching responsive design.

Adaptive layouts are interconnected.

Think of mockups for your phone, tablet, or desktop as the same layout.

You do not design three different layouts. You design one layout in three “modes”.

Everything on the small screen should also be on large ones, but you will probably want to move some objects to other places.

Ask yourself: will anything break if the layout is a bit wide or, on the contrary, squeezed? And if there are elements in the design that work only with fixed screen size, it is not yet adaptive.

When changing the screen size in the ideal responsive design, the minimum changes necessary to ensure its operation occurs.

Draw your layout “modes” nearby. Do they constitute a sequence?

Just as a monkey evolved into a great ape, a great ape into a human, and a human into a reality show participant, your layouts must be interconnected.

Ask yourself: what will the site look like when switching from one screen size to another? Will it look like total chaos or small adjustments?

If you need to scale the image, or compress the text block, or adjust the font size to fit the title in one line – no problem! This is adaptive thinking.

If your site changes from vertical scrolling to horizontal shaping, this is … well … weird, and probably, you will come to the developers with pitchforks and torches.

This is a delicate matter. Creating adaptability requires a lot of extra time, and it is also important to keep it simple.

When you have a set of layouts in your hands that can smoothly merge into each other when you change the window size, you can assume that you made your first responsive design.