A

Accessibilité

L'organisme à but non lucratif W3C (World Wide Web Consortium) fixe les standards d'accessibilité pour le Web. En France, l'association BrailleNet a créé le référentiel AccessiWeb. Depuis 2015, il sert de base au Référentiel Général d'Accessibilité des Administrations (RGAA).

Intégrez ce critère dès la conception du site et une fois en ligne, testez-le avec l'extension aXe. Elle s'installe sur un navigateur Firefox ou Chrome.

Arborescence

Elle donne une vision globale des différents parcours de navigation à l'intérieur du site

À l'heure de la navigation majoritairement par mobile avec des écrans étroits, privilégiez une arborescence pas trop large et très peu profonde (peu de rubriques et sous rubriques).

logiciel de carte heuristique

C

CTA : Abréviation de Call To Action

C'est un texte incitatif ou un appel à l'action recherchée auprès de l'internaute. Exemple : faire un don, signer une pétition, s'inscrire à une lettre d'information, adhérer, devenir bénévole...

logiciel de carte heuristique

CDC : Abréviation de Cahier des charges

Ce document formalise les besoins pour l'ensemble des acteurs impliqués sur le projet de création du site. Il contient de nombreux éléments :

  • une présentation du projet : présentation de l'association, objectifs du site, cibles visées, objectifs quantitatifs (voir KPI), périmètre du projet (site multilingue ou pas, par exemple), description de l'existant ;
  • description graphique et ergonomique : charte graphique, design, maquettes (voir Zoning et Wireframe) ;
  • prestations attendues et sélection des prestataires avec un planning, une méthodologie de suivi, les modalités de sélection.

C'est un document essentiel lorsque l'on fait appel à un prestataire et que l'on lance un appel d'offre. Il a une valeur juridique en cas de conflit avec le prestataire.

Charte graphique

Elle assure la cohérence visuelle de l'ensemble des pages du site. Une charte graphique Web comporte le logo, les couleurs et les typographies en version numérique, les icônes, les styles de bouton, les formulaires, les gabarits des visuels.

Tous les canaux de communication Web (site, réseaux sociaux, infographie...) et imprimés (bulletin d'adhésion, plaquette de présentation de l'association, flyer d'un événement...) doivent être visuellement cohérents. Ils respectent tous la charte graphique.

Cookies

Pour étudier le comportement des visiteurs, des cookies sont déposés sur leur ordinateur via le navigateur. Du coup, en revenant sur le site, le visiteur retrouvera, par exemple, une action non aboutie : un formulaire de don pas entièrement rempli ou l'inscription à la lettre d'information non validé.

Attention

La CNIL (Commission nationale informatique et liberté) rappelle qu'avant de déposer un cookie, il est obligatoire :

  • d'informer l'internaute de sa finalité,
  • d'obtenir son consentement,
  • de lui fournir un moyen de les refuser.

Exemple : le bandeau de collecte des cookies sur le site de Médecins du monde

cookies

D

DPO : abréviation de Délégué à la Protection des Données

C'est l'acteur central du nouveau Règlement Général sur le Protection des Données (voir RGPD). Si l'association collecte massivement des données personnelles ou si ces données sont dites « sensibles » (religion, politique, santé), il est capital de désigner un DPO auprès de la CNIL.

« Le Secours populaire français a désigné un correspondant informatique et libertés auprès de la CNIL ».

Il est aussi possible de rassurer les internautes sur le traitement de leurs données personnelles en obtenant le label CNIL.

Diaporama (Slider)

De nombreux sites utilisent des diaporamas sur l'en tête du site.

Agréables à la vue, ils ne sont pas toujours idéals pour des publics mal voyants.

E

En tête (Header)

C'est le haut du site, l'endroit du site vu en premier par les visiteurs. Il contient généralement un logo cliquable, le nom de l'association, un ou des menus de navigation, les réseaux sociaux cliquables, un moteur de recherche, etc.

Les couleurs et les typographies employées respectent la charte graphique.

Premier exemple : le header du site Les Restaurants du coeur

le header du site Les Restaurants du coeur

Deuxième exemple : le header du site Framasoft

framasoft

Ergonomie Web

Capacité à répondre efficacement aux attentes des internautes et à leur offrir un confort de navigation.

F

Favicon

C'est une icône, généralement le logo de l'association, symbolisant un site. Les navigateurs Web peuvent utiliser la favicon dans la barre d'adresse, les signets, les onglets ou des raccourcis.

favicon

Flat design

Style graphique minimaliste utilisé dans la conception d'interfaces utilisateurs centré sur le contenu, la fonctionnalité. Il privilégie les grands aplats de couleurs, sans bordures. Le flat design est devenu très présent dans les interfaces Web et mobile, ces dernières années.

Fil d'ariane

Il améliore l'ergonomie de la navigation en montrant aux utilisateurs le chemin parcouru, à partir de la page d'accueil du site.

Exemple : sur le site du Mouvement Colibris, pour aller à la page de présentation du film Demain, il faut d'abord passer par les rubriques Projets puis Films

les rubriques Projets puis Films

FTP : abréviation de File Transfert Protocol

Protocole permettant de transférer des fichiers entre un serveur et un ordinateur. Ce mécanisme de copie est souvent utilisé pour sauvegarder ou restaurer un site hébergé chez un tiers. FileZilla est un logiciel Open Source permettant d'effectuer ces tâches sur un ordinateur.

H

Hébergeur

Personne, collectif (Châtons) ou entreprise (Gandi, OVH...) mettant à disposition des internautes, des sites créés et gérés par des tiers (associations, entreprises, personnes, etc.).

Il donne accès 7j/7 et 24h/24 à tous les contenus déposés sur le site. Pour y parvenir, il maintient des serveurs allumés et connectés en permanence. Une activité énergivore qui pourra orienter le choix de son hébergeur vers une solution plus respectueuse de l'environnement, par exemple, en préférant la proximité géographique.

L'hébergeur permet aussi de vérifier la disponibilité d'un nom de domaine (voir Whois).

K

KPI  : abréviation de Key Performance Indicator, en français Indicateur clé de performance

Ce sont des indicateurs mesurables d'aide à la décision. Ils s'appuient sur des outils de Web analytics.

Pour un site, on surveillera :

  • l'audience : nombre de visiteur unique, données géographiques...
  • les canaux d'acquisition ou comment arrivent les visiteurs : quel moteur de recherche, quels mots clef saisissent-ils, quel réseau social...
  • le comportement des visiteurs : quelles pages sont-elles les plus consultées, restent-il longtemps sur le site...
  • la conversion : combien de visiteurs vont jusqu'à finaliser leur don en ligne, s'abonnent à la lettre d'information...

L

Licences Creative Commons

Le site et tous ses contenus (texte, éléments multimédia) sont soumis au droit d'auteur. Si vous souhaitez faciliter leur partage, ce qui est recommandable pour les associations de plaidoyer, choisissez une licence Creative Commons (CC) parmi 6 combinaisons possibles.

Si l'association s'appuie sur des subventions ou du financement participatif (argent public) pour fonctionner, il peut paraître aussi logique de rendre ses contenus partageables.

creative-commons
  • La licence CC « BY » demande aux utilisateurs des contenus de mentionner la source.
  • La licence CC « BY » + « SA » demande aux utilisateurs des contenus de mentionner la source, avec les mêmes conditions de partage.
  • La licence CC « BY » + « NC » + « SA » demande aux utilisateurs des contenus de mentionner la source, avec les mêmes conditions de partage et sans usage commercial.
  • La licence CC « BY » + « ND » demande aux utilisateurs des contenus de mentionner la source et de ne pas modifier le contenu.
  • Vous devinerez les deux restantes...

Si l'association s'appuie sur des subventions (argent public) ou du financement participatif (crowdfunding) pour fonctionner, il peut paraître logique de rendre ses contenus partageables.

Exemple : le site du Mouvement Colibris est sous licence Creative Commons (CC), avec les conditions BY (attribution) et SA (partage dans les mêmes conditions).

conditions BY (attribution) et SA (partage dans les mêmes conditions)

L'objectif de ce choix est de permettre une diffusion de ses contenus, légalement.

M

Mentions légales

Selon la loi pour la confiance dans l'économie numérique (LCEN), les mentions légales sont obligatoires sur un site professionnel.

« Elles comprennent notamment le nom/la raison sociale de l'éditeur du site, une adresse postale et/ou électronique voire un numéro de téléphone »

(source : la CNIL)

Le nom du président, te sera mentionné comme directeur.trice de la publication. En cas de litige, c'est le responsable légal.

Les mentions légales sont placées dans le pied de page de la page d'accueil. (voir aussi Cookies, Licence Creative Commons, Pied de page, Web Analytics)

Attention ! Pour être conforme au RGDP, détaillez la collecte et la conservation des cookies. De même pour les données personnelles.

Exemple : détail des cookies sur la page Mentions légales de l'agence Wed Ecedi.

details-cookies

N

Nom de domaine

C'est l'équivalent d'une adresse postale, sur Internet.

Avant de créer un site, il faut vérifier sa disponibilité.

Si disponible, le nom de domaine se loue auprès d'un hébergeur pour une durée comprise entre 1 et 5 ans.

Choisissez bien le libellé du nom de domaine pour être facilement trouvable sur la Toile. On privilégiera « masuperassociation.org » à « ma-super-association.org », le premier libellé étant mieux référencé par les moteurs de recherche.

Et pour se protéger et accroître le référencement, louez plusieurs extensions « .org », « .fr », et même « .com ».

O

Open Source

Un logiciel Open Source est un programme informatique dont le code source est distribué sous une licence permettant à quiconque de lire, modifier ou redistribuer ce logiciel. Les SGC Drupal, Joomla et WordPress sont Open Source.

Les logiciels FileZilla, Gimp, Inkcape, Libre Office, Thunderbird, Scribus pourront aussi être utilisés pour la communication de l'association. Ils sont Open Source et téléchargeables gratuitement.

P

Page d'accueil

Vitrine de votre site, elle donne le « la ».

Univers graphique et visuel, fonctionnalités, contenu rédactionnel, on comprend, en un clin d'œil, les missions de l'association.

Page la plus visitée, elle doit donner envie de poursuivre la visite.

Pied de page ou Footer :

Sur un site, c'est la partie située tout en bas. Il contient souvent un 2ème menu de navigation (voir Arborescence et En tête), d'autres outils de communication Web (réseaux sociaux, lettre d'information...), les mentions légales, des informations pratiques (plan d'accès), un plan de site et des labellisations.

Exemple : le pied de page d'ARSLA.

pied de page d'ARSLA

Plan de site ou Sitemap

Il permet de visualiser l'ensemble des pages du site.

Il est toujours placé dans le pied de page. C'est un élément important pour le référencement du site. Lorsque le site est créé, vous pouvez transmettre votre plan de site à Google via l'outil Google Search Console.

Exemple : le plan du site d'AIDES.

PWA : abréviation de Progressive Web App ou Application Web Progressive

Elle se consulte comme un site Web classique, tout en permettant une expérience utilisateur (voir UX) similaire à celle d'une application mobile, sans les contraintes dont la soumission aux Stores (App Store ou Play Store) et l'utilisation importante de la mémoire du smartphone.

R

Référencement

Comment arriver en tête des résultats après la requête d'un internaute dans un moteur de recherche ? Outre un site RWD, ergonomique, véloce et en protocole sécurisé « https », il faut mobiliser de multiples techniques. On distingue les techniques de référencement payantes (SEA, pour Search Engine Advertising) et des techniques dites naturelles (SEO, pour Search Engine Opitimization).

Mais, rien ne sert de s'agiter sans thermomètre pour prendre la température.

RGPD : abréviation de Règlement Général sur la Protection des Données ou GDPR en anglais

Le règlement européen sur la protection des données publié au Journal Officiel de l'Union Européenne le 4 mai 2017 entre en vigueur le 25 mai 2018.

Les associations sont concernées dès qu'elles collectent des données sur les résidents européens via des cookies, un formulaire de don, une adhésion en ligne, une inscription à une lettre d'information...

La CNIL identifie 6 étapes pour se mettre en conformité :

  • désigner un groupe projet incluant le/la président(e), le/la webmaster, le/la responsable de base(s) de données...
  • cartographier les traitements de données personnelles
  • prioriser les actions
  • gérer les risques
  • organiser les processus internes
  • documenter la conformité

Source : CNIL

RWD : abréviation de Responsive Web Design

C'est un site qui s'adapte aux différents terminaux : fixes et mobiles.

Incontournable car les internautes sont majoritairement des mobinautes et pour un meilleur référencement par les robots de Google qui prennent en compte ce critère.

Responsive Web Design

Source : Wikimedia Commons

S

SGC : abréviation de Système de Gestion de Contenu ou en anglais CMS (Content Management System)

Ce sont des logiciels pour concevoir et mettre à jour des sites ou des applications. On préférera les SGC Open Source (Drupal, Joomla, WordPress) très répandus et extrêmement adaptables, aux SGC propriétaires (Google Sites, Strikingly, Wix) beaucoup moins évolutifs et non interopérables avec les solutions Open Source.

U

UI et UX : abréviation de User Interface et User Experience

Le modèle VPTCS développé par Elie Sloïm et d'Eric Gateau permet de différencier des phases de création d'un site. Les phases P, T et C relèvent de l'interface utilisateur (UI) et les phases V et S de l'expérience utilisateur (UX).

La visibilité intervient avant la visite. Elle dépend du référencement.

User experience

W

Web Analytics

Techniques qui recueillent des informations sur l'audience et le comportement des visiteurs d'un site. Le plus répandu est Google Analytics... développé par Google. Attention, il est obligatoire de recueillir le consentement des internautes

Certains outils alternatifs comme XiTi ou Piwik permettent d'y échapper.

Whois

Contraction de l'anglais who is ?, en français « qui est ? ». C'est un service de recherche permettant d'obtenir des informations sur la disponibilité (ou pas) du nom de domaine d'un site.

Wireframe ou maquette fonctionnelle

Croquis, collage papier ou schéma utilisé lors de la conception d'un site pour définir les zones (voir Zoning) et composants qu'il doit contenir. On peut dessiner la maquette avec le logiciel libre Inkscape.

Cette démarche répond à un souci d'ergonomie.

WP : abréviation de WordPress

Le SGC WordPress fait tourner un tiers des sites, dans le monde. Il est particulièrement adapté aux petites et moyennes associations. Pour une personnalisation très poussée et un site multilingue, préférez Drupal.

Avec ce SGC, il est possible de télécharger des milliers de plugin/extension. Ils permettent d'ajouter des fonctionnalités internes ou externes.

Par exemple : un formulaire de contact, un diaporama de photos, un calendrier qui s'affichera sur le site. Ou un bloqueur de SPAM, un outil de statistique pas nécessairement visible.

Z

Zoning ou organisation des pages

Il permet de découper la page Web en autant de zones que nécessaire pour positionner le logo, les menus de navigation, les zones de texte, les boutons d'action (voir CTA), le pied de page, le moteur de recherche, le fil d'Ariane...