Les enjeux du web mobile sont de plus en plus importants. Les usages changent et avoir un site non accessible sur un mobile n’est plus envisageable. Si le terrain de jeux des web designers reste la version desktop (ordinateur portable ou de bureau), pour autant, il ne faut pas négliger les versions mobiles et tablettes, les versions responsives (adaptatives en français).

Mobile First

Le principe du Mobile First (expression que l’on doit à Luke Wroblewski) consiste à penser la maquette et son code en partant de l’écran le plus petit vers le plus grand. Pour le design, cela reste délicat, mais impose une gymnastique permanente et une anticipation des déclinaisons dès les premières maquettes, avec la prise en charge d’un environnement tactile. Autre point important, sur mobile internet est lent et de manière générale, même avec la fibre, c’est toujours trop lent. Penser « Mobile First » exige une optimisation du poids et du nombre d’éléments à charger (css, js, images, vidéos, polices…).

Les Média Queries, le responsive en CSS

On peut détecter certaines choses sur le navigateur, le matériel et rediriger vers une version mobile ou autres, mais cela reste une méthode avec quelques limites. Un site comme http://smashingmagazine.com/ , s’adapte uniquement avec le CSS et s’optimise pour les réglages de l’utilisateur (zoomer avec pomme/crtl +/‐ pour tester).

Le minimum à savoir

Voici un exemple de code CSS, respectez l’ordre !

p{
  /* réglage mobile et + */
  font-family:sans-serif;
  font-size:16px;
}
@media screen and (min-width:640px){
  p{
   /* réglage à partir de 640px et + : corps un peu plus grand et même typo */
    font-size:21px;
  }
}

Exemple sur CodePen à tester ici avec la propriété Column (à préfixer) :

See the Pen Mobile First by Benoît Wimart (@benoitwimart) on CodePen.0

Remarque : il est possible d’utiliser un encadrement min et max avec max-width:639px, mais cela complique les choses sans raison.