DETERMINER LA LARGEUR DE PAGE D'UN SITE et LES RESOLUTIONS d'ecran dossier par Clochar SOMMAIRE 1. LES RESOLUTIONS d'ecran... 1 2. RESOLUTION de l écran et choix de la TAILLE DE LA PAGE... 2 3. AGRANDISSEMENT OU DIMINUTION DU CHAMP VISIBLE A L'ECRAN PAR LE VISITEUR... 3 La construction d'un site suppose le choix de la largeur de page et donc en fait de la résolution d'écran pour laquelle on veut optimiser le site 1. LES RESOLUTIONS d'ecran Ne pas confondre la hauteur physique en cms d un écran et sa hauteur de résolution en pixels Un écran plus grand physiquement a généralement un réglage de résolution en pixels aussi plus élevée ; mais ce n est pas obligatoire. Si 2 écrans de hauteurs physiques différentes, ont la même résolution en pixels, les pixels seront physiquement plus gros sur l écran le plus haut, mais ce qui sera vu sera strictement identique. La résolution d'écran la plus utilisée est (largeur*hauteur) 1280*1024 pixels en format 4/3 En dessous on a les résolutions 1024*768 et 800*600 (cette dernière, n'est pratiquement plus utilisée) toujours en format 4/3 Avec l'apparition des écrans wide les résolutions utilisées augmentent rapidement et la convergence avec les écrans de télévision fait qu'on s'oriente à terme vers la résolution dite "haute définition" de 1980*1080 sur des écrans de 22 à 24 pouces. Donc à bientôt pour des pages 2 fois plus larges! Un site se présente différemment selon la résolution de l écran utilisé par l internaute. Les deux largeurs d'écran standards sont : - 1240 ou plus grand utilisé pratiquement par 3 internautes sur 4 (75%) - 1024 utilisé pratiquement par 20% des internautes - résolutions plus basses utilisés par le reste soit environ 5% chiffres au 31/12/2009 On peut donc dire qu'au début de 2010 prés de 95% des écrans ont une largeur égale ou supérieure à 1024 pixels et cela quelle que soit leur taille physique du 17 pouces au 24 pouces C'est pourquoi afin que les pages ne soient pas tronquées en largeur ce qui est très agaçant pour les internautes qui visitent un site, c'est cette résolution qui est prise, en 2010, comme référence et non plus l'ancienne résolution de 800*600 qui est maintenant devenue obsolète, Par ailleurs selon le navigateur utilisé les sites écrits en langage HTLM présentent le défaut majeur d'avoir une mise en page qui diffère. les navigateurs utilisés par les Internautes sont : Internet Explorer pour 60 % et pourtant, celui qui répond le moins aux normes Firefox pour 30% Chrome. pour 10% avec les suivants Opéra Safari chiffres au 31/12/2009 Dossier: Largeur de page et résolution d'écran 1
C'est pourquoi les pages des sites écrits en HTLM, le langage de base, sont souvent "clichées " (c'est à dire transformées en images) pour éviter cet inconvénient mais alors leurs modifications sont difficiles. 2. RESOLUTION de l écran et choix de la TAILLE DE LA PAGE Largeur de page : Si on construit le site sur une largeur de 1024 pixels (c-a*d pour une résolution 1024*768), la page sera tronquée latéralement sur un écran de résolution 800*600 (1 machine sur 20) et laissera au contraire deux bandes latérales vides sur 3 machines sur 4 en resolution supérieure. Sur un écran wide ces bandes latérales seront plus importantes (Remarque : Si on met une couleur en fond de page ces bandes pourront être aussi colorées à l identique, ce qui atténuera l'effet de bande latérale) Quand une page est tronquée sur les cotés, il apparait un ascenseur HORIZONTAL en bas de l'écran, pour permettre de visualiser toute la largeur de la page, ce qui nuit à la présentation du site. Il est par contre difficile d éviter l ascenseur vertical, car sinon les pages sont très courtes et ne renferment pas suffisamment d information. Cependant, on conseille souvent que la première page d'accueil, que l'internaute voit quand il appelle le site, soit "pleine page" et donc limitée dans sa hauteur. Voyons quelle doit être la taille d une page pour être entièrement visible à l écran sans aucun ascenseur horizontal ou vertical. Comme le cadre réel d une page vue dans un navigateur dépend de la résolution de l écran de l utilisateur, nous prendrons dans notre exemple une résolution de 1024*768 Théoriquement si on voulait qu une page du site s affiche en plein écran, il faudrait lui donner comme taille celle de la résolution de l écran de l utilisateur. Pour une résolution de 1024*768 on devrait donc choisir une page de 1024*768 pixels. Mais dans un navigateur une partie en haut et une plus petite partie en bas de l écran sont utilisées par les barres du navigateur lui-même, donc la hauteur visible pour notre image est moins haute. Pour en tenir compte il est donc nécessaire de réduire sa hauteur Ainsi pour un écran dont la hauteur de résolution est de 768 pixels on la réduit à 560 pour tenir compte de la place utilisée au maximum par les barres d'un navigateur chargé. Quant à la largeur elle serait tout simplement de 1024 Mais si maintenant on choisit d avoir un ascenseur vertical, la hauteur de la page pourra très bien être plus grande quoique pour des questions d ergonomie et de maniement du site on essaye de ne pas dépasser 4 fois la hauteur standard de l écran (cette hauteur apparaissant alors relativement plus faible avec une résolution verticale plus grande; le maxi est de 2880 pixels avec WA publié en Flash et 30 000 pixels avec WA publié en HTML (50 fois la hauteur de l'écran!) Cependant maintenant dans la largeur de page, il faudra tenir compte de la largeur de l ascenseur vertical situé à droite de l'écran et qui diminue donc la largeur d'écran utile; ainsi au lieu de 1024 on choisira une largeur de 1000 le choix d'une largeur de page de 1000 pixels, au 1er janvier 2010, est semble-t-il l'optimal. Une autre idée intéressante pour choisir la largeur est de se baser sur la résolution d'écran de 1280*1024, qui est valable, quand même maintenant, pour près de 75% des écrans des utilisateurs L'image aura dans ce cas une largeur de 1250 pixels On construira la maquette de façon à avoir deux bandes latérales de même largeur avec les à-côtés du site (menus, news etc ) et une partie principale du texte située au milieu qui ne dépasse pas en largeur les 1000 pixels. Ainsi, si l'image est centrée sur son écran (ce qui est programmable au départ de la construction du site), l utilisateur en résolution plus basse 1024*768, n'est pas obligé d utiliser l ascenseur horizontal pour lire le texte principal, à son aise Hauteur de la page La hauteur du champ du site est généralement plus longue que la hauteur de l'écran et on utilise un ascenseur latéral pour se déplacer. Dossier: Largeur de page et résolution d'écran 2
La surface visible est souvent "mangée" par des barres variées que l'internaute a installées sur son écran; on peut nettoyer l'écran du visiteur de toutes ses barres pour améliorer le champ visuel en lui proposant un bouton Voir SCRIPTS Si on met un texte est dans un cadre qui a lui-même un ascenseur vertical, il plus ergonomique de ne pas avoir a utiliser les 2 ascenseurs, celui du texte et celui de la page, en alternance; donc si le cadre du texte est flanqué un ascenseur vertical, on a intérêt a ce que la hauteur du cadre ne dépasse pas la hauteur visible de l'écran. Si on se base sur un écran de 1204x1024, on prendra une hauteur maxi d'environ 850 pixels pour la zone de texte.(maxi 600 pour 104x768) Extension de la couleur de fond à tout l'écran Même si le champ du site ne remplit pas tout l'écran on peut pour atténuer l'importance des bandes latérales faire que ces bandes soient de la même couleur que le fond du site En effet la couleur de fond du champ du site peut être étendue automatiquement sur tout l'écran si paramètre cette option pendant la construction de la page CHOIX des COULEURS Les couleurs utilisées pour le site, peuvent ne pas exister sur l'écran du visiteur. Si on est loin des écrans en 16 couleurs, tous les écrans actuels ne sont pas réglés en True Color. Par ailleurs les couleurs qui ne sont pas de base sont parfois moins bien rendues selon le réglage colorimétrique de l'écran du visiteur. C'est la raison pour laquelle la palette basique de proposition de couleurs comprend 360 couleurs Dans l'emplacement encerclé, il n'y a pas moyen de taper un code d'une couleur connue,. Vous devez cliquer sur le bouton multicolore, devant la pipette, qui vous renvoie vers la fenêtre standard de Windows pour le choix d'une autre couleur. 3. AGRANDISSEMENT OU DIMINUTION DU CHAMP VISIBLE A L'ECRAN PAR LE VISITEUR Sur un site publié en HTML l'internaute peut utiliser les combinaisons de touches " Ctrl ", " + " et " - " pour zoomer rapidement sur l'image vue à l'écran Avec Ctrl et +, il agrandit l'image Avec Ctrl et -, il rétrécit l'image ou mieux encore la touche Ctrl associée à la roulette de la souris On voit donc que la résolution choisie pour créer un site qui sera publié en HTML, ne doit pas gêner un internaute, s'il sait se servir de ces touches pour adapter le site au mieux de la resolution de son écran. Par expérience, je sais que ce n'est pas le cas et il pourrait être intéressant d'indiquer, à l'internaute, cette possibilité de zoom, dans la page d'accueil du site Dossier: Largeur de page et résolution d'écran 3
Remarque: Pour chaque navigateur l'augmentation ou la diminution de l'image du site, par Ctrl+ et Ctrl-, est légèrement différente. Malheureusement, les touches Ctrl+ et Ctrl- qui permettent de zoomer sur l'image vue à l'écran ne fonctionnent pas sur un site publié en Flash Remarque Souvent les constructeurs de site se demandent s'il n'y aurait la possibilité de faire un site qui s adapte automatiquement à la résolution de l écran La réponse est : Oui, mais pas avec le logiciel Web Acappella; il faut utiliser alors des logiciels plus complexes et connaitre un minimum de programmation Il y a plusieurs techniques pour construire de tels sites. Voir une discussion à ce sujet sur: http://www.alsacreations.com/tuto/lire/547-faire-un-site-pour-toutes-les-resolutions.html Vous trouverez ici et là des scripts appelés " votre site en plein écran" ; il s'agit en fait de scripts qui comme nous l'avons vu plus haut nettoient l'écran du navigateur des barres superflues, mais qui ne modifient pas la taille du champ du site pour l'adapter à la largeur d'écran. Rappelons que Web Acappella est un logiciel facile à utiliser et qu'il a les inconvénients de ses avantages. La possibilité de publier son site en HTML, alors qu'on utilise la technique Flash pour sa construction, s'améliore au fil des versions et nous pouvons espérer que, d'ici quelques temps, la publication en HTML des sites Web Acappella sera aussi nette que lors de leur publication en Flash Dossier: Largeur de page et résolution d'écran 4
OPTIMISATION pour PETITE RESOLUTION page en 1000 pixels de large Sur un écran en resolution1024*768 Le champ du site va couvrir toute la largeur de ²l'écran Sur un écran en résolution 1240*1024 : le champ du site ne remplit pas l'écran; laissant des parties vides sur les côtés Sur un écran wide très haute définition panoramique 1900*1090 l'image est encore plus petite avec de grandes bandes sur le côté et une bande en dessous Cependant dans ces 2 derniers cas, la couleur de fond du champ du site peut être étendue automatiquement sur tout l'écran si on le paramètre pendant la construction de la page Dossier: Largeur de page et résolution d'écran 5
OPTIMISATION pour GRANDE RESOLUTION Page de 1220 pixels de large et 750 pixels de haut Sur un écran en résolution de 1240*1024 le champ couvre l ensemble de l'écran. Sur un écran en résolution 1024*768 le champ du site ne rentrera pas dans la totalité de l'écran et demandera pour en voir la totalité.. l utilisation des ascenseurs vertical mais surtout horizontal Sur un écran wide très haute définition 1900*1090 l'image couvrira bien la hauteur mais aura 2 bandes larges sur le côté Dossier: Largeur de page et résolution d'écran 6
Remarque Je connais un site publié en Flash (de quelques pages il est vrai) qui a été dédoublé et construit 2 fois pour les 2 définitions; 1027*768 et 1240*1024. Dans la page d'accueil commune aux 2 sites l'internaute est amené à choisir sa résolution d'écran (comme on pourrait le faire pour la langue sur un site multilingue) grâce au fait qu'il voit ou ne voit pas à l'écran une petite image située dans un coin ( ce qui évite qu'il se demande : "Mais qu'est que c'est que la résolution d'écran") Ici un petit script HTML pour à partir de la page d'accueil aller directement sur l'un des sites dont la largeur correspond le mieux à la résolution de l'écran du visiteur Il faut développer un page index par résolution et y accéder ainsi par la page d'entrée (index de base) : <script language="javascript"> if (screen.width < 1200) { document.location="index1024.htm"; } else { document.location="index1240.htm"; } </script> Dossier: Largeur de page et résolution d'écran 7