How to start developing a responsive website?

Question

css

Good afternoon everyone!
I’ll make a reservation right away that I’m not a layout designer, I didn’t deal with adaptive layouts before. Now there is a need for a site that is under development, but already laid out, to make it adaptive. The site itself has a fixed width of 980px, all blocks in it are also fixed.
There are layouts of elements that were used when developing the design layout:
- full version: joxi.ru/T_eOU_3JTJAhYzPUZGw
- mobile version: joxi.ru/n_eOUxjKTJBAH8IaRDs
Development time is relatively short, but there are a couple of days to get to the bottom of the adaptive layout.
Where to start solving the problem? Quality articles, practical guides on adaptive layout (preferably in Russian), your personal advice based on a specific situation. I would be grateful for any information on this matter.

Answer 1

When you decide everything, then keep in mind that the best helper for creating an adaptive layout is Firefox:

Answer 2

My advice to you, if you don't want to use the bootstrap fully, then just learn from it.
bootstrap-ru.com/scaffolding.php#responsive
Link as requested, in Russian.
You should start by setting a media query and doing something with it, such as changing the font size. Resize the main container and hide some block.
At this stage, you will enter how it works, and then look at your template and see what needs to be done with certain blocks so that it looks like you have on the second screen.
Write in head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

write in css

@media (max-width: 480px) {
  p {
    color:red;
  }
}

What this code means is that when the width is reduced to 480px, all text will be red. If it works - go ahead, already think about what needs to be done in your particular case.
Resize the area with the page and you will see everything codepen.io/iiil/pen/sALCb

Answer 3

I would advise using the mobile-first framework. Foundation type .

Answer 4

There is a development method called Mobile First . It consists in the fact that first a mobile version of the site is created, and then the site is made up for all other devices. Helps to simplify the site and its structure.
If the deadlines are compressed from disassembling Bootstrap , there are plenty of manuals on the net.

Answer 5

If the deadlines are tight - why not use bootstrap? There is already built-in support for layout for different devices.

Answer 6

First, layout everything for the big screen, like a regular site, and then add the necessary elements for a different resolution.

Answer 7

The development of a responsive website should start with creating a responsive design for four resolutions: smartphone, tablet, medium resolution for desktop (up to 1000 pixels) and high resolution (usually up to 1200 pixels, but depends on the site).

Answer 8

Maybe go this way - buy a sushi template on themeforest.net (search for sushi, restaurant, fast food), transfer all content to it from your site? As an option.

Answer 9

to get started, you should familiarize yourself with the basic concepts of RWD and narrow down media queries

Answer 10

From studying the documentation of a particular adaptive grid/framework.