Memo de la maquette web

17 mars 2007,
par Romy Têtue


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

Hyperliens

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
{#TITRE,#URL_ARTICLE,#INTRODUCTION}

Vos commentaires

  • 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 : Verdana appears much larger than Arial, so Arial is not a suitable back-up for Verdana. Try
    Tahoma instead (or Candara which we’ll mention shortly). If it’s not suitable, don’t specify it.
    .

    Du coup, effectivement quand tu fais des tests tu sens qu’Arial n’est pas un bon substitut à Verdana.

  • 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 ;-)

  • 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...

    • Qualité web et bonnes pratiques Opquast
    • Mode d’emploi de ce mémento
    • Bonne pratiques pour tous les services en ligne
    • Service e-commerce
    • Service syndication
    • Service newsletter
    • Aller plus loin
    • Récapitulatif des bonnes pratiques par niveaux

    mais c’est écrit en noir et blanc sur fond bordeaux, ça arrache les yeux

  • 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

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Raccourcis : {{gras}} {italique} -liste [bla->url] <q> <quote> <code>.

Suivre les commentaires : RSS 2.0 | Atom