Premier livrable

À la première livraison on préfère n’avoir qu’une seule page standard très riche (« styleguide ») plutôt que telle ou telle « vraie » page. S’il y a une forte demande de la part du chef de produit/projet, le styleguide peut être accompagné d’autre(s) page(s) mais à notre avis il vaut mieux consolider la base avant de poursuivre plutôt que devoir reporter les correctifs partout…

L’inventaire ci-dessous est le même pour le premier livrable du graphiste et le premier livrable de l’intégrateur. Côté graphiste, il faut prévoir les déclinaisons mobile/tablette/desktop, côté intégrateur il faut le mettre en place dès le styleguide.

La compatibilité navigateur attendue est celle définie au RGI (notablement IE 10 mini). Dans les versions plus anciennes on doit conserver l’accès à l’information mais on tolère une présentation simplifiée et/ou moins esthétique. Les fonctionnalités clés doivent autant que possible être préservées sur les vieux navigateurs (IE > 8, pour ne pas le nommer) ; prévoir un message d’alerte invitant à mettre à jour le navigateur pour profiter pleinement du site.

Le styleguide sera audité à fond au regard de la checklist Pidila (avec une attention particulière au RGAA, puis corrigé et relivré si nécessaire.

Pour l’expérimenter en ce moment, cette phase de « temps perdu » est largement compensée après, car ça va beaucoup plus vite de monter les pages une fois le styleguide prêt.

Éléments requis dans le styleguide

Éléments constants

La page doit présenter :

  • les liens d’accès rapides
  • l'entête avec placement de la Marianne en haut à gauche
  • le menu principal
  • le fil d’ariane
  • le pied de page; il comporte au minimum :
    • Accessibillité
    • Mentions légales
    • Nous contacter
    • Plan du site
    • et les liens gouvernementaux (SP, gouv.fr, etc.)

Identité visuelle

  • logo
  • couleurs
  • fontes
  • icônes

Éléments de contenu courants

  • typographie
    • texte courant
    • niveaux de titres 1 à 6
    • listes non numérotées
    • listes numérotées
    • listes imbriquées (toutes natures)
    • listes de définition
    • lien interne
    • lien externe
    • lien conduisant vers une page d’une autre langue
    • lien de téléchargement avec mention du format et du poids
    • lien numéro téléphonique
    • citation en ligne (en cours de paragraphe)
    • bloc de citation
  • tableaux
    • simples avec entête horizontal
    • simple avec entête vertical
    • simple avec entêtes horizontal et vertical
    • complexe avec cellules fusionnées (mais côté rédac c’est à éviter et c’est une plaie à rendre accessible…)
  • medias
    • image avec légende
    • vidéo
    • audio
  • boutons et formulaires
    • champs texte
    • cases à cocher
    • boutons radio
    • select simple
    • select avec regroupements
    • select multiple
    • champ mot de passe
    • champ obligatoire
    • champs regroupés (fieldset/legend)
    • au moins un champ en erreur (+ message d'erreur en contexte)
    • bouton d’action principal
    • bouton type "annuler"
    • autres boutons d’actions secondaires éventuels
  • messages d’interactions (exemples de messages sur une ligne et sur plusieurs lignes)
    • info
    • succès
    • avertissement
    • erreur

Composants

composants fréquemment réutilisés dans le site

Ne pas oublier de :

  • présenter ce qui se passe au focus ou au survol des boutons, des liens, etc.
  • montrer à quoi ressemble un item de menu actif