Refonte d'un site internet d'information sur la protection de l'environnement.

Avec quelques sites déjà réalisés pour des associations comme www.service-social-breton.org , notre agence web a su aborder le projet de refonte du site de Gagny Environnement consciencieusement, en prenant en compte toutes les demandes des différents membres de l'association.

Ainsi nous avons pris le temps de noter toutes les propositions et remarques au cours de plusieurs rendez-vous. Ceci afin de faire la synthèse des besoins de l'association en vue de définir les orientations et objectifs de la refonte.

Le nouveau site internet de Gagny Environnement qui profite de la refonte pour changer de nom de domaine (ENDEMA93) propose une organisation des articles par thèmes et par villes. Chaque article peut ainsi être ajouté à un thème comme la biodiversité, l'aménagement et l'urbanisme, les nuisances et la pollution... mais aussi dans plusieurs villes, régions, départements et territoires.

Le haut de page

Un menu situé en haut offre un accès rapide aux informations de l'association et aux thèmes. Un moteur de recherche permet de trouver rapidement n'importe quel article du site. Un menu situé au centre, propose un accès facilité aux villes dans le périmètre de l'association. Un module de type carrousel permet de présenter quelques photos panoramiques proposées par les internautes avec le logo de l'association en surimpression.

Le bas de page

Le bas de page reprend le moteur de recherche situé en haut et le complète avec un menu des villes et un menu des thèmes de l'association. Viennent ensuite les informations et liens importants, puis une proposition d'inscription à l'association par un bouton d'adhésion. Enfin des logos de partenaires ainsi que les informations de copyrights et site internet.

La page d'accueil

La page d'accueil regroupe les derniers articles de l'association avec un article à la une puis une série d'articles par ordre de dates. Des menus situés sur la droite offrent un accès rapide aux thèmes ainsi qu'aux villes, régions et territoires. Un agenda permet de partager des articles importants avec d'autres associations.

Les thèmes

Les articles sont organisés par rubriques et sous-rubriques comme Biodiversité et nature avec en sous-rubriques : espaces naturels et jardins. La rubrique est composée d'un grand visuel sur le thème de la biodiversité puis de la liste des sous-rubriques avec visuel, nom et résumé. Le clic sur une sous-rubrique, permet de naviguer vers celle-ci et d'afficher les articles par ordre croissant.

Les articles

Chaque article est composé d'un titre, d'un sous-titre, d'un visuel et d'un descriptif libre.

En complément peuvent être ajoutée ou non :

• Des documents associés
• Des galeries de photos ou vidéos
• Un agenda d'événements à venir
• Des articles associés, les plus lus, les plus vus, du même auteur ou les plus récents

Les villes

L'objectif des pages villes est de permettre de retrouver les articles de l'association correspondant à une ville en particulier. Les pages villes sont constituées des derniers articles classés dans une ville et en complément des articles associés sur la colonne de droite, avec les plus lus, les plus vus, les plus récents ou encore l'agenda.

Les pages de présentation

Les autres pages utilisent un modèle identique qui offre une présentation personnalisée suivant les options ajoutées par l'utilisateur. Il est ainsi possible d'afficher une ou plusieurs galeries de documents, de photos et de vidéos, d'ajouter un agenda et des articles associés.

La page de contact avec formulaire

La page de contact propose aux utilisateurs de faire des demandes de renseignements par l'intermédiaire d'un formulaire. Un message de confirmation personnalisé est envoyé à l'utilisateur une fois la demande effectuée et permet l'abonnement à l'association avec un document joint au message.

Le briefing de projet

Avant de lancer la production d'un site d'information, le briefing de projet nous permet de comprendre les attentes des membres de l'association et d'analyser les différentes options possibles ainsi que la meilleure approche en terme de communication.

Le briefing permet de fixer les objectifs du client, les orientations graphiques ainsi que de définir les utilisateurs potentiels du site. Il permet de garantir la bonne marche du projet.

Plan du site d'information

S'agissant d'un site d'information sur l'environnement et avec beaucoup d'articles classés par rubriques, nous avons réalisé un plan simplifié avec la liste des modèles des pages à prévoir, ainsi que les différents éléments qui les composent.

Maquette du site d'information

Pour gagner du temps lors de la phase de production graphique, il est indispensable de passer par une étape de mise en page. Ceci est encore plus vrai avec les contraintes du responsive design. Cette étape permet de tester les différentes mises en page possibles pour chacune des pages modèles du site d'information.

Pour le site d'information de l'association, nous avons travaillé à la conception de maquettes facilitant la lecture de l'information dans une approche de type journaliste pour la page d'accueil et les pages villes. L'ensemble de l'organisation des pages du site est par ailleurs simplifié suivant les contraintes du responsive design qui permet d'être visible sur tous les types d'écrans.

La conception graphique

Pour la conception graphique, il s'agissait de proposer un graphisme sobre pour favoriser la lecture des articles et augmenter la visibilité des visuels. Ainsi utilisant des couleurs propres à l'environnement comme le vert, le blanc, le marron et le jaune, un graphisme discret pour faciliter la lecture, l'interface graphique correspond exactement aux attentes des membres de l'association. Il sera ensuite possible d'ajouter un grand visuel de fond de page pour mettre plus en valeur les pages et donner un effet de perspective.

Après avoir dessiné toutes les pages modèles dans Photoshop et décliné le graphisme pour mobile et tablette, la création graphique est terminée et le développement est lancé.

Le développement HTML et CSS

L'utilisation du HTML5 facilite le développement des pages grâce aux nouvelles balises qui permettent de mieux structurer le code et de gagner en lisibilité. Le CSS3 avec les Média Queries facilite la déclinaison du site en version tablette et smartphone. Pour donner au site un aspect plus dynamique, lors des passages en version responsive, nous avons ajouté quelques codes CSS. Le formulaire de contact et d'adhésion à l'association a été modifié pour une meilleure expérience utilisateur avec l'utilisation d'Ajax.

Le développement dynamique

Après avoir terminé toutes les pages modèles du site, nous avons ajouté le codage PHP pour rendre le site dynamique et faciliter la mise à jour des pages à l'aide du CMS Olloweb.

La gestion du site

Avec quelques heures de formation au CMS Olloweb, les membres de l'association ont rapidement pris le contrôle du site pour ajouter des articles sur la protection de l'environnement, ainsi que d'autres données du site.

La validation du projet

Avant de procéder à l'ouverture du site, Olloweb lance une vérification complète du site internet afin de garantir le codage. Le site d'information une fois validé est garanti pour une durée de deux ans. Cette garantie couvre les bugs éventuels et les mises à jour des navigateurs.

Les statistiques et le référencement

Pour obtenir des statistiques de fréquentation du site, nous procédons à l'installation de module Google ou Piwik. Un plan de l'ensemble des pages web du site est rendu disponible en ligne et ajouté dynamiquement pour Google et les autres moteurs de recherche. Par ailleurs l'hébergement OVH propose des statistiques fiables avec l'analyse des logs du site.

» Voir le site de l'association en ligne