Memo de la maquette web

Composition

• L’habillage graphique d’un site doit fournir des repères permanents et stables pour naviguer dans le site. L’emplacement du menu principal de navigation est identique sur toutes les pages.
  Cf. : Bonnes pratiques N°70 et N°67, Utiliser les conventions, Où suis-je ?, Fiches AccessiWeb 12.1, 12.2, etc.
• Les couleurs ne doivent pas être indispensables à la compréhension : le site doit rester consultable en 256 couleurs et/ou en noir & blanc. Prévoir des couleurs contrastées pour les menus, les textes et liens.
  Cf. : Bonne pratique N°63, Fiches AccessiWeb 3.1 et 3.2, Les couleurs de l’accessibilité dans Internet, Color Scheme Generator 2
• Les éléments graphiques ne doivent pas être indispensables à la navigation : le site doit rester consultable lorsque les images, les plugins (dont Flash) et les scripts (dont JavaScript) sont désactivés.
  Cf. : Bonnes pratiques N°1, N°5, N°148, Fiches AccessiWeb 7.1 et 7.2

Hyperliens

• Pour qu’ils soient facilement identifiables, les hyperliens doivent être visuellement différenciés du reste du contenu.
  Cf. : Bonne pratique N°47, Rendre évident ce qui est cliquable
• Pensez à différencier les liens dans leurs différents états : survolé, actif, visité, non-visité et courant. La maquette graphique sera donc constituée de calques superposés présentant les variantes pour ces différents états (pour les liens textuels, boutons, onglets, etc.).
  Cf. : Bonnes pratiques N°190 et N°52, CSS : on reprend tout à zéro ! (épisode 6)
• Les liens internes et externes sont différenciés.
  Cf. : Bonnes pratiques N°50 et N°51, Signalement des liens externes

Textes

• N’oubliez pas que la taille du texte est fixée par l’utilisateur final. Concevez donc la maquette de façon à ce qu’elle supporte l’agrandissement, possiblement conséquent, des textes : en évitant les colonnes à hauteur fixe ou trop étroites en largeur. Les textes doivent pouvoir s’écouler dans les blocs étirables en hauteur.
  Le texte doit aussi supporter le rétrécissement, sachant qu’un corps de 10 pixels est la limite en dessous de laquelle il ne faut pas descendre pour préserver la lisibilité.
  Cf. : Bonne pratique N°4, CSS : on reprend tout à zéro ! (épisode 3), Changer la taille du texte
• Précisez une famille de plusieurs polices ressemblantes, de façon à ce que l’une puisse remplacer l’autre, lorsque la police de préférence n’est pas disponible sur l’ordinateur de l’internaute. Par exemple : font-family: Tahoma, Verdana, Helvetica, sans-serif;
  Cf. : Bonnes pratiques N°170 et N°73, Lisibilité et typographie web, Typetester
• À limiter à des usages moindres, parce qu’amoindrissant la lisibilité à l’écran : police à empattement, italique. Mieux vaut tirer profit du gras et des couleurs. Le soulignement est strictement réservé aux hyperliens.
  Cf. : Bonne pratique N°163
• Lorsque l’on souhaite un effet typographique exotique, on remplace le texte par une image : à utiliser si nécessaire et avec modération, car dommageable pour le poids de la page, son accessibilité et son référencement. Sur LE titre de page seulement, par exemple.
  Cf. : Fiche AccessiWeb 1.9, Mettre un titre en image et rester accessible

Formulaires

• Ne pas oublier le formulaire de recherche interne ! Il doit être positionné de façon à être visible dans la fenêtre, sans avoir besoin de scroller : de préférence en haut de page, immédiatement accessible.
  Cf. : Bonne pratique N°60, La boîte de recherche
• L’affichage des éléments de formulaire différe beaucoup d’un navigateur à l’autre, si bien qu’il vaut mieux s’en tenir à des choses simples.
  Cf. : CSS : on reprend tout à zéro ! (13ème épisode)
• Pensez à habiller les messages de réponse des formulaires, à signaler les champs obligatoires ou incomplets et à laisser la place à la prévisualisation avant envoi.
  Cf. : Bonnes pratiques N°38, N°202, N°36, N°193, N°194, N°195, etc.

Multimédia

• Prévoir la place pour les mentions techniques (poids, durée, taille/durée, format du fichier et plugin requis) des fichiers (images, PDF, vidéos, etc.) proposés à la consultation ou en téléchargement.
  Cf. : Bonnes pratiques N°79, N°32, N°34, N°161, Fiches AccessiWeb 4.1 et 4.2

Mentions obligatoires

• Le nom du site, de l’auteur ou de l’entité est indiqué sur chaque page, ainsi que les droits de reproduction, le nom de la personne responsable et au moins un moyen de la contacter. Prévoyez donc l’emplacement de ces mentions (souvent en pied de page).
  Cf. : Bonnes pratiques N°42, N°18, N°53, N°57, Les pieds (de page) dans le plat