Histoire d’une refonte

Un site internet aura plusieurs vies au cours de son existence. Ainsi, le site de la Mairie d’Ossey-Les-Trois-Maisons vient de vivre sa 3ème évolution en tout début d’année. C’est l’occasion idéale de vous conter l’histoire d’une refonte de site : www.osseylestroismaisons.fr

J’ai eu le privilège d’amener bénévolement ma passion au service de la commune depuis 2005 avec une première version d’un site web sur la commune, puis en 2009 une seconde évolution plus fournie. Les pages se sont étoffées ainsi que le nombre d’éléments textes, photos et vidéos.

Cette version 2.xx, il est possible que vous l’ayez déjà visité jusqu’au 31 décembre 2018.

Petit retour en arrière

4 mois auparavant,  j’ai proposé à la Mairie et Mme Le Maire, lors du renouvellement d’abonnement à l’hébergeur, de monter en gamme afin de pouvoir y placer une nouvelle édition du site sur une autre architecture.

L’idée est de coller à la technologie du moment et ces codes, même si l’on sait que cela évolue à une vitesse folle.

Accord m’a été donné pour cette mutation.

Plan de bataille

Il s’agit maintenant de prévoir cette migration dans les meilleures conditions possibles tout en apportant des éléments nouveaux et pratiques pour tous.

L’avantage dans cette opération a été de ne pas avoir une échéance précise mais plutôt, une carte blanche pour la mener à bien.

Carte blanche, oui, mais aussi feuille blanche…

Effectivement, la nouvelle ossature envisagée n’est en rien compatible directement avec le corps de l’ancien site.

Papier crayon, on noircit !

Comme toute étude qu’on se doit de faire, il est conseillé de prendre le temps nécessaire pour « planter le décor » noir sur blanc, afin de mettre en éclat tous les éléments que l’on va avoir besoin.
Il n’est pas utile de mettre le papier peint si tu n’as pas encore construire les murs…

Feuille de route  (Road book)

Dans notre jargon, il est notion de taux de rebond, boïng! boïng! boïng!

En clair, c’est un indicateur marketing qui mesure le pourcentage de visiteurs qui sont entrés sur la page principal d’un site Web et qui l’ont quitté juste après, sans avoir consulter d’autres pages.
Moins de 20% c’est bien, l’idéal est d’être et de rester inférieur à 5%.

Il n’est pas bon, qu’un visiteur arrive sur la page d’accueil, puis ZAP le site pour aller voir ailleurs. Le taux sera alors proche de 85% voir 95%.

De ce fait, le brief est simple: site institutionnel, efficace, tons doux, accessible aux informations en 2 clics (3 clics grand maximum), depuis n’importe quel terminal  (TV, Ordi, tablette, smartphone), gestion des textes et médias simple avec optimisation à la source pour une intégration immédiate dans le référencement.  

Allé hop mode Zoning !

Rien de bien méchant, ce n’est ni plus ni moins qu’une maquette, statique ou fonctionnel, des différentes parties qui composent la page principale de votre projet de site: header, footer, sidebar, body, menu, pages, articles, événements, etc.  J’arrête avec les noms techniques par forcément connus de tous.

Exemple de zoning :

Ainsi, on va pouvoir « faire fonctionner » le site à blanc: qu’est ce que je mets dans l’entête, le pied de page, les éléments récurrents seront bien ici ou là, quels sont les éléments dont j’ai besoin le plus souvent quand je navigue sur ce type de site.

Notion importante: pour vous aider à balayer l’ensemble des éléments qui devront figurer sur votre page, mettez-vous simplement, non pas en mode webmaster en l’on calcule tout mais, tous simplement comme un visite lambda qui visite un site.

• Quelles seraient alors vos réactions ?
• Comment réagiriez-vous à la vue de telle ou telle information ?

On se rapproche d’un visiteur « type » avec votre propre sensibilité, émotion.

Dans certain développement, on fait appel à un visiteur fictif pour lequel on lui affecte un genre, une sensibilité, une condition sociale, un état psychologique, … le tout pour aider à la simulation. On l’appelle aussi Persona. En changeant certains des paramètres cités, on obtient des résultats différents qui permettent d’avoir une approche plus ciblée des objectifs à atteindre.
Ce persona sert également lors de la validation et la mise au point du site avant livraison de façon à vérifier que l’ensemble des stratégies mises en place, fonctionne comme on le souhaitait.

Choix du support de développement

Pour avoir quelques cheveux blancs, je peux affirmer qu’il existe bon nombre de moyen pour développer un site Web:

• en montant tout de A à Z
• en utilisant un logiciel propriétaire de conception de site Web: il en existe bon nombre mais on est assez limité en fonction du projet que l’on veut voir éclore.
• en utilisant des CMS (Content Management System) ou Système de Gestion de Contenus dans la langue de Molière.

Et là, il y a du lourd, alors il faut choisir le plus adapté en fonction de votre implication, de votre niveau de connaissance et de l’objectif à atteindre pour votre projet.

Ici, je dois réaliser un site institutionnel, pas une boutique en ligne (E-Shop).

De part mon expérience acquise au cours de ces dernières années, je me suis orienté tout naturellement vers WordPress.
Pour une vitrine statique avec peu de mise à jour, je me serai orienté vers un produit genre WebAcappella Responsive Website Creator – (exemples:  Voir mon site Démo –  www.lequeux-somato-relaxologue.fr )

Choix du thème

Le thème est la partie la plus délicate à choisir car il va être le support et l’affichage de tous les éléments qui vont constituer le site.

Dans le cas de la commune, j’ai volontairement fait le choix d’un thème qui était à la fois sobre et pouvait permettre d’accéder à des réglages bien précis.

Le dilemme est toujours permis entre prendre un thème Freemium(gratuit) ou un thème Premium(payant 1 fois ou abonnement). En fait, tout dépend de vos besoins et de vos connaissances à pouvoir personnaliser le thème choisi à votre sauce. Dans les 2 cas, il est important de veiller à ce qu’ils soient maintenus par son auteur.  Certains thèmes ont des durées de maintenance très courte ce qui peut être un piège pour la pérennisation d’un site. On devra reconsidérer le thème mais aussi l’ensemble des fonctionnalités, qui alors, ne seront plus adaptées aux nouveaux Design.

Il est arrivé que des thèmes premiums ne soient plus maintenus au bout de quelques années  alors que certains freemiums, plutôt bien côtés, sont toujours actualisés.

La maintenance des thèmes comme pour les Plugins (extensions) a un intérêt multiple:

• permettre d’avoir des nouveautés,
• tenir compte des nouvelles failles de sécurités pour les verrouiller,
• rester compatible avec la dernière version du noyau du CMS choisi.

L’étude préalable permet d’orienter ses recherches vers le thème qui sera proche du projet.

Comment procéder ?

A partir de maintenant, on commence à assembler les éléments: CMS, Thème

C’est bien beau tout cela, mais où créé le site ?

Il existe 2 voir 3 possibilités de créer son site :

• En disposant déjà d’un hébergement compatible et du nom de domaine, on travaillera en verrouillant l’accès aux visiteurs,
• En travaillant avec un serveur virtuelle pour effectuer différents tests, attention, toutefois, toutes les extensions ne fonctionnent pas forcément et cela demandera de  la mise au point sur le serveur définitif,
• En travaillant avec son propre serveur, genre NAS avec cette fonction, avec toujours une phase de mise au point sur le serveur définitif.

A l’occasion de cette refonte, l’ancien site a pu rapidement être déplacé sans encombre dans un nouveau dossier. Lors de l’installation du pack WordPress, j’ai, de suite, mis en place une page d’accueil annonçant la refonte du site tout en mettant un lien pour continuer à accéder à l’ancien.

De cette façon, je travaille directement sur le serveur définitif et toutes les interactions nécessaires au bon fonctionnement des constitutifs du site ne seront pas perturbées.

C’est parti ! Oui, mais pas n’importe comment…

Un thème va vivre et avoir des mises à jour qui vont être régulièrement installées. Celui-ci a ces propres réglages par défaut au niveau des couleurs, de police d’écriture, d’aspect. Si on adapte directement les apparences à celles que l’on souhaite, lors d’une mise à jour, tout sera remis par défaut. Tous nos réglages personnels seront bons à refaire à chaque fois.
L’astuce consiste, lors de la création d’un site avec WordPress, à générer un thème enfant qui reprend les fonctionnels du thème mais qui permettra de conserver nos propres personnalisations lors des mises à niveau.

Maintenant, on peut mettre en place les éléments qui ont été définis pour les besoins du projet.

Le zoning permettra de garder un oeil sur l’orientation que doit prendre la conception. Un zoning de chaque page pourra avoir été fait selon les spécifications demandées.

La structure

WordPress travaille avec des pages, des articles affectés à des catégories pour permettre des filtrages à l’affichage.

Les pages reçoivent les éléments sédentaires du site. Les articles sont les actualités des différentes catégories: chaque association, cérémonie etc.

La navigation est confiée à un menu et sous-menus ainsi que des boutons dans les 6 zones thématisées.

Les contenus

C’est bien de créer des pages et articles mais encore faut-il ajouter des contenus: textes, photos, vidéos, fichiers etc.

Les textes et médias ont été repris de l’ancien site et par bonheur, je les avais déjà optimisé pour le Web.

La performance d’un site et sa mise en avant sur les moteurs de recherche, est étroitement liée aux contenus qui y sont déposés. Les textes doivent être travaillés avec des mots précis non redondant dans des phrases courtes et un langage clair. Le présent est de rigueur. Eviter les phrases à rallonge, j’en parle en connaissance de cause. La relecture est obligatoire et vous aidera à reformuler et formater votre texte.

Concernant les médias photos, ce sont des éléments à considérer autrement que de simples photos. Une photo est graphique mais peut renfermer des éléments très prisés par les moteurs de recherche.

Autre que le nom du fichier et sa date de création, une photo peut contenir des éléments bien plus élaborés comme: l’auteur, la date de prise de vue, les coordonnées GPS, les mots clés, le titre de la photo, la localisation, le contexte, le nom de l’appareil photo, les caractéristiques techniques de la prise de vie et encore beaucoup d’autres informations.

C’est là qu’il est bon de renseigner ces données dans les photos: appeler EXIF ou IPTC.

Il existe des logiciels gratuits qui permettent de mettre à jour et personnalisés ces informations qui contribueront à de meilleures performances en matière de référencement.

Avec ces mêmes logiciels, on va s’attarder sur le poids des photos, gros ennemi des performances.

Une photo issue d’un appareil photo d’aujourd’hui peut avoir une taille de 6000 x 4000 pixels en résolution 24bits couleurs, ce qui peut représenter des photos de 5Mo à 9Mo au forma JPG.

 Il est totalement inutile et absurde d’utiliser de tel poids de photo sur un site, si peu qu’on le visite depuis un smartphone.

On réduit la taille à 1500 pixels maxi, ce qui est un passe partout selon les terminaux de navigation. De même, à l’enregistrement, on mettra un taux de compression de 50 ou 70% en JPG. On ne va pas moins pour éviter de trop grosses dégradations.

On se retrouve avec des photos dont le poids est maintenant inférieur à 200ko. Plus c’est petit avec un respect de la qualité, mieux c’est.

Pour le confort d’affichage des photos ou galeries en pleine écran, on adopte un ratio de 1.78 soit 16/9ème comme la plupart des écrans. En photographie, on appréciera plus le format 1.50 ou 3/2.

Pour les vidéos, on ajustera le format et la compression pour gagner aussi en poids. Si on utilise des vidéos plus conséquentes, on opte pour l’utilisation d’une plateforme dédiée puis on insérera un lien vers la vidéo cible. Ces plateformes sont optimisées pour recevoir du format 2K ou 4K et d’adapter le flux de lecture en fonction du débit de la connexion internet et le type de terminal.

Une option intéressante car on peut aussi bénéficier du référencement croisé depuis cette plateforme et ainsi offrir une option supplémentaire de retour sur son site (Backlink).

Le menu

Un menu principal de navigation est mis en place sur les pages principales et un second niveau de menu est créé pour les pages enfants.
La notion de parent/enfant est une hiérarchie dans les menus qui fixe l’arborescence.
Pour le site dans sa version actuelle, j’ai restructuré l’ancien site en 6 éléments au menu principal et de 1 à 9 éléments en sous menu.

Il faut intégrer dés la conception: l’ergonomie. L’idéal est que le visiteur puisse trouver son information en 2 clics, exceptionnellement en 3 clics pour éviter de le perdre.
On garde toujours à l’esprit le taux de rebond, donc on évite la possibilité de le voir zapper trop tôt.

Un élément du menu a un traitement particulier. C’est la partie « Blog », appelé « Actualités » ici où sont stockés tous les articles. Une catégorie est affectée à chaque article.

Chaque élément du sous-menu appelle un filtre sur une des catégories pour n’afficher que celle demandée.
Ainsi, on fait appel au fonctionnement natif de WordPress ce qui évite de monter une usine à gaz.

Header et Footer

L’entête et le pied de Page ont leur rôle d’encadrement des pages du site et permettent une constance dans la navigation.

L’entête ici est voulu sobre sans surcharge.

Le pied de page tient lieu de fil rouge. C’est là que les informations récurrentes sont implantées, dont: coordonnées, adresse, liens utiles, informations légales, etc.

Pour ne pas faire des pieds de page immenses, j’ai préféré le présenter en 4 blocs au lieu de 3. L’autre particularité est de laisser le maximum de visibilité au corps du site et de rendre le pied de page escamotable. Cela donne un ton de personnalisation propre à ce site.

La sidebar

La barre latérale permet de placer des informations, pas trop envahissantes et ni redondantes avec le reste proposé, pour éviter les répétitions. Il est contre-productif de saturer cette zone car on perd le visiteur avec la masse d’information.

Ainsi, une nouveauté a fait son apparition par rapport à l’ancien site, c’est la gestion des événements, animations sur la communes. Elle apparaît sous les traits du calendrier du mois dont les jours concernés sont colorés. Une liste limitée aux 3 prochains événements est mise en rappel. Il n’est pas utile de mettre toute l’année d’un coup alors que le visiteur peut la voir à sa demande.

En fait, il faut de l’air, une site est comme une composition publicitaire, elle doit respirer et donner naturellement un sens de lecture. Si c’est brouillon, on ne sait plus où donner de la tête. On perd son attention et il se sauve.

Le corps du site

Chouette, on attaque le plat de résistance !

Après ces quelques mignardises, on s’attaque à la partie la plus importante car elle apporte les réponses à ces questions:

• Qui sommes nous ?
• Que proposons nous ?
• Quelles informations importantes, récentes partageons nous ?
• Quelle apparence vais-je prendre ?
• Quelle optimisation vais je intégrer pour le référencement ?
• Comment inciter notre visiteur à rester sur la site et à en voir plus ?

Oulà!!! Mal la tête !

Bé non, ce sont simplement ces questions qu’il est nécessaire de se poser à chaque création de site, raison de plus s’il y a notion de conversion (acte d’achat) pour une e-boutique.

Mais il y en bien d’autres encore …

Astuce: j’utilise à toutes les sauces l’outil QQOQCCP, Qui? Quoi? , Où?, Quand? Comment? Combien? Pourquoi? Il permet de balayer l’ensemble des questions fondamentales, d’autres outils existent mais pour cibler des résolutions de problème plus spécifiques.

Dans le détail, cela donne quoi:

« Qui sommes-nous? » pas besoin de grandes phrases, je fais appel à un slider léger fait de groupes de photos glissantes par 3, toujours pour laisser de l’air à l’oeil du visiteur. J’ajoute une animation avec des généralités sur la commune.

« Que proposons-nous? » Je présente des services d’information à la population comme le dernier bulletin communal, le dernier compte rendu du Conseil Municipal, la dernière analyse de l’eau potable.

« Quelles informations importantes, récentes partageons nous ? »  Va mettre en lumière les rendez vous et communications dont les administrés et entourages pourront avoir besoin.

« Quelle apparence vais-je prendre ? » En fait, je fixe déjà l’apparence avec les modules aériennes qui prennent place dans des tons doux et un design respirant.

« Quelle optimisation vais-je intégrer pour le référencement ? » Cela ne se voit pas de suite, mais il concerne l’ensemble des mots simples et variés qui sont employés sur la page. Les images et graphismes sont réduits en terme de poids au minimum acceptable pour permettre une rapidité dans le chargement et la lecture de la page à l’arrivée sur le site. Le poids est notre ennemi comme évoqué plus haut.

« Comment inciter notre visiteur à rester sur la site et à en voir plus ? » Le site n’a rien à vendre , juste à partager de l’information et renseigner les visiteurs par la même occasion. Là, je fais appel à ces mêmes visiteurs qui sont venus visiter des articles et des pages précédemment. Je propose, ainsi aux suivants, des articles et pages phares à consulter afin de titiller leur curiosité.

Finalement, même pas mal !

Une attention particulière

Nos visiteurs viennent de partout avec peut-être des difficultés pour lire les caractères trop petits, pour percevoir les couleurs, les formes et les faibles contrastes.

Je voulais utiliser une vieille recette pour faire grandir ou réduire la taille des polices d’écriture, mais je n’étais pas satisfait. J’ai donc gratté un plus la toile pour trouver un outil, que je trouve génial, surtout pour le service qu’il rend dans le cas présent.

 Cette extension se visualise rapidement avec son logo en haut à droite pour englober toutes les personnes rencontrant des difficultés de vision plus ou moins sévères.

Etant proposée en anglais, J’ai pris le temps de la traduire pour pouvoir l’utiliser plus rapidement.

Il est possible sans impacter le site web originel, de modifier la taille des polices, de choisir une police d’écriture plus conventionnelle, de modifier le contraste en changeant la couleur de fond, d’afficher en niveaux de gris et d’inverser l’ensemble des couleurs (négatif).

Et sur mon mobile

Nous avons évoqué au tout début la possibilité de lire le site quelque soit le terminal employé.
C’est le rôle du Responsive Design qui prend en compte dés la conception l’affichage proportionnelle contrairement à un affichage stricte.

Qu’est-ce qu’il a dit là ?

Comme j’aime bien les images, c’est mieux qu’un long discours.

Voici comment l’ancien site pouvait être vu sur un smartphone: faites chauffer le zoom !

En total responsif, les contenus sont affichés proportionnellement à la définition du terminal présent.

Que ce soit: Smartphone:

Tablette 10″ 

Ordi 22″

Nouveau site et RGPD

Le nouveau site intègre d’emblée la compatibilité avec le Règlement Général sur la Protection des Données. [Lire mon article sur le sujet]

Sécurité

Le toile n’a pas de frontière. Les petits malins sont nombreux à vouloir « casser » du site pour casser ou spolier les contenus ou trouver des données sensibles.

Aucune donnée sensible n’est demandé, ni ne transite par le site pour éviter toutes convoitises. Plusieurs systèmes de sécurité sont présents.

Aucune système n’est infaillible mais au moins les portes ne sont pas grandes ouvertes.

Et je n’en dirai pas plus, na!  😉

Sauvegarde

Tant que tout tourne rond, on ne se méfie pas. Puis un jour, pas fait comme un autre, le grain de sable entre dans les rouages et patatras: le site en position horizontale. Il est planté pour une mauvaise manip ou une mise à jour mal digérée. Bref, c’est la cata…
Le seul remède est la copie de secours, la sauvegarde, le backup. Il existe plusieurs moyens pour arriver à ses fins.
Ici, des sauvegardes multiples sur des supports différents sont utilisés.  Je suis peut être de la vieille école, et on n’est jamais trop prudent. Qui n’a jamais perdu des données d’ordi ou d’avoir tout mis sur une clé USB et bing, elle ne répond plus. Pour les sites internet, une voire deux roues de secours sont primordiales.

En résumé

La migration s’est étalé sur 3 semaines pour tout remettre à plat, réfléchir et repenser le design pour plus d’efficacité tout en gagnant en clarté. Ayant déjà tous les contenus, il a fallu remanier ou recréer les photos parfois minuscules. La création de nouveaux éléments graphiques a permis de casser la monotonie du texte. Le site comporte un peu plus de 40 pages et une trentaine d’article pour l’heure.

N’hésitez pas à venir interagir via les commentaires, où même me contacter directement via le formulaire de contact, je vous réponds dans les meilleurs délais.

Au plaisir !

Eric

Dernière mise à jour le 12 janvier 2024