|
publié le 11/03/20 |
La première mise en ligne du site ASTHALIS remonte à 2006 et plusieurs versions se sont succédé depuis, chacune correspondant à un renouvellement de son interface. En parallèle avec l'augmentation de son contenu, j'ai développé et progressivement standardisé son arborescence interne.
Courant 2019, j'ai ressenti le besoin de repenser l'ensemble du site, alors dans sa version 4.0 (plus de 600 pages) tout en restant fidèle au langage HTML et avec plusieurs objectifs en tête :
1 - une meilleure lisibilité des pages sur tous les supports
2 - un contenu mis en avant par une interface de navigation plus discrète
3 - une navigation optimisée, pour rejoindre plus rapidement la page souhaitée
4 - une arborescence générale conservée, pour ne pas dérouter les habitués du site
5 - un code plus lisible et plus facile à maintenir sur le long terme
6 - une taille mémoire globale plus réduite à contenu comparable
Dans la suite de cet article, je détaille pour chacun de ces objectifs l'ensemble des modifications correspondantes apportées au site.
Par le passé, le site a connu des couleurs assez vives pour son interface (bleu, rouge, vert olive). Si on peut toujours discuter les goûts et les couleurs, ces teintes avaient parfois l'inconvénient de "noyer" un peu le contenu ou de le rendre moins facilement identifiable.
Pour la version 5.0, je suis revenu à un gris plus sobre, pour le fond comme l'ensemble des cadres (en 2 nuances selon le contexte). Chaque zone présente désormais une bordure claire ininterrompue pour faciliter sa délimitation et ses coins présentent un aspect différent selon le cas :
- carrés pour les éléments de navigation et les précisions textuelles
- arrondis pour le contenu proprement dit
De plus, l'interface est désormais "flexible" car la largeur des cadres, autrefois fixe, dépend maintenant de celle de la fenêtre d'affichage. La disposition globale reste la même mais l'affichage est à la fois plus adapté aux grands écrans (dont on peut exploiter la pleine largeur) comme aux plus petits (jusqu'à une largeur minimale de 532 pixels en zoom 100%). En particulier, l'agencement des groupes d'aperçus cliquables n'est plus figé mais s'adapte automatiquement à la largeur de fenêtre.
Enfin, un changement de police associé à des symboles plus espacés et une écriture plus rigoureuse des fichiers de formatage (CSS) améliore le confort de lecture même pour les plus petits caractères.
Depuis les débuts du site, j'ai toujours eu le souci de mettre en avant le contenu en réduisant autant que possible la surface couverte par les éléments de navigation principaux, concentrés au sommet de chaque page.
Tout en conservant les fonctionnalités existantes et en y ajoutant des nouvelles (voir point suivant), la hauteur de l'ensemble bannière + barre de navigation est passée de 208 à 126 pixels entre les versions 4.0 et 5.0 du site, soit une diminution de près de 40%. Cette réduction de taille permet de limiter le défilement vertical de chaque page du site et donc de faciliter sa lecture.
Un site peut être attrayant graphiquement mais pénible à utiliser si sa navigation est mal pensée et donc peu intuitive. Jusqu'à la version 4.0, les liens sur ASTHALIS étaient majoritairement textuels et complétés d'icônes servant seulement de rappel visuel. Ces icônes sont désormais majoritairement cliquables, reconnaissables à leur semi-transparence lorsqu'on les survole et comprennent des info-bulles pour les internautes qui préfèrent l'image au texte quant il est question d'explorer les lieux.
Par ailleurs, la bannière du site comprend désormais une série d'icônes-raccourcis cliquables à gauche du logo ASTHALIS. Les 7 premières correspondent aux 7 dossiers thématiques du site (l'info-bulle précise lequel pour chaque icône) et permettent d'y accéder directement sans passer par la page sommaire. La 8ème icône-raccourci renvoie au LEXIQUE du site, qui s'ouvre dans un onglet différent pour être consulté sans interrompre la navigation en cours.
Enfin, le grand oeil clignant régulièrement dans la bannière est un raccourci vers la rubrique CONTACT et les 4 icônes-raccourcis à sa droite renvoient à des sites extérieurs.
Cet ensemble de modifications permet de respecter ce que j'appelle la règle des 3 clics : où que l'on se trouve sur ASTHALIS, on peut toujours atteindre la page souhaitée en 3 clics de souris au maximum.
Parmi les constantes du site, j'ai toujours cherché à réduire au minimum le nombre de niveaux hiérarchiques des rubriques. Depuis les origines d'ASTHALIS, je n'ai jamais dépassé 3 niveaux pour son arborescence interne : dossier thématique, rubrique et sous-rubrique. Cette limite n'est pas un obstacle à la création d'un nouvel espace sur le site, elle privilégie la clarté et permet un accès plus rapide à la page souhaitée. Elle a montré ses preuves en pratique (tant pour la navigation que pour les mises à jour des pages) et j'ai donc décidé de garder les choses en l'état.
Après 4 premiers objectifs pensés pour les internautes habitués ou de passage, j'aborde maintenant des aspects plus structurels et moins visibles (voire totalement invisibles !) pour l'utilisateur mais tout aussi importants.
L'un des plus importants chantiers du site était de reprendre l'intégralité de son code pour le rendre plus concis et lisible, en un mot plus efficace. Pour cela, j'ai voulu appronfondir et mettre à jour mes connaissances du langage HTML et je me suis largement appuyé sur l'excellente chaîne Youtube de FormationVidéo, que je recommande chaudement aux webmasters débutants comme confirmés. Armé de cette nouvelle expérience, j'ai repris toute la construction d'une page-type avant de penser à l'intégration du contenu proprement dit, tout en conservant une forme simple facilitant les mises à jour.
Au terme de ce large remaniement, chaque page de la version 5.0 "pèse" en moyenne 20% moins lourd que son homologue de la version 4.0 et est désormais conforme aux règles du W3C (World Wide Web Consortium, organisme de standardisation et des "bonnes pratiques" sur la toile), après validation directe sur son site officiel.
Parallèlement à ces évolutions, je souhaitais optimiser la taille mémoire du site. Cela impliquait, entre autres, d'en retirer les fichiers et pages inutiles ou obsolètes, de traiter différemment certaines images (taille plus réduite des aperçus, compression supérieure tout en gardant une qualité graphique suffisante) et certains fichiers et d'héberger le maximum des vidéos les plus exigeantes sur un site spécialisé.
Concrètement, hormis un "grand ménage" dans les éléments du site, j'ai utilisé des aperçus graphiques de taille plus réduite (mais suffisamment évocateurs et ouvrant désormais l'image pleine échelle correspondante dans un onglet différent), massivement fait appel au format 7Z propre à 7-Zip (plus performant en compression que le très populaire format ZIP inauguré par WinZip) pour les fichiers téléchargeables et augmenté la part des vidéos hébergées sur YouTube.
Pour un contenu globalement comparable, le résultat de toutes ces mesures est une réduction de près de 20% de la taille mémoire globale du suite, avec le détail par version à la date du 11/03/20 :
ASTHALIS 4.0 : 628 pages, 20784 fichiers, 342 dossiers, 4.03 Go
ASTHALIS 5.0 : 607 pages, 19396 fichiers, 727 dossiers, 3.25 Go