Bonnes pratiques Web, les dimensions

L'art de trouver la bonne dimension !

La technologie de nos jours, permet aux utilisateurs de naviguer sur Internet via plusieurs périphériques, tels que des moniteurs de bureau, des téléphones mobiles, des tablettes, etc, des appareils aux différentes tailles d’écran. Ces derniers posent toutefois un problème aux développeurs Web: Comment garantir qu’un site Web soit lisible et attractif sur tous les appareils, quelle que soit la taille de l’écran ?

La réponse : le responsive design !

Le Responsive Design fait référence à la capacité d’un site Web à redimensionner et à réorganiser son contenu en fonction des éléments suivants :

a) La taille des autres contenus sur le site.

b) La taille de l’écran sur lequel le site Web est en cours de visualisation.

 

Responsive Design Mesures

Il existe plusieurs types d’unité, et chacun influence à sa manière le design de votre site. Si vous ne savez pas comment choisir entre le “px”, le “em”, ou encore le “vw”, alors vous tombez bien. Nous allons faire un point sur les unités de mesure en CSS pour que vous puissiez les utiliser correctement.

Les unités absolues sont les suivantes :

  • Les pixels (px)
  • Les pouces (in)
  • Les centimètres (cm)
  • Les millimètres (mm)
  • Les picas (pc)
  • Les points (pt)
 

La plupart du temps, vous n’utiliserez que le pixel ou le point, mais il est bon de comprendre la relation entre ces unités de mesure.

 

Retenez donc que 1 in = 96 px, 1 cm = 37,8 px et 1 mm = 3,78 px.

Pour illustrer les unités absolues, prenons un exemple concret. Admettons le code CSS suivant :

.box {
width : 150px ;
height : 150 px ;
}

Cela signifie que l’élément box aura la même dimension (150 x 150 pixels), quelle que soit la taille de l’écran.

Utiliser em ou px pour les tailles des polices

CSS a héritée de la typographie les unités pt (point) et pc (pica). Les imprimantes les ont traditionnellement utilisées (ainsi que les unités similaires) de préférence à cm ou in. Dans CSS il n’y a aucune raison d’utiliser pt, utilisez l’unité que vous préférez. Mais il y a une bonne raison de ne pas utiliser pt ni aucune autre unité absolue et d’utiliser seulement em et px.

Voici quelques lignes de différentes épaisseurs. Toutes ou partie peuvent être nettes (mais au minimum les lignes 1px et 2px doivent être visibles et nettes):

0.5pt,1px,1pt,1.5px,2px

Si les 4 premières lignes apparaissent identiques (ou si la ligne 0.5pt n’est pas affichée), vous avez probablement un écran qui ne peut afficher des points inférieurs à 1px. Si les lignes semblent de plus en plus épaisses, vous regardez probablement cette page sur un écran en haute résolution ou sur du papier. Et si 1pt semble plus épais que 1.5px, vous avez probablement un smartphone.

L’unité magique en CSS, le px, est souvent très adaptée, en particulier si le style nécessite l’alignement d’un texte sur des images, ou tout simplement parce que tout ce qui a une largeur de 1px ou d’un multiple de 1px est assuré d’avoir un rendu net.

Mais pour les tailles de police, il est préférable d’utiliser em. L’idée est (1) de ne pas spécifier la taille de la police de l’élément BODY (en HTML), mais d’utiliser la taille par défaut du support, parce que c’est une taille que l’utilisateur peut lire confortablement; (2) exprimer les tailles de police des autres éléments en em: ‘H1 {font-size: 2.5em}’ pour rendre le H1 2½ fois plus grand que le contenu normal du corps du document.

Le seul endroit ou vous pourriez utiliser pt (ou cm ou in) pour définir une taille de police est dans une feuille de style pour l’impression, si vous voulez être sûr que la police imprimée aura exactement une certaine taille. Mais même dans ce cas, utiliser la taille par défaut de la police est généralement plus indiqué.

L’unité px vous évite donc à devoir connaître la résolution du support. Que le sortie soit en 96 dpi, 100 dpi, 220 dpi ou 1800 dpi, une dimension exprimée avec un nombre entier de px sera toujours rendue correctement et de façon très similaire sur tous les supports. Mais qu’en est-il si vous voulez vraiment connaître la résolution du support, par exemple, savoir si on peut utiliser une ligne en 0.5px ? La réponse consiste à vérifier la résolution avec Media Queries. Expliquer Media Queries sort du cadre de cet article, néanmoins voici un petit exemple:

div.mybox { border: 2px solid }
@media (min-resolution: 2dppx) {
  /* Media with 2 or more dots per px */
  div.mybox { border: 1.5px solid }
}

Nouvelles unités en CSS

Pour rendre encore plus facile le fait d’écrire des règles de style qui ne dépendent que de la taille de la police par défaut, CSS a introduit une nouvelle unité depuis 2013: Le rem. Le rem (pour « root em ») est la taille de la police de caractères dans l’élément racine du document. Contrairement au em, qui peut être différent pour chaque élément, le rem est constant tout au long du document. Par exemple, pour définir la même marge gauche pour les éléments P et H1, comparez cette feuille de style antérieure à 2013:

p { margin-left: 1em }
h1 { font-size: 3em; margin-left: 0.333em }

et la nouvelle version:

p { margin-left: 1rem }
h1 { font-size: 3em; margin-left: 1rem }

D’autres nouvelles unités rendent possible le fait de spécifier des tailles relatives à la fenêtre du lecteur, ce sont les unités vw and vh. Le vw équivaut à 1/100e de la largeur de la fenêtre et le vh équivaut à 1/100e de sa hauteur. Il y a également vmin, qui sélectionne la plus petite valeur entre vw et vh. Et vmax. (vous devinerez ce qu’elle signifie.)

Comme elles sont récentes, elles ne fonctionnent pas encore partout. Mais en ce début 2015, plusieurs navigateurs les supportent déjà.