Largeur d’un site internet, fixe ou fluide ?

Définition de la résolution d’écran

La résolution d’écran est la taille d’affichage de l’écran définie en pixels ou en points. Elle s’exprime en largeur par hauteur. Les tailles les plus courantes de résolution d’écran sont 800×600, 1024×768 et 1280×1024, mais il en existe de nombreuses autres.

Les nouveaux ratios d’écran ont démultiplié ces résolutions. A l’antique format 4/3 de notre vieille télévision à tube cathodique sont venus s’ajouter les formats 16/9 ou encore 16/10 des ordinateurs portables.

A noter que la résolution native est la résolution par défaut conseillée par le constructeur. Ainsi, un écran LCD avec une résolution native de 1024×768 affichera une image parfaite si vous choisissez un affichage en 1024×768 au travers des options de votre carte graphique, et une image imparfaite ou légèrement floue si vous préférez une résolution inférieure ou supérieure.

Statistiques d’utilisation des résolutions d’écran

Si les résolutions d’écran sont nombreuses, quelles sont celles qui sont le plus utilisées ? Ces statistiques sur W3Schools.com ont l’avantage de nous présenter un historique des pourcentages de résolution d’écran depuis 9 ans. On se rend bien compte que la résolution 800×600 n’est plus utilisée que par 4% des internautes, laissant la place au standard 1024×768 et plus…

Quelle largeur d’affichage choisir pour un site internet ?

Comment faire pour afficher au mieux un contenu ? La hauteur d’un site internet est en prendre compte (principe « Above the fold« ) et sa largeur également, car cela peut le faire apparaître selon les résolutions de l’internaute, soit ridiculement petit, soit tronqué.

Il existe plusieurs possibilités

Opter pour une résolution minimale, soit 800×600 avec l’inconvénient d’apparaître de façon vraiment « étroite » sur 96% des navigateurs, puisque seulement 4% des internautes utilisent cette résolution

Opter pour une résolution moyenne, soit 1024×768 en sacrifiant quelque peu les 4% d’internautes qui utilisent encore le 800×600

Proposer plusieurs largeurs d’affichage d’un site en intégrant une détection de la résolution d’écran en javascript par exemple

Utiliser un format fluide qui s’adapte à toute largeur d’écran

Le format fluide ne facilite pas l’ergonomie

Dans notre agence, nous ne conseillons pas à nos clients, la plupart du temps, d’utiliser un format fluide ou extensible pour la création de leur site internet. En effet, même si cela peut passer pour une solution idéale à première vue, il est très difficile de maîtriser l’organisation du contenu des pages d’un site internet extensible. Travailler sur l’ergonomie d’un site dont l’architecture s’étire de façon variable devient rapidement une gageure.

De plus, les statistiques d’utilisation de résolution d’écran nous prouvent également que les résolutions ont tendance à s’élargir (en particulier avec les ratios 16/9 et 16/10). Un site internet devient illisible lorsqu’il s’étale sur une trop grande largeur.

Cependant, certaines propriétés CSS telles que min-width (largeur minimale) et max-width (largeur maximale) permettent d’encadrer et de contrôler l’extension d’un site. Le design d’un site au format fluide doit alors s’articuler autour de certaines contraintes, telles que backgrounds répétés, ou éléments flash en mode fluide également. L’adaptation de ces propriétés CSS à la majorité des navigateurs n’est pas automatique.

Au final donc, nous travaillons le plus souvent sur une largeur fixe adaptée à la résolution la plus courante, à savoir 1024×768. Cela nous permet d’agencer les différents éléments d’un site internet de façon précise, et d’éliminer la majorité des inconvénients cités précédemment.

Et vous, quelles sont vos préférences ?

Liens connexes :