Avertissement Cette page Web a été archivée dans le Web..

Contenu archivé

Information archivée dans le Web à des fins de consultation, de recherche ou de tenue de documents. Cette dernière n’a aucunement été modifiée ni mise à jour depuis sa date de mise en archive. Les pages archivées dans le Web ne sont pas assujetties aux normes qui s’appliquent aux sites Web du gouvernement du Canada. Conformément à la Politique de communication du gouvernement du Canada, vous pouvez obtenir cette information dans un autre format en communiquant avec nous.

Fiche technique : Création de pages Web conviviales

Introduction

Ce document donne quelques conseils généraux relatifs à la conception de pages Web conviviales, qui assurent notamment :

l'accès à votre contenu et un téléchargement rapide,
la meilleure accessibilité possible pour les utilisateurs.

Pour plus de détails sur les façons d'assurer l'accessibilité à vos pages Web pour les personnes qui peuvent avoir des difficultés à voir, entendre, déplacer ou traiter certains types d'information, veuillez consulter le document Accessibility Guidelines rédigé par le World Wide Web Consortium (W3C).

1.1.1 Conseils généraux relatifs au fonctionnement

Vos pages doivent être accessibles et entièrement fonctionnelles dans la version à jour des navigateurs courants, à savoir :

Netscape, version 4.7 ou plus récente,
Internet Explorer (IE), version 5 ou plus récente.

Des sondages récents menés pour le site du RCIP et pour le Musée virtuel du Canada ont montré que 60 % des utilisateurs se servent d'Internet Explorer, alors que 25 % utilisent Netscape. Il est conseillé de tester votre site avec ces deux navigateurs afin de vous assurer qu'il fonctionne dans l'environnement informatique de la majorité des utilisateurs. Vous pouvez également faire des tests avec d'autres navigateurs disponibles.

Lorsque vous créez des répertoires, employez si possible des adresses relatives, p. ex. ../../francais/index.html. Cela accélère le temps de téléchargement pour les utilisateurs car ils peuvent rapidement recharger les pages mises en antémémoire.

Veillez à toujours mettre les marqueurs de fin des balises HTML :

</P>, </UL>, </TABLE> ,</B>

Cela permet aux agents logiciels (dispositifs d'assistance tels que lecteurs d'écran, agrandisseurs d'écrans et logiciels de reconnaissance de la parole) des utilisateurs d'interpréter vos données.

1.1.2 Polices de caractères

Veillez à employer des polices vectorielles TrueType (TTF) afin que votre contenu s'affiche correctement dans divers environnements. Verdana, Arial et Garamond sont des exemples de polices TrueType.

Remarque :

Dans un environnement Macintosh :

les polices de moins de 9 points ne s'affichent pas bien,
les caractères gras des polices de moins de 11 points ne sont pas affichés.

1.1.3 Couleurs

Certains anciens systèmes disposent d'une palette de couleurs limitée, dont les paramètres peuvent varier. Pour assurer que votre contenu puisse être visualisé de manière standard, employez le code hexadécimal de l'une des 216 " couleurs de base " du Web. Ex. : H1 {COLOR: #FF0000}.

Vous trouverez la palette des couleurs de base du Web à l'adresse URL http://www.webmonkey.com/reference/color_codes/.

Dessinez tout élément graphique d'arrière-plan avec la résolution et le nombre de bits (nombre de couleurs) les moins élevés possible, afin qu'ils aient la même apparence dans divers environnements.

1.1.4 Disposition

Spécifiez l'ensemble des marges, images d'arrière-plan, ainsi que les balises de couleur et de texte à l'intérieur de la balise <BODY>, afin de pouvoir utiliser toute la surface de la fenêtre et d'assurer l'affichage correct de la page. Vérifiez bien comment votre page s'affiche à différentes résolutions, en particulier 640 ´ 480 et 800 ´ 600. Selon des statistiques récentes de statmarket.com, 7 % des utilisateurs regardent les sites Internet à une résolution de 640 ´ 480, 53 % à 800 ´ 600, et 31 % à 1 024 ´ 768.

http://www.websidestory.com/company/news-events/press-releases/view-release.html?id=30

Un exemple de codage des spécifications d'affichage est donné à l'adresse URL.

1.1.5 Événements onMouseOver

Vous pouvez vous servir des événements onMouseOver (déclenchés lorsque l'utilisateur amène la souris à un endroit donné) pour maximiser l'information affichée dans une page.

L'emploi de l'événement onLoad à l'intérieur de la balise <BODY> permet de télécharger au moment du chargement de la page les commandes associées à toutes les images qui changent lorsque l'utilisateur y amène le pointeur de la souris. Ainsi, lorsque l'utilisateur amène le pointeur de la souris sur une image, ces commandes sont déjà présentes en antémémoire.

Un exemple d'utilisation de l'événement onLoad est donné à l'adresse URL.

1.1.6 Fenêtres

Réduisez autant que possible le nombre de fenêtres qui peuvent être ouvertes en même temps. Les réalisateurs de site devraient revoir les politiques relatives à la navigation d'une fenêtre à l'autre pour chaque ressource en ligne.

Si une ressource exige l'ouverture d'une autre fenêtre qui en complète le contenu, l'utilisateur devrait pouvoir constater de manière évidente qu'une autre fenêtre ou une autre occurrence du navigateur a été ouverte (par exemple, en superposant une fenêtre plus petite sur celle qui est déjà ouverte).
Essayez de gérer les fenêtres de manière à ne pas toujours ouvrir de nouvelles fenêtres, en créant des scénarios de navigation qui réutilisent les fenêtres déjà ouvertes.
Veillez autant que possible à ce qu'aucune ressource ne provoque l'ouverture de plusieurs fenêtres à la fois.

1.1.7 Mise à jour de l'information

Si vous mettez souvent à jour une page Web et que vous voulez éviter que les utilisateurs voient une version précédente conservée en antémémoire, ajoutez la commande ci-dessous à votre page. L'attribut HTTP-EQUIV="EXPIRES" est reconnu par la plupart des navigateurs.

1.1.8 Tableaux

1. Le fait de subdiviser un gros tableau en plusieurs petits tableaux accélère le téléchargement. Ces tableaux multiples s'affichent pour l'utilisateur comme un seul tableau :

NUMÉRO DE TABLEAU	NUMÉRO DE LIGNE
Tableau 1	Ligne 1
Tableau 1	Ligne 2

Tableau 2	Ligne 1
Tableau 2	Ligne 2
Tableau 2	Ligne 3
Tableau 2	Ligne 4

Tableau 3	Ligne 1
Tableau 3	Ligne 2
Tableau 3	Ligne 3

<tr><td> NUMÉRO DE TABLEAU </td><td> NUMÉRO DE LIGNE </td></tr>

<tr><td>Tableau 1</td><td>Ligne 1</td></tr>

<tr><td>Tableau 1</td><td>Ligne 2</td></tr>

</table>

<tr><td>Tableau 2</td><td>Ligne 1</td></tr>

<tr><td>Tableau 2</td><td>Ligne 2</td></tr>

<tr><td>Tableau 2</td><td>Ligne 3</td></tr>

<tr><td>Tableau 2</td><td>Ligne 4</td></tr>

</table>

<tr><td>Tableau 3</td><td>Ligne 1</td></tr>

<tr><td>Tableau 3</td><td>Ligne 2</td></tr>

<tr><td>Tableau 3</td><td>Ligne 3</td></tr>

</table>

D'autres manières d'accélérer le chargement des tableaux sont illustrées à l'adresse URL.

1.1.9 Règles concernant le codage des langues

Les codes HTML doivent tenir compte des règles typographiques de chaque langue. À titre d'exemple, les signes de ponctuation suivants doivent être précédés d'un blanc insécable ( ) en français mais non en anglais : point d'exclamation, point d'interrogation, deux-points, point-virgule.

Le fait d'indiquer la langue d'un document à l'aide de l'attribut LANG permet aux agents logiciels de l'utilisateur d'interpréter le texte. Pour faciliter la tâche de ces agents, vous devez également indiquer s'il y a lieu les changements de langue dans le corps d'un document.

Français : <HTML LANG="fr">

Anglais : <HTML LANG="en">

Espagnol : <HTML LANG="es">

Allemand : <HTML LANG="de">

Étant donné que l'orthographe de certains mots change selon le pays (p. ex. color et colour), vous devriez également indiquer le sous-code de pays. Cela aide les agents logiciels de l'utilisateur à déterminer les règles de ponctuation et de coupure de mots. Le code de l'anglais du Canada est en-ca, et celui du français du Canada est fr-ca.

Ex. : <HTML LANG="en-ca">

Il faut employer les codes HTML standard pour tous les caractères spéciaux et accentués.

Dans un attribut ALT ou une balise <TITLE>, il se peut que le code d'un caractère spécial ou accentué soit affiché au lieu du caractère qu'il représente. Si cela se produit, mettez le caractère accentué lui-même au lieu de son code. Mettez par exemple <<é>> au lieu de <<é>>.

1.2 Images

Il est conseillé de faire en sorte qu'aucune page Web, y compris toutes ses composantes telles que les images, ne prenne plus de 10 secondes à télécharger avec un modem de 56 Kbits/s (environ 60 Ko au total). S'il y a des images volumineuses qui prennent trop de temps à s'afficher, il se peut que l'utilisateur supprime l'affichage des images ou qu'il quitte votre site. En général, les images sont les éléments les plus encombrants d'une page.

Le tableau suivant donne le temps approximatif de téléchargement d'une page Web en fonction de sa taille et du débit du modem.

Modem	10 Ko	30 Ko	50 Ko	100 Ko	500 Ko	1000 Ko
14,4 Kbits/s	6,4 s	19 s	32 s	64 s	320 s	640 s
28,8 Kbits/s	3,2 s	9,6 s	16 s	32 s	160 s	320 s
56 Kbits/s	1,6 s	4,9 s	8,2 s	16 s	82 s	165 s
T1	0,1 s	0,2 s	0,3 s	0,6 s	3,2 s	6,4 s
Câble	0,1 s	0,2 s	0,3 s	0,5 s	2,6 s	5,2 s

Tableau adapté de http://www.bri-mar-dit.com/FYI/DOWNLOAD.HTM

Voici quelques lignes directrices à suivre pour accélérer le téléchargement d'images.

Réduisez la taille des fichiers d'image. Certains programmes de traitement graphique ont des fonctions spéciales d'optimisation d'éléments graphiques pour le Web.
Servez-vous du format de fichier GIF, qui prend en charge 256 couleurs, pour des éléments graphiques tels que vignettes, bannières, boutons de navigation, etc. La diminution du nombre de couleurs dans un fichier GIF a pour effet de réduire la taille du fichier.
Le format de fichier JPEG, qui prend en charge plus de 16 millions de couleurs, est très employé pour des photographies et autres images avec des dégradés de couleurs qui doivent être affichées dans le Web avec toutes leurs nuances.
Notez que ces deux formats comportent un algorithme de compression qui réduit la taille des fichiers.

Vous trouverez d'autres renseignements sur l'optimisation de graphiques pour le Web à l'adresse URL http://www.webreference.com/dev/graphics/index.html.

Si un fichier d'image est encore volumineux après optimisation, il faut le structurer en tranches. On peut optimiser des images à l'aide de logiciels tels que ImageLab d'Adobe ou Fireworks de Macromedia.
Spécifiez les dimensions des images à l'aide des attributs WIDTH et HEIGHT de la balise <IMG>. En faisant cela, vous réservez l'espace voulu dans la page, et le navigateur n'a pas à rafraîchir l'écran après le chargement des images. (Rien ne s'affiche dans cette partie de la page, et ce même si l'image n'est pas chargée.) N'utilisez pas les attributs WIDTH et HEIGHT pour redimensionner une image, servez-vous en uniquement pour spécifier sa taille réelle.

Exemple :

Conseils supplémentaires pour accélérer le téléchargement :

N'employez pas d'icônes, de graphiques et de photographies inutiles. Évitez d'utiliser des images pour afficher des mots avec des polices spéciales. Il vaut mieux coder les changements de police en HTML à l'aide des balises <FONT>, <B>, <I>, etc., plutôt que de créer des images des mots.

Au lieu d'encombrer votre page de grandes images, mettez des vignettes et des liens vers les images originales. Indiquez la taille (en kilo-octets) et le format de fichier des images originales, afin que l'utilisateur puisse connaître la taille et le type des fichiers avant de les télécharger.

Réutilisez les images lorsque c'est possible. Une fois téléchargée, une image peut être chargée à nouveau rapidement lorsqu'elle est appelée dans un document en HTML. Chaque appel au protocole HTTP exige du temps supplémentaire pour la transmission de l'image par le serveur et son affichage par le navigateur, à moins que la même image mise en antémémoire ne soit réutilisée dans la page Web.

Vous trouverez d'autres renseignements sur l'accélération du téléchargement à l'adresse URL http://www.submitcorner.com/Guide/Bandwidth/.

1.3 Validation et contrôle de qualité du code HTML

Effectuez un contrôle de qualité de votre contenu. Vérifiez entre autres tous les liens internes et externes, et validez le code HTML. Lorsque vous validez vos documents, assurez-vous que votre DTD (définition de type de document) correspond à la bonne version de HTML. Testez toutes les pages avec Internet Explorer 5 et Netscape 4, ainsi que dans divers environnements informatiques (différentes résolutions d'écran, IBM-PC, Macintosh, etc.)

Pour effectuer le contrôle de qualité, vous pouvez recourir à des produits tels que Bobby pour l'accessibilité selon les règles de W3C, et à d'autres outils pour l'analyse du temps de téléchargement et la validation du code HTML.

Des outils de validation sont accessibles aux adresses URL suivantes :

W3C HTML Validation Service URL: http://validator.w3.org/
W3C CSS Validation Service URL: http://jigsaw.w3.org/css-validator/
W3C HTML Link Checker URL: http://validator.w3.org/checklink

1.4 Formats de fichier

Si vous créez un lien vers un fichier multimédia volumineux, indiquez le format du fichier et sa taille en méga-octets. Si votre site exige des plugiciels (ou modules externes), il est conseillé d'en aviser l'utilisateur dans la page d'accueil.

Ressources supplémentaires

Des ressources Web supplémentaires seront indiquées ici.

Webmonkey: The Web Developers Resource

www.webmonkey.com

Useit.com: Jakob Nielsen's Website

http://www.useit.com/

Web Site Design Guide

http://www.geocities.com/Athens/4204/index.html

Webreference.com: The Webmaster's Reference Library

www.webreference.com

HTML Help by the Web Design Group

http://www.htmlhelp.com/