Home ¦ Posts ¦ RSS

Rant: On mobile first

"Mobile-first" is one of the most abused buzzwords of the last few years, second only to "Agile software development". Most people seem to get these concepts wrong yet they keep advertising and talking about them.

My take on mobile-first is basically the following: Mobile-first doesn't mean that you take into account mobile devices from the beginning of your development. It means that you take into account mobile devices before desktop ones while you develop.

Let's have a look at this piece of CSS code:

/* Desktop-first approach */

article{
    ...
}

@media screen and (max-width: 1024px) {
    article{
       ...
    }
}

Clearly, this is not "mobile-first". What you really should do is target mobile styling first and apply the desktop-specific enhancements only afterwards:

/* Mobile-first approach, using min-width to enhance desktop experience */

article{
    ...
}

@media screen and (min-width: 1024px) {
    article{
       ...
    }
}

As an added bonus, since the styling of smaller screens is usually simpler than the styling of larger ones, your code should be easier and more readable. Why? Because most of the times you don't have to restore and clear the styling you've created for mobile screens, you build on top of it.

© Giuseppe Ciotta. Built using Pelican. Theme on github.