Agence de création digitale

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

Endema93.fr

Voir la galerie

Refonte du site internet d'information pour l'association ENDEMA93

Refonte d'un site d'information pour une association de protection de l'environnement ENDEMA93

Refonte d'un site d'information pour une association de protection de l'environnement ENDEMA93 de Olloweb.com est mis à disposition selon les termes de la licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Pas de Modification 4.0 International.
Licence Creative Commons

5/5 pour 32 notes

Notez cette page
Note sur 5
Je sélectionne des étoiles

Votre note a bien été prise en compte, notre équipe vous remercie pour votre collaboration.

Vous avez déjà noté cette page, encore merci pour votre collaboration !

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.

Voir le site Endema93

Menu, recherche, logo

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.

Partie haute du site internet
Partie haute du site internet

Copie d'écran du site internet

Partenaires, adhésion, association

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.

Bas de page du site de l'association
Bas de page du site de l'association

Le bas de page du site de l'association dispose d'un moteur de recherche par thèmes et villes, d'un espace partenaires, etc.

Agenda, actualité par villes, dossiers thématiques

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.

Voir la page d'accueil

Biodiversité, nature, pollution

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.

Dossiers thématiques

Détail d'article, galerie, documents

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

Détail d'un article

Gagny, Le Raincy, Montfermeil

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 villes

L'association, adhésion, contact

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.

 

Exemple de page en ligne

Briefing de projet
Briefing de projet

Le briefing de projet est un document qui défini les orientations globales du projet avant de lancer la production.

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.

En savoir plus

Organigramme de site
Organigramme de site

Un organigramme de site internet pour une vue d'ensemble des pages web.

Maquette pour site web
Maquette pour site web

Explorer des possibilités de mise en page afin de déterminer la meilleure configuration possible pour un site internet.

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.

En savoir plus

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 Adobe Photoshop® et décliné le graphisme pour mobile et tablette, la création graphique est terminée et le développement est lancé.

En savoir plus

Interface graphique
Interface graphique

La conception d'interface graphique pour une expérience intuitive chez les utilisateurs.

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
Les statistiques

Suivre une action en image par l'intermédiaire de statistiques aussi riches que possibles.

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.

En savoir plus

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

Conception graphique de la page d'accueil de l'association

Conception graphique de la page d'accueil du site de l'association

Refonte site internet association

Conception graphique de la page des rubriques de l'association

Refonte site internet association

Conception graphique de la page rubrique du site de l'association

Refonte site internet association

Conception graphique des sous-rubriques du site de l'assocation

Refonte site internet association

Conception graphique de la page article du site de l'association

Création graphique des pages villes du site de l'association

Création graphique des pages villes du site de l'association

Refonte site internet association

Conception graphique des pages de présentation

Refonte site internet association

Maquette N1 de la page d'accueil du site de l'association

Refonte site internet association

Maquette N2 de la page d'accueil du site de l'association

Refonte site internet association

Maquette N3 de la page d'accueil du site de l'association

Refonte site internet association

Maquette de la page des rubriques du site de l'association

Refonte site internet association

Maquette de la page rubrique du site de l'association

Refonte site internet association

Maquette des sous-rubriques du site de l'association

Refonte site internet association

Maquette de la page article du site de l'association

Refonte site internet association

Maquette des pages villes du site de l'association

Refonte site internet association

Maquette des pages de présentation du site de l'association

La page d'accueil du site de l'association avant refonte

La page d'accueil du site de l'association avant refonte

Conception et réalisation suivant l'offre de refonte de site d'information

Refonte de site d'information

Refonte de site d'information

Olloweb CMS

Refonte de site d'information

Lancez la refonte de votre site internet d'information pour une nouvelle présentation des articles, une interface graphique plus simple et compatible avec les nouveaux formats d'écrans (iPad, iPhone...). Profitez de la refonte pour réorganiser vos rubriques d'informations et augmenter votre visibilité sur le web.

L'offre de refonte de site d'information
à partir de 4 300,00 HT - 5 160,00 € TTC OFFRE PRO

Détail de l'offre

L'agence Olloweb utilise désormais
le fournisseur d'energie Enercoop
pour la création digitale

Enercoop
Energie 100% renouvelable