Le site des Verts Vaudois – Case Study

Dernièrement on nous a demandé de participer à un projet de site WordPress multisite en un temps record…

« Challenge accepted! »

Le client

Les Verts Vaudois sont un parti politique, créé le 8 mars 1997 de la fusion du Groupement Pour l’Environnement et de l’Alternative Socialiste Verte. Il compte près de 800 membres et à des élu-e-s à tous les niveaux : communal, cantonal et fédéral. Il est présent dans les 10 districts vaudois.

Les objectifs

Créer un outil de communication interne et externe avec plusieurs outils. Pour l’externe, il s’agissait d’informer les médias et le public des activités, prises de position et actions de notre client. Concernant l’interne, il s’agissait d’organiser (agenda), de gérer les membres (base de données) et d’informer.

Le cahier des charges

  • multisite
  • responsive
  • design proche de celui du site des verts suisses
  • thème imposé (voir le slider Avant/Après)
  • intégration HTML/CSS/PHP
  • menus à différents niveaux
  • marche à suivre
[image-comparator left="630" left_alt="Avant" right="631" right_alt="Après" title="Avant/Après" width="20px"][/image-comparator]

Alors qu’avons nous fait concrètement?

Un site multisite

Qui dit multisite dit gérer plusieurs sites simplement… Nous avons dû gérer les différentes pages et menus du site afin que les membres des Verts Vaudois puissent ajouter leur contenu le plus facilement possible. En effet, les utilisateurs ne connaissaient pas forcément WordPress, il a donc fallu simplifier au maximum la création de leurs futures pages, profils, blogs, etc…

Les Verts Vaudois Section

De plus, le multisite permet aux utilisateurs d’ajouter autant de sites qu’ils le veulent sur le modèle du site principal, ce qui était demandé par les Verts Vaudois… Il avait été évoqué la possibilité de créer plusieurs thèmes enfant mais nous avons réussi à tout implémenter dans un seul et unique thème (affichage dynamique entre le site principal et les sections) afin de faciliter les mises à jour.

Un site responsive

Les Verts Vaudois Responsive

Nous avons gérer le design du site de sorte qu’il soit responsive. En effet, aujourd’hui, il est nécessaire de réaliser des sites qui soient consultables sur tous les supports. Le thème parent était responsive mais les différentes facettes du cahier des charges ont impliqué de la gymnastique en responsive 🙂

Un design proche de celui du site des verts suisses

Le modèle imposé par le client était le site des verts suisses mais avec quelques distinctions

les verts site web

Par exemple, la grille présente sur la home du site modèle n’était pas désirée sur le site de notre client, les médias sociaux devaient être intégrés sur chaque page et la mise en page globale devait intégrer parfaitement la fonction de multisite (sections, membres et élus, etc…).

Un thème imposé

Le thème fourni, Gruene-ch, était un thème enfant de Forefront (thème premium WordPress) très simplifié… Tout restait à faire! (cf slider précédent)

L’intégration HTML/CSS/PHP

Comme toujours, la grande partie du travail se situe du côté HTML/CSS. La simplicité du thème qui nous était fourni nous a permis de laisser libre court à notre créativité et ce fut un réel plaisir.

icônes SVG

Nous avons réalisé les différents icônes sour forme de SVG.

Étant donné que nous devions utiliser un seul et unique thème pour l’ensemble des sites, nous avons eu recours à une multitude de codes permettant d’adapter l’affichage en fonction des pages. Par exemple, une image par défaut s’affiche si aucune image personnalisée n’a été envoyée par l’utilisateur.

Des menus à différents niveaux – Menu transversal

menus

Nous avons dû mettre en place un menu principal qui reste à sa place pour tous les multisites et des menus propres à chaque sous-site. Le challenge aurait pu être simple si le responsive ne s’en été pas mêlé. Il aura fallu trouver des solutions et au final, seuls les menus de sections s’affichent en responsive et un simple lien permet de retrouver le menu principal sur la page d’accueil du site.

Le transfert de connaissances par une marche à suivre

Pour que les Verts Vaudois puissent ajouter, créer de nouveaux sous-sites nous leur avons transmis une marche à suivre pour:

  • la création des pages d’accueil
  • la création des menus
  • la préservation du responsive
  • la mise en place des liens vers les réseaux sociaux
  • la mise en place des différents widgets

Conclusion

Résultat, nous sommes satisfaits du rendu final de ce site internet, les différentes requêtes ont été prises en compte, discutées et réalisées, et surtout nous nous sommes amusés!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *