Je viens de mettre en ligne le site de Bord à Bord, Recettes de cuisine et produits aux algues bio de Bretagne ▻https://www.bord-a-bord.fr.
Pour ce site, j’ai eu pas mal recours à la communauté #SPIP (assez présente ici) via les docs et les listes et je me dis qu’un petit retour d’expérience (à la manière de ceux d’@arno que je lis toujours avec intérêt) serait le bienvenu. Ne le voyez donc surtout pas comme un autopromo déguisée.
Et bien sûr, tout retour est bienvenu.
Graphisme
Toute la partie graphique, conception et identité visuel, a été crée par Oui design - bureau de design graphique, je suis uniquement intervenu sur des questions d’ergonomie ou de faisabilité technique.
Principe
Comme les produits ne sont pas en vente directe mais via des magasins, l’idée du site a été de mettre l’accent sur la présentation des algues et de fournir des recettes avec ces produits pour que les gens sachent quoi faire avec.
Et on navigue à travers tout ça de façon horizontale : dans une recette on retrouve les liens vers les produits utilisés ainsi que vers les algues qu’ils contiennent. Depuis une page algue, on accède aux produits qu’elle compose et aux recettes faites avec, etc... Ces liens fonctionnent avec des mot-clefs.
Donc 3 parties principales :
– histoires d’algues
– Les recettes du bord
– les produits
Et à côté :
– les points de ventes
– la présentation
Histoires d’algues : le choix esthétique à été de faire une page à défiler (type « one page »).
▻https://www.bord-a-bord.fr/-Histoires-d-algues-.html
Un menu en haut de page permet de voir ce que la page contient et d’y accéder en scrollTo avec le plugin Ancres douces. La structure de la page est donc une rubrique affichant tous ses articles sur un même page.
Recettes : la page affiche par défaut les dernières recettes.
▻https://www.bord-a-bord.fr/-Les-recettes-du-bord-.html
En haut de page, on retrouve le diaporama permettant de mettre en avant certaines recettes (en fonction des saisons, des nouveaux produits...) puis un champs de recherche et 3 possibilités de filtre (par produit, ingrédient ou temps de cuisson).
Ces filtres sont des <select> de mot-clefs gérés avec Chosen. Comme tous les mots clefs ne sont pour l’instant pas utilisés, j’ai fait une jointure mot-clefs et articles de la rubrique recette pour n’afficher que les mots clefs effectivement ajoutés à des recettes et ne pas avoir de résultat vide.
Chaque recette a des Champs extras pour les durées de préparation.
Pour gérer l’affichage du visuel dans la grille de la page rubrique (toutes les recettes) et sur la page article (une recette), j’ai utilisé Rôles de documents : visuel grille + visuel présentation.
Une difficulté pour moi a été de créer les rôles via mon plugin squelette (merci à @rastapopoulos et Tcharlss pour le SAD sur le forum du plugin).
Il y a aussi des recettes similaires, pour favoriser la circulation entre les recettes, avec A2A permettant de lier des articles entre eux.
Les produits : une page rubrique affichant tous les articles rangés en sous-rubriques pour pouvoir gérer les gammes de produits (Gamme Fraîche > Les tartares > Le Classique).
▻https://www.bord-a-bord.fr/-Les-produits-.html
Une des questions ici a été la structure HTML5 : qu’est-ce qui est <section> et <article>. Le choix a été de faire un article par type de produit (tartares, moutardes...) avec les différents produits (le classique, le provençal...) en <nav>.
Ici aussi les différents visuels fonctionnent avec Rôles de documents et des champs extras permettent d’afficher le conditionnement du produit. On retrouve également un diaporama Slick en entête pour mettre en avant certains produits.
Points de vente : on affiche avec GIS une carte avec clustering des points et possibilité de se géolocaliser.
▻https://www.bord-a-bord.fr/-Points-de-vente-.html
La difficulté a été ici de trouver un fonctionnement permettant au client de mettre à jour facilement les points de vente à partir de son doc tableur source. Je détaille la démarche par ici ▻https://contrib.spip.net/Tutoriel-Afficher-sur-une-carte-GIS-des-points-dont-on (poke @b_b :) )
Les autres principaux plugins utilisés :
– Multilang + Menu de langues avec liens : le site est prévu pour être multilingue mais la traduction est en cours
– Big upload pour facilité l’ajout des documents par drag and drop
– centre image pour définir le centre d’intérêt des images et recadrer en fonction
– court-circuit pour afficher directement l’article d’une rubrique s’il est seul
– favicon pour gérer les favicons en fonction des appareils
– Image responsive et Insertion avancée d’images pour gérer les images en fonction des types d’affichage (HD ou pas) et des tailles d’écran le tout en HTML5 (<picture>)
– Manuel de rédaction du site pour laisser un mode d’emploi détaillé aux utilisateurs
– Métas+ pour les méta-données openGraph et DublinCore pour un meilleur affichage sur les réseaux sociaux
– Responsive Nav pour le menu burger sur petits écrans
– ZCore
– ZCM, mon plugin squelette perso pour ZCore que je vais tenter de documenter au fur et à mesure par ici ►https://notes.cousumain.info/ZCM-Squelette-modulaire-SPIP-ZCore.html
Certains « détails » auxquels il a fallu penser :
– ne pas afficher dans le sitemap et le plan du site les articles et rubriques n’ayant pas vocation à être vu tels quels
– backend : n’afficher que les recettes
J’ai également commencé à utiliser les svg pour ce site, mais ce n’était que le début, donc certains pictos sont en svg, d’autres non.
Voilà pour mon retour d’expérience, je me dis que ça serait une chouette ressource si d’autres dev faisait de même. On pourrait même trouver un hashtag :)
