Accéder au contenu principal
logo chris gaillard webdesign Grenoble chrisgaillard.com webdesign & développement

AFIS

Refonte site Internet avec SPIP

Rédigé le 22 mai 2019 par chris
Domaine : Scientifique | Education | Technologies : Responsive webdesign | Spip |

J’ai eu la mission de créer la nouvelle version du site Internet de l’AFIS, du cahier des charges au Webdesign, création graphique pour le web et développement html css avec le CMS SPIP. Ses équipes sont basés dans toute la France avec quelques interlocuteurs à Grenoble.

Le site Internet de l’Association Française pour l’Information Scientifique existe depuis 2003 et diffuse gratuitement les articles qu’elle publie dans sa revue trimestrielle Science et Pseudo-Sciences. Elle diffuse également les informations relatives à la vie de l’association. Son objectif est de « promouvoir la science » et donner « un éclairage sur des sujets de société qui sont traités de manière pseudo-scientifique et font l’objet de désinformation ou de vives polémiques. »

Constat sur le site Internet existant

Le site contient plus de 4000 articles scientifiques documentés écrits par des spécialistes reconnus, mais souffre d’un manque de visibilité. Le site n’intègre pas les technologies d’affichage permettant une bonne expérience utilisateur, une bonne relation avec les réseaux sociaux et une captation de son auditoire.

Analyse du site Internet existant

Le site n’est pas responsive, sa taille ne s’adapte pas à la largeur de l’écran , il est conseillé de le faire pour offrir une meilleure expérience utilisateur sur mobile, tablette et desktop et améliorer son référencement naturel sur Google.
Pas de certificat ssl, l’url est en http. Cela nuit au référencement, à la sécurité et peut afficher des messages alarmants aux visiteurs remplissant un champ de recherche ou un formulaire, d’autant que le site contient une partie boutique en ligne.
Il était propulsé par le CMS Spip 2.1 sortie en 2010, en restant en 2.1, on risquait d’avoir des problèmes de sécurité, d’incompatibilité avec les versions d’apache, de php de l’hébergeur. Quelques contenus s’ouvraient dans des pop-ups, impossibles à référencer, et bannis par certains navigateurs ou plug-ins antispam...

webdesign ergonomie

La page d’accueil était chargée, dense, on repérait mal les nouveautés, il y avait une restructuration et une simplification ergonomique à travailler. Design plus aéré à produire en cohésion avec la maquette de la revue papier beaucoup plus moderne. Les catégories étaient mises en avant par rapport aux articles qui devenaient secondaires. Il vaut mieux pousser le contenu plutôt que la structuration du site.
Pas d’illustrations sur certains articles, des images percutantes ou énigmatiques attirent plus les visiteurs.

Ma mission de webdesigner

J’ai commencé par formuler un cahier des charges sur les objectifs à atteindre aboutissant à une maquette fonctionnelle mobile et desktop. Cette maquette visant à structurer en premier lieu la page d’accueil et à formaliser son fonctionnement. Une fois validés les grands principes de structuration de la home et d’organisation des contenus, ces principes ont été appliqués aux autres pages types du site : pages de listes, pages d’articles, pages pérennes, la boutique, en s’efforçant d’avoir un site qui capte plus le visiteur avec des propositions d’articles.
S’en est suivi logiquement la phase de création graphique, l’ancien site étant très dense, je suis parti sur une proposition épurée en trouvant des codes graphiques communs à la revue papier. Avec un design qui fasse sens, des couleurs affectées par grands thèmes et faire place à l’image pour attirer l’attention, intriguer.
Webdesign et wireframe

Mise à jour du CMS

Le site étant propulsé par le CMS SPIP dans une ancienne version, il a déjà fallu faire marcher l’ensemble sur des outils à jour en passant par toutes les versions intermédiaires du CMS en conservant des copies à chaque fois en cas de problèmes sérieux. Mais avec peu de plug-ins et un usage proche des fondamentaux du CMS SPIP, ces opérations se sont déroulées avec peu d’encombres.

Développementdu Squelettes SPIP

J’ai ensuite créé le nouveau squelette SPIP du site en adéquation avec le webdesign et le wireframe validé. Avec de nombreuses étapes de validation et nombre d’adaptations en cours de routes. Les équipes d’administration ont dû fournir un gros travail de réorganisation et d’illustrations des articles avant de pouvoir mettre le site en ligne. La durée totale du projet a duré environ un an et demi.

Visitez le site
Webdesign final




Suivant Grenoble Drone