HTML

Mise en forme d’un document et compatibilité

Résolution minimale ou le canevas - Fini l’horrible barre de défilement

La question des questions, dois-je designer mon site pour une résolution de 640x480 ou pour celle de 800x600 ? Il existe deux écoles de pensées où la véracité du débat reste très technique. D’un côté les vendeurs veulent rendre accessible leur site au plus grand nombre possible de visiteurs alors que de l’autre désigne ce laisser aller comme étant un frein au développement.

Quant à moi, si j’opte pour une résolution 640x480 c’est tout simplement pour respecter le standard VGA (640x480), et la liberté d’accès à l’information. C’est pourquoi j’utilise une largeur maximum de 550 pixels pour mon vieux Performa LC-630 et pour les millions d’utilisateurs pour qui l’investissement d’un ordinateur n’est pas une priorité. Je ne pense que le web doit être motivation au développement mais jamais au détriment de son premier mandat qu’est la diffusion à grande échelle. Un peut d’imagination, l’utilisation de table relative en pourcentage, et le tour est joué.

Le grand défaut d’une résolution plus large que 600px est sans doute l’impression. Perdre une partie d’un document lors de l’impression n’est pas agréable. La solution est souvent d’offrir une version imprimable, sinon le format 600x480 est souhaitable.

Enfin mon rôle n’est pas de faire prendre une décision mais d’informer sur les mesures à prendre en tenant compte des résolutions les plus utilisées en fonction des besoins. Votre site n’est peut-être pas destiné au grand public.

À ceux qu’il importe d’être universel, StatMarket, spécialiste des habitudes de navigation, vous aideront à prendre une décision avisée : http://statmarket.com

Les navigateurs, en raison des éléments mêmes du navigateur ou du système d’exploitation présent à l’écran, ont une aire visible plus petite que la résolution maximale de l’écran. En admettant que les marges par défaut sont à zéro, le tableau ci-dessous démontre les différences entre navigateurs.

Une autre complication. Plusieurs internautes utilisent Microsoft Office avec la barre du logiciel à l’écran. Ce menu par défaut est à droite et utilise 43 pixels. Cette barre peut aussi être déplacée en haut ou en bas de l’écran, utilisant ainsi 32 pixels. N’oubliez pas qu’une fenêtre de navigateur n’est pas toujours en mode plein écran.

Par expérience je sais que plusieurs hommes d’affaires aiment à voir leurs fenêtres en cascade en particulier sur un portable, ce qui diminue d’autant l’espace disponible. Et finalement, les passablement vieux Macintosh n’ouvrent jamais une nouvelle fenêtre à la pleine grandeur.

Le tableau suivant vous recommande différent scénario.

	Navigateurs	640x480 largeur/width	640x480 hauteur/height	800x600 largeur/width	800x600 hauteur/height
	IE 5.x (Win)	600	275	760	395
	NN 4.5+ (Win)	604	294	764	414
	NN 4.0x (Win)	604	294	764	414
	NN 4.5+ (Mac)	592	309	752	429
	NN 4.0x (Mac)	582	315	742	435
	IE 4.x (Win)	600	275	760	395
	IE 4.5x (Mac)	563	318	723	438
	IE 4.0x (Mac)	574	321	734	441
	NN 3.x (Win)	600	270	760	390
	NN 3.x (Mac)	582	306	742	426
	IE 3.x (Win)	613	276	763	396
	IE 3.x (Mac)	598	317	758	437

	Scénario pour	640x480 largeur/width	640x480 hauteur/height	800x600 largeur/width	800x600 hauteur/height
	Tous les navigateurs, tous systèmes d’exploitation (avec la barre MS Office)
		557	270	717	390
	Tous les navigateurs, tous systèmes d’exploitation (sans la barre MS Office)
		563	270	723	390
	Navigateur 4.0+, sur PC (sans la barre MS Office)
		600	275	760	395

Mesures en pixels
Source : Webmonkey

Bien sûr il n’y a pas de solution miracle. Les recommandations n’offrent que bien peut d’espace utilisable mais vous serez en mesure d’affirmer que tous les internautes voient vos pages sans l’aide de l’horrible barre de défilement. C’est au moins un bon point de départ.

Avant même de commencer à coder une page, bien des webmestres utilisent Photoshop pour créer un design. Bien que le résultat ne soit jamais identique, à l’aide de modèles on peut présumer de l’apparence d’un design affiché sous différent navigateurs.

Pour bien préparer le design de vos pages selon votre choix de résolution, je vous invite à télécharger deux fichiers Photoshop qui contiennent les modèles de tous les navigateurs et système d’exploitation. Malheureusement Netscape 6 n’est pas inclus.

En format ZIP : 640x480.zip ou 800x700.zip.

» Suite La grandeur du texte