Présentation de Pierre Grateau et Bertrand Flaujac, de AssoConnect, rédigée pour l'atelier Webassoc

1. ATELIER :
COMMENT (RE)CRÉER LE SITE DE SON
ASSOCIATION

2. Objectifs de l’atelier

3. • Acquérir une méthodologie pour construire son site
• Avoir les clés pour échanger avec les prestataires
• Connaître les bonnes pratiques
• Connaître les bons outils
• S’inspirer d’exemples et de contre-exemples associatifs
3
LES OBJECTIFS

4. Etape 1 :
Définir ses objectifs et destinataires

6. Les destinataires potentiels

8. Etape 2 :
Faire l’état des lieux

9. Pourquoi changer ?1

10. Design
Ergonomie
Autonomie
Responsive
Contenu
Ciblage

14. Test de comptabilité mobile Google

16. S’inspirer2

17. Themeforest

19. Etape 3 :
Construire la structure

24. Etape 4 :
Construire ses pages

25. Organiser l’information1

26. VS

27. LES OBJECTIFS
Les étapes :
• Déterminer les messages que l’on veut faire passer
• Organiser ces messages
• Les mettre en forme
Fournir à l’internaute un contenu organisé, pour que celui-ci
soit sensibilisé, tenu informé et/ou passe à l’action.

28. Cas d’usage : Refonte de la page Tarifs d’AssoConnect
Objectif : Faire comprendre aux utilisateurs nos tarifs, et les inviter à tester l’outil.
Messages :
• Faire en sorte que la personne comprenne rapidement notre grille tarifaire
• Informer la personne sur nos différentes formules
• Répondre aux éventuelles questions / interrogations de la personne sur la
solution
• Les inviter à tester l’outil
• Les conforter dans leur choix, en leur montrant qu’ils ne sont pas les seuls à
utiliser l’outil.

29. Informations principales Informations secondaires Aller plus loin…
Faire comprendre notre
grille tarifaire :
En une phrase la personne
doit saisir que le tarif évolue
en fonction de la taille de
l’association, et que toutes
les fonctionnalités sont
disponibles dès la formule la
moins chère.
Communiquer les formules
proposées :
4 tarifs, avec 2 mois offert si
engagement annuel
Les inviter à tester
Communiquer sur les
options possibles en plus
des formules :
Achat de nom de domaine,
Formations sur l’outil,
création du site, etc.
Inviter les plus grosses
associations à nous
contacter. Pour leur proposer
un RDV téléphonique et
cerner leurs besoins
Lui donner des preuves
« sociales » de notre action :
Logos de quelques asso
clientes
Lever les dernières
interrogations des
personnes dubitatives sur
certains points :
Une Foire à Question

32. Des modèles de pages qui
fonctionnent
2

34. Les outils pour concevoir vos modèles de pages
Logiciels Mockups Powerpoint Et surtout…
du papier et un crayon
Regardez autour de vous
Les meilleurs sites associatifs Les sites non associatifs

35. Le contenu3

37. Un constat
Steve Krug : « Nous ne lisons pas les pages, nous les scannons. »
• Nous sommes souvent pressés ou n’avons tout simplement pas envie de lire
• Seulement certaines sections nous intéressent
• Le temps d’attention moyen par page est de 30 à 60 secondes.
Une solution : Variez les types de contenus

40. Restez simple4

41. Eliminez les sources de confusions inutiles
Evident Nécessite de la réflexion
Partenariat Association à AUVM
Je veux voir les programmes de
partenariats AUVM en cours !
Je clique
Je veux voir les partenariats AUVM en
cours !
Hmmm
Surement dans la section « s’associer »
Je clique
Je veux voir les partenariats AUVM en
cours !
Hmmm
Peut être que ici, mais pas certain… Je
vais continuer à chercher ailleurs

42. L’utilisateur doit trouver intuitivement l’information qu’il cherche
Eliminez les sources de confusion inutiles
Pour cela, il est utile d’éliminer au maximum toutes les sources de
confusion
Le design
Partenariat
Partenariat
Partenariat
Le texte
Partenariat
Association à AUVM

43. Ne réinventez pas la roue5

44. Où afficher les boutons dons ?
Comment gérer le process de dons?
www.croix-rouge.fr/ www.electriciens-sans-frontieres.org/

45. Les problèmes de police6

47. Assurez vous que les polices soient faciles à lire.
Taille 14 minimum
2 styles de polices maximum
Gardez une certaine cohérence !
Titre de taille 41
Sous-titre de taille 18
Texte principal de
taille 16
Choix des polices

48. Titre : 63 px; Gotham SSm A
La police
Corps : 20 px; Gotham SSm A
Sous-titre : 22 px; Gotham SSm A

49. Votre boîte à outils
+ GoogleFont, daFont

50. Les couleurs7

53. • Evitez l’excès de couleurs (3 couleurs maximum)
• Pour les polices, optez pour une couleur grise sombre / noire
• Choisissez toujours des couleurs avec un contraste important.
Quelques règles à suivre dans le choix des couleurs
Mon texte Mon texte
S’inscrire à l’expédition
En savoir plus sur
l’expédition

55. Votre boîte à outils
+ Palleton.com
Flatuicolopicker.com

56. Etape 5 :
Prestataires et outils

57. Les acteurs1

58. Je soustraite le
développement
Les différentes options pour le développement de son site
Je développe en interne
À une agence de
communication
À un free-
lanceur
Utilisation d’un
CMS
Partir d’une
feuille blanche

59. Les agences de communication
500 € / j
de développement
5000 € mini
La création du site
(10-20 pages assez simple avec
formulaire de contact,
newsletter, etc.)
Frais de
maintenance
Les chiffres
Les avantages
• La qualité du rendu Demandez les références de l’agence
• Le temps passé Sous-traitance de toute la partie développement
• Le suivi Un site internet n’est pas une opération « one shot »

60. Les Freelancers & connaissances
1500 € mini
La création du site
(pour une prestation très simple)
Les chiffres Les avantages & inconvénients
• La qualité du rendu Variable
• Le temps passé Sous-traitance de toute la partie
développement
• Le suivi Souvent pas ou peu de suivi
• Le risque La personne n’est plus

61. Développement en interne
Les avantages & inconvénients
Les avantages :
• Le prix – Gratuit ou très peu cher (compétences en interne)
• Les améliorations – Tester rapidement les pages telles que vous les avez conçues, et
pourrez les faire évoluer sans voir les coûts de développement s’envoler
Les inconvénients :
• La qualité – Moins abouti que si vous sous-traitiez une agence
• Risqué si développé sans CMS – Quid si la personne part ?
Les outils à disposition (CMS ou Systèmes de Gestion de Contenu)

62. En résumé …
Quoi qu’il en soit, soyez vigilants sur quelques points :
Propriété du code
Le développeur / l’agence
doit être compétent
Le code vous appartient
Le développeur / l’agence doit être
compétent
Le contenu facile à
mettre à jour
Le code vous appartient

63. Les CMS2

65. Synthèse3

66. Un site internet ….
…n’est jamais fini
…doit évoluer en fonction des technologies
exemples : Sites internet développés sous Flash, Google intègre
l’aspect Responsive dans son algorithme.
Il faut donc prendre ces facteurs en compte dans
votre budget, et votre choix de développement !

67. Pour approfondir