Qu’est-ce que le Responsive Design ?
Le responsive design est une approche de conception d’interface utilisateur graphique (IUG) utilisée pour créer un contenu qui s’adapte en douceur à différentes tailles d’écran. Les concepteurs dimensionnent les éléments en unités relatives (%) et appliquent des requêtes média, de sorte que leurs conceptions puissent s’adapter automatiquement à l’espace du navigateur pour garantir la cohérence du contenu sur tous les appareils.
Conception réactive – Les aspects techniques
La conception réactive repose sur trois principes fondamentaux :
Système de grille fluide – Les éléments occupent le même pourcentage d’espace, quelle que soit la taille de l’écran (c’est-à-dire que les utilisateurs visualisent les conceptions sur différents appareils). Cela signifie que vous choisissez où les pixels doivent apparaître et que vous définissez une taille de mise en page afin que les éléments s’agrandissent ou se réduisent de manière fixe. C’est plus facile si vous utilisez un système de grille et un générateur CSS (feuilles de style en cascade) pour la base de votre conception (certains sont disponibles gratuitement). Vous devez calculer la taille cible divisée par le contexte, en pourcentage. Il s’agit de la largeur maximale de l’élément de votre conception divisée par la largeur maximale du navigateur des utilisateurs. Lorsque vous appliquez ces pourcentages de caractéristiques aux propriétés requises dans le script CSS, vous obtiendrez un design unique qui s’agrandit ou se rétrécit en fonction de la taille de l’écran des utilisateurs.
Utilisation fluide des images – Contrairement au texte, les images ne sont pas naturellement fluides. Cela signifie qu’elles conservent par défaut la même taille et la même configuration d’un écran à l’autre. Le risque évident est que votre conception ne soit pas cohérente d’un appareil à l’autre, car les images peuvent ne pas s’adapter et donc apparaître disproportionnées par rapport aux autres éléments. Vous devez donc appliquer une commande CSS – : img {max-width : 100%;} – pour vous assurer qu’une image est réduite pour les écrans plus petits. Pour inclure de nombreuses images, vous utilisez une autre commande CSS.
Requêtes multimédias – Il s’agit de filtres que vous utilisez pour détecter les dimensions de l’appareil de navigation et faire en sorte que votre conception apparaisse de manière appropriée. Avec eux, vous sondez pour déterminer la taille de l’écran sur lequel un utilisateur visualise votre conception. Ils modifieront la mise en page du site pour répondre à certaines conditions. Vous les incluez également dans les feuilles de style en cascade (CSS), dont les plus fréquemment utilisées sont min-width, max-width, min-height et max-height. Ainsi, sur la base de la largeur, de la hauteur, de l’orientation, etc. d’un écran, vous pouvez spécifier avec précision comment votre conception sera rendue pour les différents utilisateurs.
