[Define New Theme] 6. Adopt a mobile first approach.

[hanakin]

*Note This is part 6 of a series found here

First let me begin by defining what mobile first is as their are multiple layers to it.

Layer 1: The most important part, Construction order of you css media queries.

given the screen sizes of

1140px - widescreen
992px - desktop
768px - tablet
480px - phone

Code: Select all

/**
 * Mobile First - Desktop only
 */
@media (min-width: desktop - 1) and (max-width: widescreen - 1) {   }

/**
 * Non Mobile Fist - Desktop Only
 */
@media (max-width: widescreen - 1) and (min-width: tablet + 1) {   }

Both give you the same result but mobile first is the only one that uses the name of the desired end state in the query. Its solely a coding standard.

Layer 2: Progressive enhancement

This is the addition of more robust features that require more space as the screen size increases. It is easier to start from a clean base the bar minimum required content for the app and progressively add enhancements as the screen size increases. This is mainly handled through proper componentisation of elements and the use of css hiding utilities

Layer 3: Design First

This is the one most of you may have an issue with and is not really necessary but is still beneficial. Given Layer 2 it is easier to design a theme and code the semantics based on the requirements of the content for a mobile device given that it is the most restrictive.

Thoughts and suggestions.

Keep in mind that we have a completely separate topic to discuss other ways of handling how to render content on different devices!

[aleha]

Any change of changing max-width in 3.1?
Yesterday, I visited area51 from a 24", a 21" and a 22" monitor. Even on 21" it's difficult to read it because it stretches all over the screen if you maximize the browser window.

PS: I remember reading here, on a51, a conversation about changing max-width a few day ago but I can't find it using search.
So, does max-width fall under the mobile first approach or am I in the wrong category?

[Sumanai]

I remember reading here, on a51, a conversation about changing max-width a few day ago but I can't find it using search.

I saw a discussion of this in our bugtracker.
There also is a link to a GitHub pull request.