Accessibilité : un regard sur la résolution et la taille des écrans

Par Mert Tol

Un des aspects les plus problématiques de la conception de pages web est la prise en compte de la myriade de dimensions et de résolutions d’écrans. Les résolutions d’écran se mesurent en pixels.

Même entendu ainsi, le terme « résolution » peut faire référence à deux mesures très différentes :

À titre d’exemple, supposons que nous ayons deux ordinateurs qui utilisent deux écrans identiques. L’un affiche une résolution de 800 × 600 pixels, tandis que l’autre est calibré sur une résolution doublement plus fine : 1600 × 1200 pixels. Par conséquent :

Effet de la résolution d'écran sur la taille d'un élément de page web

Examinons maintenant un problème similaire mais sous un angle différent. Au lieu de changer la résolution d’écran des deux systèmes, changeons la taille de leurs moniteurs à résolution constante. Admettons que nos deux systèmes soient configurés pour afficher la même résolution « hauteur × largeur » (la dimension réelle en pixels n’est pas pertinente pour notre discussion). Un des ordinateurs utilise un moniteur de 19" et l’autre un moniteur de 15". Comme tous les deux affichent le même nombre de pixels, ceux–ci devront indéniablement être plus larges et plus espacés sur le moniteur le plus grand.

Effet de la taille de l’écran sur la taille d’un élément de page web

Le résultat est que, étant donnée une résolution « hauteur × largeur », chaque élément d’une page web apparaîtra plus grand sur un écran plus grand.

Comme nous l’avons vu, les paramètres de résolution du système d’exploitation, tout comme la taille de l’écran, influent sur la taille apparente des éléments d’une page web, et sur la portion de cette page qui tient dans l’espace de l’écran. Plus la résolution « hauteur × largeur » croît, plus les pixels sont petits, et avec eux tous les éléments affichés constitués de ces pixels. Plus la taille de l’écran augmente, plus les pixels sont gros et à leur suite les éléments affichés.

Et maintenant, voici un autre schéma illustrant comme la taille de l’écran et la résolution interagissent, avec pour conséquence la variation de taille des textes et des images (pour la démonstration, les tailles sont relatives et non absolues).

Remarquez de nouveau que textes et images semblent plus grands à basse résolution sur un grand écran, et plus petits à haute résolution sur un écran de taille inférieure.

Tailles relatives d’éléments de pages web

Résumons la relation générale entre résolution et taille de l’écran :

Comme vous le voyez, les 72–100 PPI mentionnés plus haut ne sont qu’un « à peu près », dans la mesure où le nombre réel de pixels sur un pouce carré de l’écran dépend du rapport entre la résolution et la taille de cet écran. Insistons : un « pouce web » est un pouce relatif et non un pouce absolu.

D’autres facteurs peuvent influer sur le nombre de pixels qui s’affichent sur l’écran de l’utilisateur :

Derniers mots

Divers sites web proposent des statistiques relatives à l’adoption des différentes résolutions possibles, certains gratuitement, d’autres contre paiement. Mais faites attention : ces résultats sont collectés à partir de sites dont les populations de visiteurs peuvent être très hétérogènes à la vôtre. Encore une fois, il vous faut identifier votre lectorat, et tenter d’établir quels types de configurations informatiques il est le plus susceptible d’utiliser, avant de prendre toute décision qui dépendrait de la résolution.

Fiche technique

À propos de l'auteur

Mert Tol est directeur artistique et propriétaire de Medyanadolu Creative Media. Il travaille en tant que professionnel et étudie les subtilités des technologies d’information sur Internet, les standards du Web, la typographie, les arts graphiques, les systèmes d’intégration interactifs web, les applications mobiles, Google et l’ingénierie du son depuis 1992.

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Débutant

Accessibilité

Technique

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site