Voici quelques fondamentaux à garder en mémoire dans la conception d’une maquette de site. Il s’agit moins d’être exhaustive que de lister les quelques points spécifiques au Web, à ne pas oublier.
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
Vos commentaires
1. Le 21 mars 2007 à 09:59, par Stéphane Deschamps
En réponse à : Memo de la maquette Web
Attention sur ce truc que nous faisons tous :
font-family: Verdana, Arial, Helvetica, sans-serif;
. Je viens de regarder la présentation de Richard Rutter et Mark Boulton, et ils pointent le doigt là-dessus : .Du coup, effectivement quand tu fais des tests tu sens qu’Arial n’est pas un bon substitut à Verdana.
2. Le 21 mars 2007 à 11:25, par Romy Têtue
En réponse à : Memo de la maquette Web
Aaaaaaaah oui ! Complètement d’accord ! J’ai bêtement repris en exemple la famille typo la plus courante, alors qu’elle est effectivement mal fichue, l’écart de taille entre Arial et Verdana n’étant pas propice au remplacement de l’une par l’autre. Je corrige, tiens ;-)
3. Le 16 novembre 2007 à 02:34, par Sylvie
En réponse à : Memo de la maquette Web
On peut lire
Mémento Sites Web - Les bonnes pratiques - Elie Sloïm - Eyrolles - 15/02/2007 - 14 pages : 5 EUR
Ce mémento, 153 bonnes pratiques du créateur de site web, s’adresse à tous ceux qui souhaitent auditer ou améliorer la qualité d’un site web...
mais c’est écrit en noir et blanc sur fond bordeaux, ça arrache les yeux
4. Le 3 novembre 2010 à 15:26, par Mololux
En réponse à : Memo de la maquette web
Les liens ne sont plus à jour...
Exemple :
http://fr.opquast.com/bonnes-pratiques/fiche/1
est maintenant ici :
http://checklists.opquast.com/11/criteria/500/
Une redirection systématique lors d’un changement d’URL, une autre bonne pratique ?
Répondre à cet article
Suivre les commentaires :
| 