Aujourd'hui on va parler technique, et je vous propose de découvrir la méthode dite du Mobile first. Comme son nom l'indique c'est une méthodologie qui consiste à commencer à intégrer son site en commençant par la résolution la plus faible, les mobiles. Puis ensuite d'utiliser les media queries pour ajouter du style pour les résolutions supérieures.
Pourquoi le mobile en premier ?
C'est la première question que je me suis posé quand j'ai vu cette technique apparaitre. Pourquoi commencer par le périphérique qui sera sûrement moins utilisé pour consulter notre site ?
En fait, commencer par le mobile présente un véritable intérêt en terme d'organisation de code. Plus la résolution est petite, plus la structure du site est simple (sur mobile on a souvent les blocs les uns sous les autres) du coup le mobile aura très peu de règles concernant la structure des éléments. Cette structure va devenir plus complexe au fur et à mesure que l'écran grandit, et il sera alors naturel de rajouter des règles progressivement.
Un exemple concret
Je vous propose une petite mise en situation : un contenu et à côté une sidebar. Si on devait écrire le CSS en commençant par les grands écrans on autrait quelque chose qui ressemblerait à ça :
.main{
background: #FFF;
float: left;
width: 75%;
}
.sidebar{
background: #FF0000;
float: left;
width: 25%;
}
// Sur mobile la sidebar passe en dessous
// On se retrouve à devoir écrire du code pour rétablir les valeurs par défauts
@media only screen and (max-width: 640px){
.main, .sidebar{
float: none;
width: 100%;
}
}Ce simple exemple montre l'inconvénient de la méthode Desktop First, on se retrouve à devoir écraser des règles que l'on a écrite pour réobtenir le comportement par défaut.
.main{
background: #FFF;
}
.sidebar{
background: #FF0000;
}
// Sur grand écran on a juste a bouger la structure
@media only screen and (min-width: 640px){
.main, .sidebar{ float:left; }
.main{ width: 75%; }
.sidebar{ width: 25% }
}L'avantage est ici qu'on n'a pas à revenir sur les règles de base. Dans une résolution mobile (par défaut) on ne va quasiment pas poser de structure et on va s'occuper de l'apparence de nos éléments. Lorsque la largeur de l'écran va grandir on va alors modifier la structure pour placer les 2 éléments l'un à côté de l'autre.
La technique peut sembler difficile à appliquer mais je vous conseille de l'essayer lorsque vous avez besoin de développer une application responsive.
