Nouveau site web pour une école.

Accueil / Articles / Nouveau site web pour une école.
Nouveau site web pour une école.

Article publié le 9 février 2018  Mot(s) clé :   refonte  Enregistrer au format PDF   Version PDF

Comme votre site web véhicule l’image de votre établissement, on comprend qu’il faille le rénover de temps en temps. L’école Les Vignes à Courbevoie vient de nous demander de reprendre son site. Explications.

Quelques idées de base pour comprendre l’importance d’une refonte de votre site web :


-  Votre site s’adapte-t-il à tous les écrans ?
Ce n’est pas nouveau, mais il existe encore de nombreux sites qui ne sont correctement visibles que sur des écrans d’ordinateurs et pas sur les portables ou tablettes.
-  Votre site a-t-il un affichage rapide ?
Parce que l’internaute ne souhaite pas rester 10 secondes devant son écran à attendre que la page s’affiche.
Parce que les moteurs de recherche commencent à mettre en avant les sites qui s’affichent rapidement.
-  Votre graphisme est-il contemporain ?
Il ne s’agit pas « d’être en permanence à la mode », mais de véhiculer une image qui vous corresponde. Une école – par exemple – qui se veut jeune et dynamique ne peut pas présenter un graphisme « vieillot ».

L’école des Vignes, à Courbevoie, souhaitait reprendre son site et nous a demandé de nous en occuper. La refonte d’un site web fait partie de la gestion classique d’un site

Les étapes pour la refonte d’un site web

Plusieurs étapes sont importantes pour un travail serein. Nous les listons ci-dessous :
-  Définir ses besoins.
Le client doit réfléchir à ce dont il a besoin, ce qu’il veut que son site lui apporte, ce qu’il souhaite transmettre à ses visiteurs.
Une fois que l’on sait tout ce qu’il faut placer dans le site, on peut commencer à réfléchir à l’organisation des pages.
-  Faire un dessin.
Le graphiste ou le webmaster commence à proposer au client un dessin de ce que pourraient être les principales pages : page d’accueil, page d’article, page de rubrique, etc.
Normalement le client valide le graphisme, et si possible on évite de revenir dessus.
-  Créer une page HTML.
Le webmaster compose une page HTML de la page d’accueil et des principales pages. On traduit en page web le dessin que l’on a approuvé ci-dessus.
Le graphisme et la page HTML tiennent compte dès le départ des petits écrans. On consultera avec profit l’illustration de Stéphanie Walter : « Content is like water »
-  Intégrer le système de gestion.
On comprend ici la puissance de Spip : pour faire fonctionner ce système de gestion, il suffit d’ajouter des « boucles », des instructions, des balises à votre page HTML. Je trouve cela beaucoup plus simple que de créer un thème Wordpress ou encore un template pour Joomla ou drupal.
-  Faire une mise en ligne provisoire, et tester.
-  Ensuite, tester, et tester encore. Et faire tester.
-  Puis faire une mise en ligne définitive.

Un peu de ménage

C’est le problème avec les systèmes de gestion : certes l’utilisateur gère lui-même sons site, mais il n’est pas toujours formé à certains principes de rédaction, de hiérarchisation des pages, ou encore des bonnes pratiques du web Opquast.
De fait, on retrouve parfois des articles écrits avec beaucoup d’enthousiasme, mais qui de fait, vont gêner le lecteur, ou là encore, donner une image d’amateur à votre site.

Pour chaque site, je fais des documents de gestion, pour permettre aux utilisateurs/trices de mettre leurs articles en lignes. Mais il faudrait peut-être ajouter les points suivants :

-  La hiérarchisation des titres et sous-titres :
Insérer les balises h2, h3 dans le texte de votre article Spip si vous voulez faire plusieurs parties à votre article. On n’organise pas sa page avec du gras ou de l’Italique.
-  Mettre les fichiers PDF en documents joints plutôt que dans un lien dans le texte.
De la sorte, l’internaute sait qu’il va télécharger un fichier PDF (qu’il télécharge s’il en a envie). De plus, la taille du PDF est affichée.
-  Éventuellement, ajouter des balise HTML clear :both pour supprimer l’alignement des images.
-  Veiller à ce que chaque article soit construit de la même façon.
Pour ne pas dérouter le lecteur ; en particulier pour les personnes atteintes de handicap visuel et qui utilisent un lecteur d’écran, pour que toutes les pages soient bien organisées de la même façon.
-  Soigner la définition et la qualité des images
En particulier celles que l’on affiche dans un diaporama.
-  Regarder le résultat.

Voir en ligne : Ecole les Vignes

Voici un commentaire sur le nouveau site que la directrice vient de me transmettre :

ce sont les élèves les plus contentes, car elles trouvent que les couleurs et la présentation leur correspondent davantage !

Portfolio

Cliquez sur l'image pour afficher un diaporama

Anciens site Dessin Ancienne page Même page réorganisée Ancienne page (2) Même page réorganisée (2)

Ces articles peuvent vous intéresser