Rapport d’interface, pour quel usage ?
Vous avez dit proportionnalité…
Dans le cas où le site est construit en s’appuyant sur une grille fixe, il n’y a pas de soucis pour définir les dimensions de colonnes et de blocs. Les unités fixes classiques pourront alors être employées, en préférant bien sur le px (pixel) pour l’écran et le pt (point) pour l’impression.
Par contre, dès lors qu’il s’agit de s’appuyer sur une grille liquide, il va falloir avoir recours à des unités proportionnelles telles que : le %, le vh ou le vw pour la relation au positionnement des blocs sur la grille, et l’em, ou encore le rem, pour préserver une proportionnalité liée à la typographie, au sein même de ces blocs. Mettons cela en évidence au travers d’un exemple :
Commençons par nous intéresser au positionnement de la grille et pour en simplifier l’étude, appuyons-nous sur un visuel défini. Il n’est pas utile d’étudier les divers types d’affichage tablette et mobile, un seul (ici le screen) permet de comprendre les logiques à mettre en place, pour obtenir une grille liquide.
Donc, en décortiquant la maquette, nous pouvons distinguer quatre zones principales s’appuyant sur 12 colonnes : l’entête, le contenu, les informations complémentaires et le pied de page. L’ensemble de ces éléments est mesurable dans le contexte du document :
<body> <header>header</header> <section>section</section> <aside>aside</aside> <footer>footer</footer> </body>
Nous avons ainsi un document qui mesure 970 px de large (peu importe sa hauteur) et un jeu de marge récurrent de 10 px. Ce qui nous donne une largeur pour l’entête et le pied de page de 950 px, et pour chacune des deux colonnes, respectivement 630 px et 310 px. Nous avons là tout ce qu’il nous faut pour construire une interface liquide.
Pour une largeur de document de 970 px, la largeur de l’entête, qui elle, mesure 950 px, équivaut à un rapport de 950 / 970 soit 0.97938144329 ou encore 97.938144329 %.
Nous pourrions avoir tendance à simplifier en ramenant cette valeur à 98 %. Mais ce serait là une grossière erreur, surtout si nous devons additionner entre elles, plusieurs valeurs proportionnelles, qui une fois arrondies, pourraient totaliser une valeur légèrement supérieure à 100 %. Les navigateurs sont bien capables de traiter des valeurs très précises et de gérer leurs arrondis avec autant de précision. Laissons-leur donc le soin de cette tâche.
Continuons alors nos savants calculs, pour la partie médiane du document, là où nous avons à faire aux deux colonnes. Nous obtenons 10 / 970 soit 1.03927835 % pour chaque marge, 630 / 970 donnant 64.948453608 % pour la colonne du contenu et enfin 310 / 970 équivalant à 31.958762886 % pour la colonne des contenus complémentaires. Il suffit de reporter ces données dans notre feuille de style, en prenant soin de donner une couleur de fond à ces blocs pour les distinguer. Nous pourrons alors constater le bon fonctionnement de la liquidité de l’interface ainsi paramétrée.
Attention aux blocs imbriqués
Poursuivons l’expérience en prenant en compte les trois éléments d’articles imbriqués dans la partie de contenu. La démarche est identique, à ceci près que l’élément référence pour la proportionnalité de dimension, n’est plus la largeur du document, mais la largeur de l’élément parent, c’est-à-dire la colonne de contenu.
Les deux premiers articles mesurent 310 px, et du coup, afin de calculer leurs proportionnalités, il faut changer leur contexte qui n’est plus 970 px mais 630 px. Cela donne une largeur proportionnelle de 310 / 630 soit 49.206349206 %. Il en va de même pour les marges, qui elles donnent 10 / 630, soit 1.587301587 %. Le dernier article lui, fait 610 / 630, soit 96.825396825 %. Le positionnement des marges, ou encore l’affichage en mode colonne ou rangée, de ces divers éléments est alors uniquement affaire de CSS. Une fois l’ensemble mis en place, il ne reste plus qu’à vérifier son bon fonctionnement.