13 mars 2020

Web Design sous Elementor #4 – Les unités

TYPE : WordPress

résultat fini

Résumé du Tutoriel

Utiliser les outils du Web design, c’est aussi connaître les unités qui serviront à placer, positionner et à dimensionner les différents éléments de votre Web design. Sur Internet deux types d’unités existent. Les unités absolues et les unités relatives. De par la nature relative des pages Web, il convient de privilégier les unités relatives. La raison principale étant qu’il faut s’assurer que ces mêmes pages fonctionnent à la fois sur Ordinateur, Tablette et Smartphone. La deuxième raison est que nous devons nous assurer que le Design reste identique malgré le fait que certains éléments nous manquent. Par exemple la taille de l’écran, la taille de la fenêtre du Navigateur Web peuvent prendre plusieurs valeurs possibles suivant le matériel de l’internaute.

Chaque élément d’Elementor utilise une ou plusieurs unités différentes. Certaines unités sont cependant plus simples à comprendre que d’autres. Suivant l’élément sélectionné, certaines unités ne sont pas disponibles. Cela dépend avant tout du type d’élément.

Nous allons décomposer cela suivant les types d’unités. Nous verrons dans l’ordre :

  • LE PIXEL
  • LE EM
  • LE POURCENT (%)
  • VIEWPORT WIDTH
  • VIEWPORT HEIGHT

LE PIXEL – pX

Le Pixel est l’unité de base du moniteur informatique. Il représente un point de l’écran qui peut être allumé ou éteint. Sur un écran de type Haute définition il y a 1920 pixels de large par 1020 pixels de haut.

Cette unité est une unité relative, car elle dépend de la résolution de l’écran. Plus la résolution de l’écran est importante et plus le pixel est petit. Cependant on s’accorde à dire que le Pixel peut-être considéré comme une unité absolue car la résolution des moniteurs informatique est généralement de 72 points par pouce. Exception faite de certains moniteurs utilisés par les graphistes qui peuvent avoir des résolutions plus importantes.

Le Pixel est considéré comme une unité absolue. Il sera donc constant quel que soit le média sur lequel il sera affiché (écran d’ordinateur ou écran de Smartphone par exemple).

Le PIXEL est également l’unité de base des images. Si l’on veut afficher une image au format plein écran, elle devra faire au minimum 1920 px de large par 1080 px de haut.

Chaque fois que l’on souhaite effectuer un positionnement précis sans prendre en compte le média utilisé, on utilisera l’unité Pixel.

Une image au format 1920 x 1080 pixels s’affichera au format plein format.

LE EM – EM

L’unité Emphémérale ou EM (emphemeral Unit) est une unité très ancienne. Elle provient du secteur de l’imprimerie et plus particulièrement de la typographie. Elle correspond à la hauteur du caractère mesurée du haut de la majuscule jusqu’à sa base. A l’époque elle mesurait la largeur du M Majuscule d’où son nom.

Pour le Web design, l’unité EM est relative à la taille de police définie dans une balise que l’on appelle body et qui s’applique pour toute la page sur laquelle on travaille. A ce moment là, 1 em = la valeur fixée par Body.

Si la taille de police fixée est de 17 pts, alors 1em = 17 points. 2em = 34 pts etc.

Cette unité accepte les fractions. On peut alors écrire par exemple 0.7 em. ou 2.4 em

EM est une unité relative que l’on utilise pour spécifier notamment la taille des caractères des éléments texte.

Ce texte a comme taille de police 2 em
Ce texte a comme taille de police 1.8 em
Ce texte a comme taille de police 1.3 em

EM est l’unité des tailles de polices en Web design.

Dans le panneau Typographie, accessible en sélectionnant un bloc Editeur de Texte et en cliquant ensuite sur l’icône du Crayon, on trouve la taille des caractères dans différentes unités. L’unité EM en fait partie. Elle apparaît également plus bas pour définir ou modifier la hauteur des lignes.

LE POURCENT – %

L’unité Pourcent est l’unité relative qui permet de positionner ou calibrer les dimensions des éléments d’une manière relative.

Mais relative à quoi ?

Et bien tout simplement relative au conteneur dans lequel se trouve l’élément. La dimension relative d’un bloc image fixée à 20% sera calculée à partir de la largeur de la colonne dans laquelle se trouve cette icône.

Dans cet exemple, chaque image a une largeur de 20%. Il en rentre 5 en largeur car la largeur de la colonne représente toujours 100%. Attention, nous parlons ici de largeur d’élément et non de largeur d’image.

Dans cet exemple, la largeur de chaque élément est de 20%, alors que la dimension de chaque image est de 100%. Autrement dit, l’image couvre l’intégralité de son propre container.

La largeur de l’image dans son conteneur est de 100%

La largeur de l’élément est de 20%

Ce concept qui différencie l’élément de son conteneur est PRIMORDIALE pour comprendre et réaliser ses Web designs. Nous reviendrons sur l’utilisation des Positionnements personnalisés dans un tutoriel dédié.

LE VIEWPORT WIDTH – VW

L’unité Viewport Width (largeur de la vue) représente une unité relative à la fenêtre du navigateur Internet. Même si on ne connait pas la largeur de cette fenêtre , on sait que 100 VW = La largeur totale de la fenêtre .

Cette unité est très intéressante car elle permet de dimensionner ou de positionner des éléments en fonction de la largeur de la fenêtre de l’internaute. C’est une unité que l’on peut assimiler à un pourcentage.

Ainsi 10 VW = 10% de la largeur de la fenêtre, 20 VW = 20%, 50 VW = 50%, etc.

Dans le Panneau Typographie d’un élément texte, la taille des caractères peu être renseignée en unités VW. Cela signifie que ces textes grossiront ou se réduiront suivant la taille du navigateur internet.

Dans cet example, 1 VW sera donc égal à 1% de la largeur de la fenêtre.

Retenez que l’utilisation des %, des EM et des VW, VH est recommandée pour utiliser au mieux la puissance du Responsive Design. L’adaptation des Designs aux formats Ordinateur, Tablette et Smartphone.

LE VIEWPORT HEIGHT- Vh

L’unité Viewport Height (hauteur de la vue) représente une unité relative à la fenêtre du navigateur Internet. Même si on ne connait pas la hauteur de cette fenêtre , on sait que 100 VH = La hauteur totale de la fenêtre .

Cette unité est très intéressante car elle permet de dimensionner ou de positionner des éléments en fonction de la hauteur de la fenêtre de l’internaute. Tout comme pour l’unité précedente, c’est une unité que l’on peut assimiler à un pourcentage.

Ainsi 10 VH = 10% de la hauteur de la fenêtre, 20 VH = 20%, 50 VH = 50%, etc.

 

Dans les paramètres de la section, une section peut avoir une hauteur exprimée en Pixels, en VH et en VW.
Si l’on choisit l’unité VH, alors la hauteur de la section sera relative à la hauteur de la fenêtre et 100 VH sera égal à 100% de la hauteur de la fenêtre. Idem pour l’unité VW. Très utile pour avoir une section qui remplit toute la fenêtre en hauteur ou en largeur.

Chaque fois que je souhaite que ma section remplisse l’écran de l’internaute en hauteur et/ou en largeur, je choisi :
100 VH et/ou 100 VW

Les unités représentent un réel challenge car on ne peut pas réaliser simplement un Web Design sans bien les comprendre. Chaque fois que vous le pouvez, utilisez des unités relatives comme les EM, les %, les VH et les VW.

Cependant certains éléments ne peuvent être manipulés qu’en utilisant des Pixels. Je pense notamment aux tailles d’images et de vidéos. A ce moment là nous utiliserons les outils du Responsive Design qui permettront d’adapter ces éléments aux médias sur lesquels ils seront affichés.

Je vous remercie pour votre attention et je vous dis à bientôt.

Partager sur facebook
Facebook
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Partager sur facebook
Partager sur twitter
Partager sur linkedin