Mon premier site

Le besoin

Sur LinkedIn, j’avais besoin d’un lien à partager avec les personnes qui souhaitaient mieux comprendre mon activité. Mon profil donne un premier aperçu ; le site me permet de guider les personnes intéressées vers des contenus plus précis. En quelques secondes, chacun doit pouvoir se repérer, identifier les différentes possibilités de navigation et savoir où approfondir le sujet.

J’ai aussi pensé aux personnes qui arriveront plus tard, lorsque mes projets auront une histoire à raconter. Les partenaires et investisseurs potentiels doivent pouvoir comprendre ce que je construis et suivre son évolution, y compris les résultats que ces projets généreront. J’ai donc prévu une structure capable d’accueillir de nouveaux contenus sans devoir être repensée à chaque fois. Les prochaines pages pourront voir le jour en même temps que les projets.

C’était la première fois que je réalisais un site. J’ai organisé le travail selon la méthode que j’utilise avec mes clients : des exigences claires, des choix argumentés et des vérifications avant la mise en ligne. Claude s’est chargé du développement ; j’ai défini les règles, évalué les propositions et testé les solutions. Pour la partie visuelle, j’ai travaillé sur le site réel en activant et en désactivant des thèmes à différents niveaux, puis j’ai évalué le résultat sur mes deux écrans et mon téléphone. Je n’ai publié que ce que j’avais déjà pu prévisualiser.

Contraintes

J’ai fixé d’emblée plusieurs limites : un hébergement gratuit, aucune base de données et aucun cookie. L’accessibilité selon WCAG 2.2 AA et la qualité visuelle devaient aller de pair. Les contenus devaient rester lisibles même sans JavaScript et le site devait fonctionner correctement sur iPhone et iPad. J’ai prévu huit langues, dont l’arabe de droite à gauche et le chinois simplifié.

Choix et alternatives

1. Choix

   La page d’accueil s’ouvre sur un sélecteur de tuiles en 3D. Sur les ordinateurs moins puissants, il passe automatiquement à de simples cartes, tandis que sur téléphone, il devient une grille d’icônes semblable à celle des applications.

   Options écartées

   Tuiles disposées en anneau ; menu classique uniquement.

   Motif

   Le premier écran doit orienter immédiatement et montrer clairement comment poursuivre. La présentation s’adapte à l’appareil pour que la navigation reste rapide, même lorsque les ressources disponibles sont limitées.

2. Choix

   Le formulaire de contact exige une confirmation par e-mail. Je ne reçois le message qu’une fois que la personne qui l’a envoyé a ouvert le lien reçu.

   Options écartées

   Adresse e-mail publiée sur la page ; service de formulaires payant.

   Motif

   La confirmation empêche que le formulaire soit utilisé pour envoyer des e-mails à des inconnus en mon nom. J’ai conservé les données dans des outils que je contrôle.

3. Choix

   Pour mettre à jour les contenus, j’ai développé mon propre éditeur sur le site de test, accessible grâce à un code reçu par e-mail. Chaque modification génère un aperçu que je vérifie avant la publication.

   Options écartées

   CMS avec base de données ; modification manuelle des fichiers.

   Motif

   Je peux mettre à jour les textes sans toucher au code. L’aperçu me permet de vérifier le résultat avant qu’une modification soit rendue publique.

4. Choix

   Chaque texte est géré comme une donnée distincte du code, avec une version pour chacune des huit langues. S’il manque une traduction ou si un élément du menu dépasse l’espace disponible, la génération du site s’arrête.

   Options écartées

   Textes intégrés directement aux pages ; CMS externe.

   Motif

   Je peux modifier une phrase ou ajouter une langue sans intervenir sur le code. Les contrôles repèrent les traductions manquantes et les éléments de menu trop longs avant la mise en ligne.

5. Choix

   Le point de départ était une carte de visite noire mate avec une feuille d’or. Je l’ai transposée en une tuile centrale noire et polie, avec une icône dorée incrustée et une lumière rouge qui apparaît derrière le bord, comme un coffret qui s’ouvre. L’élégance, le luxe et la luxure étaient les mots directeurs. J’ai recherché les sites les plus primés, puisé mon inspiration dans l’atmosphère de mouvement et de lumière de ciaoenergy.com sans en copier le design et comparé le résultat à une version de test réalisée avec Lovable. C’est cette comparaison qui m’a conduit à conserver la lumière rouge en arrière-plan. Le rouge reste un effet lumineux ou signale la page active, tandis que tous les éléments cliquables partagent la même finition laquée.

   Options écartées

   Icônes blanches ; or uniforme ; marbre veiné, testé puis supprimé ; images sur les tuiles ; navigation par points.

   Motif

   Je voulais une identité visuelle reconnaissable avant même que l’on commence à lire. J’ai harmonisé les surfaces, la lumière et les couleurs, en attribuant une fonction précise à chaque élément. Les essais m’ont permis de déterminer quelles solutions renforçaient cette orientation et lesquelles nuisaient à la cohérence de l’ensemble.

6. Choix

   Pour concevoir l’expérience utilisateur, j’ai consulté Nielsen Norman Group, les recommandations du W3C sur les menus et l’accessibilité, ainsi que les conseils relatifs aux carrousels, notamment ceux concernant les flèches sous les tuiles. Dans les pages intérieures, par exemple, les éléments du menu restent visibles sur ordinateur, car les menus masqués sont beaucoup moins utilisés.

   Options écartées

   Décisions fondées uniquement sur les goûts personnels.

   Motif

   Je voulais que les décisions qui influencent la navigation reposent sur des recommandations documentées. Je me suis appuyé sur les ressources disponibles pour déterminer comment accéder aux contenus et interagir avec les éléments de l’interface.

Résultat

Le site est en ligne en huit langues. Les contrôles automatisés d’accessibilité ne signalent aucune erreur sur aucune page. Après optimisation, le poids de la page d’accueil avec la 3D a diminué de 57%. Chaque modification déclenche des tests automatiques sur toutes les pages, y compris des vérifications aux dimensions d’écran de l’iPhone et de l’iPad.

Les tests ne couvrent pas tout, et il est important de le préciser. J’ai testé manuellement le site sur iPhone et iPad. Je l’ai également testé avec Chrome et Firefox ; Safari sur Mac n’a pas été testé de manière systématique. Certains tests sur téléphone et tablette sont réalisés dans des environnements simulés. Pour l’instant, les traductions sont automatisées ; dans un second temps, je ferai appel à des services de traduction professionnels.