Un peu sur le même principe que les équipes cyclistes qui changent souvent de tenue à l'occasion d'une nouvelle année (que ce soit suite à un changement de sponsor(s) ou simplement pour moderniser sa tenue), velowire a également choisi la nouvelle année pour changer de tenue.

Enfin vous me direz et je vous comprendrai ! En effet, cela faisait un certain temps que j'avais bien pour projet de tout changer, mais le temps me manquait ! Le temps est donc enfin venu pour que le site se mette à jour avec un design plus compatible avec son temps et ... par la même occasion adapté automatiquement en affichage sur mobile, pour que vous puissiez consulter le contenu de partout (sur ordinateur, mobile ou tablette).

Un design qui datait !

Inchangé depuis une petite quinzaine d'années au moins*, le design de velowire.com n'était .. et c'est le moins que l'on puisse dire .. plus vraiment de notre temps !

* Lorsque paris.thover.com avait laissé place à velowire.com en juin 2011, le design était déjà identique, seules les couleurs avaient été modifiées à cette occasion.

Depuis, le smartphone est venu prendre une place importante (à titre d'exemple : malgré le fait qu'il n'était donc pas du tout adapté, environ 70% des visiteurs de velowire.com venaient depuis un smartphone ou une tablette en 2023 !) et il était donc important de faire en sorte que le site s'adapte à la taille de l'écran de l'équipement depuis lequel il est visité.

Alors que cela figurait donc sur ma "todo liste" depuis une petite dizaine d'années, j'ai depuis ce temps à chaque fois privilégié la production de contenus (et ma vie perso, j'avoue !) à la modification du contenant et cela devenait donc vraiment un problème maintenant !

Un nouveau design pour bien démarrer 2024

La nouvelle année se profilant, l'idée était donc née de créer un design radicalement différent du précédent et de rendre le site "réactif" (la version française de responsive) à la même occasion pour que celui-ci devienne parfaitement consultable depuis un smartphone.

Avec un petit peu d'aide de l'ami ChatGPT pour créer la base du site (ne lui faites pas aveuglement confiance hein, il faut tout de même bien savoir développer en HTML et CSS pour créer un site fonctionnel avec le rendu souhaité, mais il donne une bonne base de départ), j'ai donc mis à profit cette période calme du mois de décembre pour travailler sur le rendu souhaité.

Très volontairement, j'ai choisi un rendu en "mode sombre", puisque celui-ci présente plusieurs avantages :

• un rendu plus exclusif
• une diminution de la lumière qui vient "agresser" les yeux du lecteur
• la possibilité de rester concentré plus longtemps derrière un écran
  (le mode clair fatigue les yeux à cause de sa forte intensité en lumière blanche, et c'est encore plus flagrant lorsqu'il fait nuit et ce d'autant plus sur un smartphone)
• la diminution associée de la lumière bleue permet d'éviter des troubles de l'endormissement et du sommeil
  (je ne voudrais pas avoir la responsabilité d'y contribuer ! 😀 ; le thème créé pour le site ne filtre toutefois pas la lumière bleue entièrement, on a besoin des couleurs vives pour que ça reste attrayant 😄)
• le site en devient plus accessible puisque le mode sombre permet une meilleure visibilité de l'information aux malvoyants et daltoniens
• la consommation plus faible d'énergie, générée par la consultation du site : un pixel noir étant éteint, celui-ci ne consomme aucune énergie ; les autres pixels de couleurs proches du noir consomment également moins
  C'est important, notamment lorsqu'on est sur un smartphone
• un avantage dans le design du site puisqu'un fond de couleur sombre ou noir permet l'utilisation plus simple de couleurs, comme je peux désormais le faire en appliquant chacune des couleurs qui composent le logo de velowire : le vert, le jaune, le doré, le rouge et le bleu

Comme vous l'avez remarqué, j'ai mentionné "mode sombre" entre guillemets. En effet, le site est uniquement proposé (du moins à ce stade !) avec cette palette de couleurs, un "mode classic" (ou clair) n'est donc pas proposé.

Le "mode sombre" de ce design peut également présenter quelques inconvénients, que je ne mentionne pas ici. Je suis donc preneur de vos éventuels retours sur ce choix, que vous pourriez trouver trop tranchant !

Autres éléments volontairement introduits dans ce design : une barre en haut et une barre en bas qui restent fixes, avec le contenu qui bouge entre les deux. Aussi bien sur mobile que sur ordinateur, cela fonctionne. Seulement, à cause du manque de place sur mobile, la barre du haut ne peut contenir tout le menu. Celui-ci est donc présenté sous forme de "hamburger menu", c'est-à-dire en s'appuyant sur la convention adoptée de tous de mettre le menu derrière une icône de 3 barres horizontales. De cette façon, un certain nombre de choses (l'accès à la page d'accueil, au moteur de recherche, au changement de la langue, au menu, aux réseaux sociaux et aux mentions de copyright et de moyens de contact) reste accessible à tout moment, indépendamment du contenu que l'on consulte et de l'endroit où on se trouve sur la page en question.

Une utilisation plus appuyée d'icônes au sein du site fait également partie des choix réalisés dans le cadre de cette refonte. Faciles à reconnaître, elles aident à guider le visiteur dans ses choix dans le menu ou dans sa compréhension des informations affichées.

L'affichage des "live" (émission TV ou suivi écrit d'une course cycliste) évolue également et gagne en visibilité, sans pour autant dégrader la consultation des autres contenus. Au sein des articles je vais également prochainement introduire quelques éléments nouveaux en termes de design, avec par exemple la façon dont sont mentionnés des propos de personnes citées au sein d'un article.

Ensuite, l'affichage des publicités devrait être un peu plus balancé que sur la version précédente du site. La publicité reste nécessaire pour permettre au site de survivre (l'hébergement a un coût non négligeable et les publicités payent au moins cela, pour le temps passé dessus il est illusoire de penser que ça le permette à ce stade !).

Enfin, comme mentionné ci-dessus dans les avantages du "mode sombre", je voulais pouvoir utiliser plus de couleurs différentes (et les couleurs du logo s'y prêtent très bien !) au sein du contenu, pour pouvoir mieux mettre en avant certaines parties du contenu.

Certaines optimisations restent encore possibles pour tirer profit au maximum de ce nouveau design (notamment dans le rendu sur mobile). Celles-ci seront opérées dans les semaines et mois à venir, mais ne devraient pas donner lieu à des changements radicaux (je pense par exemple à la façon dont les étapes et les résultats sont affichés sur mobile dans le calendrier cycliste UCI).

Un aperçu du avant - après

J'en suis pas nostalgique, mais en comparant l'avant/après, on se rend tout de même le mieux compte du grand changement (et progrès !) que représente cette refonte du site.

Voici en quelques exemples d'avant/après ce que ça donne :

Et de nouveaux projets encore ...

Maintenant que le site est compatible mobile, cela ouvre l'opportunité de développer une application mobile, pour Android et iOS, afin que vous puissiez utiliser velowire encore plus facilement sur mobile. Cela permettra par exemple d'intégrer les cartes des courses cyclistes dans une rubrique dédiée, qui pourrait par exemple vous permettre de vous positionner sur la carte par rapport au parcours de la course !

Et vous, avez-vous d'autres idées pour velowire ? N'hésitez pas à m'en faire part dans les commentaires !

door Thomas Vergouwen
Vond u dit artikel interessant? Laat het uw vrienden op Facebook weten door op de buttons hieronder te klikken!

1 commentaire | 1868 vues

cette publication est référencée dans : La vie de ce site

Ajoutez votre commentaire

Votre nom
*
Votre adresse e-mail
*
[cette adresse ne sera jamais publiée mais est uniquement utilisée pour éventuellement me permettre de vous contacter si nécessaire et pour recevoir les notifications de nouveaux commentaires]
Restez au courant de nouveaux commentaires
Cochez cette case si vous voulez être prévenu de nouveaux commentaires sur cet article (vérifiez alors bien votre adresse e-mail pour être sûr de bien recevoir les notifications)
Votre commentaire


Attention !! Afin de lutter contre le spam vous devez donner la réponse à la question ci-dessous. La réponse doit être donnée en chiffres entre 2 et 100. Si la réponse à la question n'est pas donnée ou est incorrecte, les autres informations sur ce formulaire seront ignorées.

Combien font trois plus un ?


Publier la réponse