What is the idea behind the Mobile First approach?

Question

css

Friends,
Now I’m thinking about what the Mobile First approach really is, and all I could find on the Internet is:

• It is necessary to focus on the practices used in the design of mobile interfaces (adaptive design, interface degradation, working with text, etc.)
  
• It is necessary to design mobile design first, and as the screen increases, develop the interface for desktops
  

In general, I don’t understand the difference with the usual adaptation for mobile devices, when we design the interface for the desktop, and then the interface degrades as the screen size decreases.
No matter how we move, from desktop to mobile devices, or vice versa, in any case, we must ensure the quality and correct operation of the application, so no matter how we move, in any case, the result should be identical.
Can anyone tell me what I missed, how the result of working on this approach differs from others?

Answer 1

moveBlock.style.top = test + "px";
there is no test variable in your example, try inserting topPos

Answer 2

The word top is a reserved word in js and cannot be used for variable names.
Here is a list of all reserved words:
https://www.w3schools.com/js/js_reserved.asp
To be more precise, this is the name of an object in the global window class, which is made available by the word top.

Answer 3

https://codepen.io/Kononov_D/pen/GeWwNg
did not understand what your problem was)
but here is a link to the codePen where everything works)

Answer 4

Having managed to do with little, to afford more, is easier than having a lot, to start limiting yourself.
The same is longer in English. in a post .

paragraph

Progressive Advancement has won the game for now as far as I can see. If UI/UX designers start a product design with its desktop version, they will inevitably want to make use of most of the advantages of the advanced end. For example, the hover effect which is supported by a cursor mouse; HD images & complex charts which can display normally only when there is a recent bandwidth. In this way, the designers will make efforts to complete an amazing desktop version and only to find it can hardly be adopted on a mobile end unless they give up a lot of beautiful ideas. If so, the mobile end version will be more like an afterthought, an incomplete product which’s been watered down.

Answer 5

It is necessary to design mobile design first, and as the screen increases, develop the interface for desktops
In this case, you will have a limited field, thus you will think about a more compact arrangement and try to fit the most relevant.
In general, I don’t understand the difference with the usual adaptation for mobile devices, when we design the interface for the desktop, and then the interface degrades as the screen size decreases.
Previously, they did this (and many still do it), but because of the “all at once” trend that designers followed, it was not possible to fit everything on the desktop into the mobile interface.
This "rule" just appeared against the backdrop of the "cram everything" trend.

Answer 6

1. Mobile first implies a certain process of work closer to product development. It is important here not to make all the screens at once, but to gradually roll out the functionality version by version. On mobile screens, the functionality is limited by the device, while on desktop screens it is wider.
Imagine what happens if you start with desktop screens: you design an interface, implement all the desired functionality there, roll out, and after a month you realize that this is not feasible on mobile. It turns out that your design solutions from the very beginning start to “accumulate errors”, all this is later revealed and you make changes to ALL screens, and plus it still needs to be redone at the development stage, which is very expensive. If you use mobile first, then you complicate the interface evolutionarily, adding feature after feature from simple to complex, and then, in case of an error, you will only have to roll back one step.
To sum up, you can do it this way and that, really, especially if you work with custom development, when you just need to “design” and give all the screens at once and forget it. But in terms of product development, when you need to save resources, mobile first looks more efficient.
2. Apparently, the fact is that mobile traffic exceeded desktop traffic a few years ago.