Mobile first vs Desktop first design

[theodorosploumis]

Mobile first means that all of the development/design/content strategy needs to follow this. Not only the css/html. If we can totally follow the "mobile first" methodology then I am with it too. Here are some basic things that need to take under consideration for the "design" process.

• Content (which are the components of the content, which are the fields, how long are the texts etc)
• css (how easily can we "break" the pieces of the design into individual, standalone elements?)
• html tags (which are the wrappers, how should content behave on different positions on the page?)
• media queries (which breakpoints make sense?)
• html meta tags (initial scale etc)
• the target group of the distro (will the target group do a heavy use on mobile?)
• testing (can we test the mobile behavior easily, do we have ready tests to do this?)
• design mockups (should begin from mobile for every new feature designed)

So for me it is good to follow the mobile first design if the above (and probably many more) parameters can be satisfied. Content (user generated content) plays a major role here...

cc @Vaggos

[Vagelis-Prokopiou]

I agree with your whole perspective. “Mobile-first” and “desktop-first” include many things that have to be taken into consideration. What I mean thought, in this specific occasion, with “mobile-first”, is more technical than conceptual, and refers to the type of media queries we should use. “Min-width” => mobile-first or “max-width” => desktop-first? Using “max-width” has a negative effect on mobile users, since styles that their devices don’t need, are loaded. On the other hand, using “min-width” media queries is the best approach for mobile users, and does not create any problems with the whole development/design/content strategy, even if it is “desktop-first”.

[theodorosploumis]

If we can do this (within the CSS) without problems as described above then go on. Maybe we need a detailed debate here since this is a very serious decision...

[Vagelis-Prokopiou]

I don't think that it is hard to do. All we have to do to achieve "desktop-first", is declare our styles within the desktop media query. A very simplified structure of the css (csss) is this:

// No media query. // Default (mobile) styles.

Tablet media query { // Tablet overrides. }

Desktop media query { // Desktop overrides. }

[theodorosploumis]

That's OK but bear in mind that these breakpoints (tablet, desktop etc) are no semantic and refer to the "Device first" approach. Content has to determine the breakpoints not any real device (tablet, desktop etc).

So for example there may be 10 breakpoints for css related to the Header region and 2 for the main content.

The ideal should be to have a "device-agnostic" design approach if we can.