Aller au contenu principal

Mobile first

Publié par Stéphane Arrami le dim 07/04/2019

Approche de conception d'ergonomie d'un site web qui priorise le rendu d'affichage sur un appareil mobile.

Vous devez d’abord imaginer la version mobile avec la taille d’écran la plus petite. Ensuite, vous imaginez les versions plus grandes : smartphones , ordinateurs portables et ordinateurs fixes.

Les pages se construisent par couches et s’enrichissent au fur et mesure que les tailles d’écrans s’agrandissent.

Approche Mobile First

  • se focaliser sur l’essentiel
  • le contenu s'affiche à la bonne taille sur mobile, adapté aux requêtes sur mobile et l'intention de recherche
  • les actions principales placées au milieu et en bas d'écran
  • navigation simplifiée
  • pas de programmation superflue, simplification du code
  • une performance maximale sur tous les terminaux
  • un accès rapide aux informations
  • pas de grandes images et de fonctions inutiles
  • des codes sources plus petits (atomisation)
  • abandon de JavaScript, les pages sont développées directement en HTML5
  • indiquer sur toutes les pages mobiles l’entête vary: user-agent pour les sites en dynamic-serving et le viewport
  • supprimer les pseudo-éléments :hover invisibles sur mobile
  • supprimer des règles et éléments qui n'ont aucune utilité sur mobile : float:none, display:none; width:auto; etc...