Quelle résolution choisir pour son site Internet ?

Les résolutions standards de site web ont évolué en même temps que la taille des écrans, et même si maintenant on trouve des écrans très larges, 22, 24 pouces voir même plus, qui autorisent des résolutions au delà de 1600×1200 pixels d’affichage, ne vous attendez pas à créer des sites Internet pour des résolutions aussi larges, de nos jours encore beaucoup de personnes naviguent sur Internet avec une résolution de 1024 pixels de largeur ou plus.

La largeur ok, mais la hauteur ?

C’est là que ça se complique un peu…si le 1024 pixels de largeur nous laisse une liberté de mouvement tout à fait convenable, on veut si possible éviter que son site Internet ne soit coupé horizontalement sur les écrans plus petits (comme les écrans d’ordinateur portable) et risquer ainsi de masquer au visiteur une partie essentiel de son site, même si, je le conçois, le visiteur à la possibilité de scroller, il faut tenir compte de la 1ère impression et de ce que le visiteur verra en tout 1er de votre page, car cela déterminera très certainement si il restera ou pas sur votre site.

Cela dépend bien entendu du type de site Internet que vous être en train de réaliser, mais en général ce que l’on attend d’un visiteur c’est qu’il reste le plus longtemps possible, et ce qu’il verra en premier déterminera certainement son envie de continuer sa visite sur votre site. Selon donc ce que votre client veut mettre en avant, un produit, un événement, un numéro de téléphone etc… on privilégiera de placer ces éléments dans la partie haute de l’écran.

Mais de quelle marge de manoeuvre disposons nous ?

Actuellement les navigateurs deviennent de plus en plus personnalisables, on peut y ajouter des tas de barres différentes, barres de  favoris, barres de raccourcis réseaux sociaux, barres d’outils développement, barres de recherches en tout genre etc..je pourrai continuer encore longtemps car il en existe maintenant toutes les sortes;  et tout ça ne joue pas en notre faveur car sur ma résolution d’ordinateur portable de 1280×800 si je prends l’exemple de mon navigateur Firefox il ne me reste que 603pixels de hauteur de page pour pouvoir jouer avec mes éléments, sur Google Chrome je dispose de 683px alors que sur IE8 j’en ait pour 656px. Cela dépend donc du navigateur utilisé de la résolution et de l’utilisateur.

Vous allez me dire que ça fait beaucoup de variables à prendre en compte mais on peut tirer de tout ça un minimum qui nous servira de base lorsqu’il faudra faire ressortir des éléments en particuliers que l’on voudra visible par le plus grand nombre d’internautes possible: 1000px de largeur par 500px de largeur. Ces chiffres restent bien sûr à l’appréciation de chacun et tendent bien évidement à changer et pour finir par la disparition annoncée du 1024×768.

Si vous êtes fan de stats allez faire un petit tour sur le site du w3schools, le site est en anglais mais vous y trouverez un tableau très intéressant sur l’évolution des résolutions suivant les années.

Un site qui s’adapte à la résolution d’écran

Si vous désirez que votre site Internet s’adapte à toutes les résolutions possibles il vous faudra utiliser des pourcentages pour les différentes éléments de votre page, par exemple si vous voulez divisez votre page en 3 parties  vous pourrez appliquer : une largeur de 20% pour la colonne de droite, 60% colonne du milieu et 20% colonne de droite.

Ces sites ayant pour buts d’être déformés il faudra éviter de choisir cette méthode si l’on a un site entièrement basé sur des images car elles s’adaptent difficilement au changement de résolutions.

Et les minis-PC alors ?

Aaaaaaaaaaaah ne me dites pas que maintenant on va devoir repasser en 800×600 parce que quelques hurluberlus on décidé de faire un coup marketing en inventant les minis-PC ? Je vous rassure, l’usage de ces machines ultra portables est encore minime par rapport aux écrans de PC Portable classiques (13 et 15 pouces) cela nous sauve (pour le moment) du tant redouté 800×600 px !!