Quelques Définitions.
La résolution de l’écran est théoriquement le nombre de pixels (que l’on peut représenter) par unité de surface qui est le pouce (inch)
Issu d’un compromis anglo-saxon (en 1959) le pouce est exactement égale à 2.54cm.
Quant au pixel (contraction de « picture element ») est l’unité de base de mesure de la définition d’une image.
Par abus de langage on s’est habitué à mélanger la définition de l’écran avec la résolution, la définition de l’écran est le produit entre le nombre de pixels que peut afficher un écran en horizontale et en verticale, ce qui explique le signe multiplicatif (x) qu’on met entre ses deux valeurs
Le travail du Designer.
Lors de l’étape de conception de l’interface graphique d’un site web (gabarit, template, charte graphique) le designer se pose plusieurs questions relatives tout d’abord au thème de l’interface, à la palette de couleur qui devra être en harmonie avec le sujet du site, au choix d’une bonne police d’écriture (css3 permet d’utiliser des polices « non-standard ») en suivant toute les recommandations d’accessibilité (WAI: Web Accessibility Initiative).
Le Conteneur du site (wrapper).
Lors de la conception de la maquette sur son éditeur graphique (ou lors de la réalisation simple du genre minimaliste) le designer devra choisir une largeur pour l’interface et plus précisément pour le conteneur (wrapper) des éléments du site.
c’est dans ce wrapper qu’on trouvera toute l’interface, il permet de manipuler la totalité du site en css, par exemple si on veut centrer la page du site il suffit de centrer le wrapper, si on veut qu’il soit à droite il suffit de l’aligner à droite, si on veut que le site occupe toute la largeur il suffit de lui donner une taille (width) de 100% et si on veut limiter la largeur du site il suffit encore de donner une taille (width) ou taille maximum (max-width) à ce wrapper 🙂
Un mot sur la Hauteur (height).
Dites vous que la limite en hauteur ne sert à rien, elle ne sera et ne pourra jamais être déterminée
Même si la définition verticale de l’écran est de 1200, rien ne dit quelle sera la taille réelle d’affichage du site, il y a parfois plusieurs barres qui s’ajoutent à la barre des menus de votre navigateur et qui ne laissent parfois que les 3/4 de la hauteur pour afficher le site, Bref …. le sujet et à oublier, par contre pour la largeur le choix se pose.
Résolution Optimale.
Une étude montre que la résolution de base sur laquelle tout tourne est la « 1024×768 ». Le principe et le but de cette étude et d’offrir des stastiques qui seront utilisés lors de la conception graphique et qui permette de voir quelles résolutions permettront de satisfaire un maximum de visiteurs potentiels, par exemple dans le tableau ci dessous on voit très bien qu’il serait préférable d’abandonner carrément l’idée d’un site se basant sur une résolution de 800×600 ou 640×480.
Les résolutions inférieur sont celle des équipements mobiles.
Date | Supérieur | 1024×768 | 800×600 | 640×480 | Inférieur |
---|---|---|---|---|---|
Janvier 2011 | 85% | 14% | 0% | 0% | 1% |
Janvier 2010 | 76% | 20% | 1% | 0% | 3% |
Janvier 2009 | 57% | 36% | 4% | 0% | 3% |
Janvier 2008 | 38% | 48% | 8% | 0% | 6% |
Janvier 2007 | 26% | 54% | 14% | 0% | 6% |
Janvier 2006 | 17% | 57% | 20% | 0% | 6% |
Janvier 2005 | 12% | 53% | 30% | 0% | 5% |
Janvier 2004 | 10% | 47% | 37% | 1% | 5% |
Janvier 2003 | 6% | 40% | 47% | 2% | 5% |
Janvier 2002 | 6% | 34% | 52% | 3% | 5% |
Janvier 2001 | 5% | 29% | 55% | 6% | 5% |
Janvier 2000 | 4% | 25% | 56% | 11% | 4% |
Donc la largeur de base sera 1024pixels, mais attention … de nombreux personnes oublient que selon le contenu il apparait parfois des ascenseurs (scrolling) à droite ou à gauche (selon la langue) ce qui diminue cette taille optimale de 1024 à parfois 1000 pixels, de plus les attributs CSS ne sont pas interprété de la même facon d’un navigateur à un autre, du fait de leur incompatibilité (graphique et tableau d’utilisation des navigateurs) il faudra penser à laisser une dizaine voir plus (selon le nombre d’éléments div et de padding utilisé avec des widths de 100%).