Sommaire |
Dimensions et taille de site Web
Un aspect important de la conception graphique de votre site Web est le choix des dimensions ou de la taille de ce dernier.
Le nombre de poste informatique ayant accès à Internet est bien évidement très important, le nombre de types d’affichage qui en découle également. Deux ordinateurs n’ont pas forcement la même carte graphique ni la même taille d’écran. Les différences sont encore plus frappantes en ce qui concerne les terminaux mobiles (téléphone avec navigateur Web, Blackberry, iPod touch …). Les capacités d’affichage s’exprime généralement en terme de résolution : largeur affichable par hauteur affichage (ex : 800 pixels par 600 pixels).
Pour être consultable selon une résolution donnée, la conception graphique du site — son design — doit être rendue compatible avec cette dernière. Pour qu’un site soit consultable sur différents écrans, le design doit être compatible les différentes résolutions correspondantes, ce qui démultiplie les contraintes pour la réalisation de votre site Web.
- 3% d'utilisateurs en 800x600
- 25% en 1024x768
- 56% en résolutions supérieures
(source : w3school, Browser Display Statistics ; W3Counter, Global Web Stats, juin 2010)
Pour être consultable par le plus grand nombre de visiteurs, un site doit être conçu selon une résolution minimale 1024 pixels par 769 pixels (1024x769), et si possible être lisible (avec ascenseurs) dans les résolutions inférieures.
Outre la résolution générale du visiteur, la zone de son écran réellement exploitable pour l’affichage de votre site dans un navigateur Web dépend également des options, barres d’outils et greffon choisi par l’utilisateur.
Les 2 principales approches en terme de dimensions et taille pour le design de site Web sont :
- taille fixe (ex : www.impots.gouv.fr),
- conception fluide (ex : www.openweb.eu.org) : dimensions proportionnelles à la zone d’affichage disponible.
Fixe
Un design Web en taille fixe est conçu pour un affichage optimal dans un cadre largeur x hauteur déterminé. Le site www.3e-oeil.com peut par exemple être affiché dans un cadre de 800 pixels de largeur sur 600 pixels de hauteur. En assurant l’affichage d’un site dans une cadre donné, le design Web fixe vous garantit que ce site sera correctement présenté sur les écrans ayant une résolution égale ou supérieure au cadre : le site www.3e-oeil.com est affichable sur tous les écrans ayant une résolution égale ou supérieur à 800x600.
La définition de cadre de travail, en terme de dimensions, pour la conception graphique d’un site permet de pouvoir simplement et efficacement placés les éléments à afficher dans ce cadre. Si le site est conçu selon une base 800x600 et qu’un menu latéral gauche de 100 pixels doit être affiché, alors on peut déterminer de manière direct que le contenu principal doit être positionné à au moins 100 pixels du bord gauche du cadre. De plus, connaissant les dimensions maximales, il est plus aisé de déterminé les tailles pour les éléments graphique du contenu : dans un cadre 800x600, un image ne devra pas faire plus de 800 pixels de large.
Lorsqu’un site en taille fixe est affiché dans une résolution plus grande, par exemple lorsqu’un site 800x600 est affiché sur un écran dont la résolution va jusqu’à 1024x769, le site peut être collé à gauche, à droite ou au centre.
Fluide
L’approche fluide du design Web vise à supporter l’affichage sur la plus grande variété possible de résolution écran (voir également sur les terminaux mobiles), en ne se basant pas sur un cadre d’affichage défini de manière absolue mais sur les proportions. Au lieu de définir la largeur d’un menu latéral par 100 pixels dans un cadre 800x600, l’approche fluide tend à exprimer la largeur de ce menu par ~12% de la largeur totale.
Ceci est une approche qui peut être très puissant, mais qui n’est pas sans contrainte. Le site doit pouvoir être déformé afin de pouvoir s’adapter aux différents affichages, au différentes résolutions. Dans ce cas, une maquette Web classique (Photoshop) qui prévoit les aspects statiques du graphisme du site ne suffit plus. Pour prendre en compte les contraintes de déformation d’une approche Web fluide, une conception graphique dynamique est également nécessaire : déformation des textes, des images, des fonds et de la disposition.
Textes
Une même texte affiché de manière fluide sur différents affichage subit différentes déformations, y compris celles liées à l’affichage des polices. Un simple affichage plus large du texte, dû à l’affichage de la police de caractère selon l’écran du visiteur, peut suffire à mettre à mal la disposition d’un site : le texte déborde du cadre ou il était censé être affiché, ou encore la zone de texte s’élargit automatiquement mais pousse et bouscule le reste des zones, etc …
 Affichage “normal” du site linuxfr.org |
 Affichage déformé, décalage de texte, sur le site linuxfr.org |
Outre la possibilité de s’adapter à différents modes d’affichage, un site supportant l’agrandissement du texte offre un gain d’accessibilité, permettant par exemple une meilleure lecture pour les visiteurs mal voyants.
Images
Les images doivent également être pensée pour supportées les déformations de taille. Les animations ou images vectorielles (Adobe Flash, SVG) peuvent être agrandies ou réduites sans perte de qualité. En revanche, ces formats sont plus gourmands en terme de calcul pour l’affichage et par conséquence en temps de chargement.
Les formats d’image habituellement utilisés pour la création de site Internet — GIF, JPEG, PNG — peuvent être réduits ou agrandis à l’affichage, mais avec une perte de qualité en fonction de la déformation de taille.
Fonds
Lors de la réalisation d’un design Web fluide, une attention particulière doit également être portée aux fonds. Si votre page Web est affiché avec un fond, il est nécessaire que ce fond continue d’être affiché sur la surface de votre site dans les différentes résolutions.
Afin de permettre aux fonds de supporter les déformations de taille, il faut, lors de la création de votre site Web, prévoir ces derniers de façon à ce qu’ils puissent être répétés. En effet, si les fonds sont prévus de cette manière, il suffira lors d’un agrandissement de les répéter jusqu’à couvrir la nouvelle taille. Les fonds unis ou en motifs, et généralement les fonds en dégradé de couleurs, peuvent être répétés à l’affichage, ce qui n’est pas le cas pour les fonds en images.
 Fond répété (motif) sur le site Yellow Pimento |
 Fond répété (motif) sur le site 3e-oeil.com |
 Fond en dégradé sur le site www.mosaine.com |
Disposition
Dans un design Web fluide, outre les éléments de contenu (texte, images, …) et de décoration (fonds …), l’agencement de l’ensemble de ces derniers, la disposition du site, doit également prendre en compte les contraintes liées aux déformations de taille.
Si votre site est conçu selon une disposition par 2 zones principales — une zone de menu permettant d’accéder aux pages par des liens, et une zone d’affichage du contenu de la page courante —, ces zones doivent pouvoir s’adapter aux différentes résolutions.
Pour ce faire, il n’est pas nécessaire que toutes les zones soient fluides (que toutes les zones supportent les déformations de taille), en revanche les zones centrales doivent le supporter. Dans l’exemple de la disposition avec 1 zone de menu et 1 zone de contenu principal, il est possible que seule la zone de contenu principal soit fluide, c’est alors elle qui “absorbera” les déformations de la disposition, l’autre zone pouvant resté préservée (il existe certaines restrictions à ce genre de mécanisme).
 Affichage large du site openweb.eu.org |
 Affichage réduit du site openweb.eu.org (déformation colonage et textes) |
Conclusion
En théorie, un design Web complètement fluide serait l’idéal, permettant un affichage de votre site Web adapté à la résolution de chaque visiteur.
Dans la pratique, cela peut se révéler complexe, particulièrement dans le cas de sites “très graphiques” (site vitrines) pour lesquels les contraintes d’affichage des images et des fonds s’appliquent alors à plein.
Dans certains cas, un site complètement affiché par le biais d’une animation Flash est une réponse. Il faut alors toutefois considérer les problématiques de référencement Web posées par ce type de solution.
Pour concrétiser un design Web, la solution vient généralement d’un compromis entre l’approche en taille fixe et le design fluide.
Il est par exemple envisageable de concevoir un site en largeur fixe mais hauteur ajustable (fluide) : le site www.lemans.fr est par exemple conçu pour un affichage en largeur 800 pixels, mais la zone de contenu (à droite) peut s’agrandir dans le sens de la hauteur.
Voir également
- Faire un site pour toutes les résolutions (Alsacréation, 10 février 2009)
- Du stretching pour vos sites (Patrick Griffiths, traduit par Sylvain Lelièvre, 9 janvier 2004)
