The pros and cons of versti: Mobile First vs Desktop First?

Please do not throw stones, too, know how to Google ;
I would like to know the pros and cons of Mobile First and Desktop First layout ;

A list of questions that want an answer from more experienced developers :
  1. Why (Mobile First) or (First Desktop) better ;
  2. Why (Mobile First) or (First Desktop) worse ;
  3. Performance (Mobile First) or (First Desktop) ;
  4. Where and which sites are suitable (Mobile First) or (First Desktop) ;


Thank you all in advance !

Not necessarily, but would like to get a more detailed answer
June 14th 19 at 19:15
5 answers
June 14th 19 at 19:17
Solution
Let's try point by point:
Why (Mobile First) or (First Desktop) better ;
Why (Mobile First) or (First Desktop) worse ;
something from the "What is better a spoon or a fork?" You know... It's only a question of convenience, and it depends on what your original template, and in what way it will be easier to adapt. But even in this case, the word "better" here a little is appropriate, rather it is a matter of convenience. We (in total, people 50+, from students to experienced developers) on the basis of the number of parameters marked "to do so" from Google PageSpeed spent a lot of tests and discussions... as a result of which a single proper approach has not been found. The most convenient from the point of view of common sense, was this:
1. Please write all the common styles, describe the colors, fonts, and all such nonsense
2. For each range of permissions create your style-corrector, which describes the (correct) positioning of elements, their size, font size, etc.

So, as You know, "first" generally disappears as such, it turns out "and". But Google do not like this approach, he asks to put "all the important styles are" in , and to separate in this mode, the "major styles" from the "not important" is impossible, since the degree of "importance" is determined depending on the device resolution. But speaking only about personal convenience - it is more convenient to start with the mobile version, because it is a priori "less" and expand the item much easier than "sculpt a smaller version of it".

Performance (Mobile First) or (First Desktop) ;
The performance is not affected in any way because You assume JS'you can load the desired on the desired resolution, so the performance issue here at all difficult to identify. Although, of course, you can rely on this condition as "mobile is always slower than desktop devices," and of these considerations, if such a condition is "hard to turn" and raised to the rank of absolute - will also be logical to first do a "Mobile first".

Where and which sites are suitable (Mobile First) or (First Desktop) ;
MobileFirst, by definition, is perfect for those sites that initially (first) is calculated on the mobile device, for example some "music service online, with the ability to listen to MP3 shki as a 32-64Kbit, especially for those who have ran traffic and the Internet works with speed limits". The rest I described above :)
Well, nothing to add here... ) - Lulu_Zulauf71 commented on June 14th 19 at 19:20
ahaha, thanks for the review :))))) - Salvado commented on June 14th 19 at 19:23
June 14th 19 at 19:19
Solution
From the desktop version to make the mobile version is much easier than from the mobile to try to make a desktop interface. If mobile-first is about creativity, you can forget.

PS mobile is not the first, and secure and creative first, then desktop, and then mobile with reduced functionality. And mobile the fed or the fous. Do not get fooled by the slogans of the crowd, society is often wrong. And the public tend only to rivet punching from what they say.
Very sensible thank. I was approached by people who need to be "mobile first", while they can not explain what it exactly means. - Lulu_Zulauf71 commented on June 14th 19 at 19:22
June 14th 19 at 19:21
Solution
1. Why Mobile First is better ;

3. Performance Mobile First ;

Ideally for the mobile browser layout and styles easier, they should be smaller, and therefore less resource intensive, which is good, at least for batteries. If you compare it based on styles from the desktop, all the styles will get the mobile version. Some write that they shared basic styles - this is pure masochism. All is not allocated, there will always be the same items, and it turns out that some of the styles of the blocks lies in the basic styles, part somewhere else, part of the divided desktop\mobile, part copied and other ensuing consequences. I make the base styles for the desktop or mobile and additional files for media queries

But we don't live in a perfect world ....
2. Why Mobile First worse ;

After mobile for the desktop will have to return to the layout, to build up all that is not included in the mobile version, but there is on the desktop, while working with styles. From this, and it turns out that running from one view function to view, desktop\mobile

My personal opinion
To impose from the base of the desktop easier to use, to modify or to hide a node is easier than to build new in the existing document.

4. Where and how sites suitable Mobile First ;

If the layout shows that the desktop version is not much different from mobile, appearance, location blocks their number. Where that it is necessary to remove or add. If you can Satelliitti desktop version of the mobile styles without major alterations and improvements, then definitely my choice it is better to start from the mobile version.
June 14th 19 at 19:23
I see no difference.
If layouts 0 layouts for mobile and desktops, mobile first layouts.
If ready desktop site and need to add "mobility", not pereverseva add, it turns out desktop first.
June 14th 19 at 19:25
Why (Hammer) or (Screwdriver) is better ;
Why (Hammer) or (Screwdriver) worse ;
Performance (Hammer) or (Screwdriver) ;
Where and how sites fit (Hammer) or (Screwdriver) ;
Rather, (cross Screwdriver) and a (flat blade Screwdriver).. it's too Much difference between a hammer and a screwdriver :) - Lulu_Zulauf71 commented on June 14th 19 at 19:28

Find more questions by tags CSSLayoutWeb Development