Contenu réactif

La conception web réactive utilise des mises en page et des images flexibles, ainsi que des requêtes média par feuilles de style en cascade. L’objectif de la conception réactive est de construire une page web qui détecte la taille et l’orientation de l’écran afin d’adapter la mise en page aux préférences de l’utilisateur.


Points relatifs à la conception

Points relatifs à la conception

  • Le contenu est lisible à tous les niveaux d’agrandissement du navigateur, c’est-à-dire à moins de 100 %, à 100 % et jusqu’à 200 %
  • Les pages sont entièrement réactives et compatibles avec les écrans de 320 px de largeur ou plus
  • La taille de police préférée définie par l’utilisateur dans son navigateur est utilisée pour l’affichage du contenu de la page
  • Le contenu est lisible à tous les niveaux d’agrandissement du navigateur, c’est-à-dire à moins de 100 %, à 100 % et jusqu’à 200 %
  • Les pages sont entièrement réactives et compatibles avec les écrans de 320 px de largeur ou plus
  • La taille de police préférée définie par l’utilisateur dans son navigateur est utilisée pour l’affichage du contenu de la page

Points relatifs aux développeurs

Points relatifs aux développeurs

  • Les développeurs doivent s’assurer que la taille de la police de page est définie à 100 % dans le code
  • La taille du texte ne doit pas non plus diminuer lorsque le zoom du navigateur ou le zoom du texte est appliqué
  • Il faut porter une attention particulière au contenu dynamique, aux boutons et aux modèles
  • La conception adaptative doit être utilisée avec parcimonie
  • Aucun sens ne doit être perdu s’il y a du contenu adaptatif
  • Il faut que les modes portrait et paysage des téléphones soient pris en charge
  • Les développeurs doivent s’assurer que la taille de la police de page est définie à 100 % dans le code
  • La taille du texte ne doit pas non plus diminuer lorsque le zoom du navigateur ou le zoom du texte est appliqué
  • Il faut porter une attention particulière au contenu dynamique, aux boutons et aux modèles
  • La conception adaptative doit être utilisée avec parcimonie
  • Aucun sens ne doit être perdu s’il y a du contenu adaptatif
  • Il faut que les modes portrait et paysage des téléphones soient pris en charge

Explorer l’expérience

Explorer l’expérience

  • Réglez le zoom du navigateur à 200 % au moyen des touches Ctrl + = (Windows) ou Commande + = (Mac OSX)
  • Modifiez les paramètres de taille de police dans les paramètres du navigateur ou du système d’exploitation
    • Exemple : Firefox 78 sur Mac OSX : Dans la barre de navigation supérieure, allez au menu Affichage, sélectionnez Zoom puis Zoom texte seulement, et passez à 200 %
  • Réglez le zoom du navigateur à 200 % au moyen des touches Ctrl + = (Windows) ou Commande + = (Mac OSX)
  • Modifiez les paramètres de taille de police dans les paramètres du navigateur ou du système d’exploitation
    • Exemple : Firefox 78 sur Mac OSX : Dans la barre de navigation supérieure, allez au menu Affichage, sélectionnez Zoom puis Zoom texte seulement, et passez à 200 %

Explore more

Explore more