L'ancien design avait quelque bonnes idées mais ne me plaisait pas complètement. Après quelques mois de loyaux services, j'ai décidé de le mettre à jour. Voici mes commentaires sur les améliorations.
Electro V1 était un peu triste avec son ton gris prédominant, ce qui était un peu paradoxal pour un site dont le nom contient le mot « Psychedelic ». En même temps je ne suis pas un gros fan des mélanges de couleurs pétantes. J'ai donc opté pour un un dégradé arc-en-ciel léger en fond. J'ai quand même retiré le vert du dégradé car c'est une couleur qui reste très difficile à accorder.
J'ai souhaité aussi améliorer le confort de lecture, avec désormais un fond clair, un peu à la façon des fenêtre d'un système d'exploitation. J'ai aussi agrandi la police de caractères, et élargi un peu la page pour que les blocs de code ne se voient pas tout de suite affublés d'ascenceurs.
Pour le titre, j'ai choisi cette fois-ci une police qui me plait davantage, et j'ai souhaité aussi corriger son manque de visibilité. Donc hop, taille accrue et tons clairs.
Pour le menu, je voulais avoir une image de fond plutôt qu'une bête bande de couleur comme dans la V1. Je souhaitais quand même garder les éléments du menu sous forme de texte. J'avais déjà fait une tentative d'éléments sous forme d'image avec mon thème « Orange Twister », mais la maintenance du site avec cette technique devient plus difficile.
En revanche il y a une difficulté à régler avec l'approche fond en image + vrai texte dans le xhtml : si on agrandit la police à l'aide de son navigateur, le texte va être décalé par rapport à son fond. J'ai souhaité me pencher sur le problème. Après de nombreux prototypes (des milliers en fait ! (ah non, ça c'est la pub pour l'aspirateur Dyson)) j'ai enfin obtenu une solution pas trop mauvaise qui supporte un redimensionnement de quelques pas.
Vous pouvez tester sous Firefox en appuyant sur la touche Ctrl tout en manipulant la molette de la souris. Ça utilise la méthode des images coulissantes, inspirée par des tutoriaux sur A list apart. Il y avait cependant une difficulté nouvelle : j'utilise des images avec de la transparence, et deux images transparentes qui se superposent, ça donne un effet peu glorieux. Trouver la bonne méthode a donc pris du temps, d'autant plus que je ne voulais pas alourdir le balisage avec pleins de divs superflus.
J'ai fait une série d'images dont chacune participe à l'astuce. Vous en aurez une idée en affichant les images composant la page dans le répertoire du style Electro V2. L'astuce ne permet pas un redimensionnement infini, mais c'est un bon compromis entre une apparence continue (pas de problème de jointures) et une souplesse de consultation (agrandissement et réduction de la police assez important tout de même).
Le reste des améliorations ce sont quelques retouches sur les couleurs et la typo. Ah, j'ai ajouté un « optimisé pour vos yeux » dans le pied-de-page. Je pense que ça doit être un n-ième site avec un « optimisé pour IE 6 » qui m'a donné envie de mettre cette phrase sur mon site aujourd'hui ^^
D'ailleurs concernant IE, aussi connu sous le nom du navigateur obsolète, je n'ai pu tester directement qu'avec IE5. L'affichage est super mauvais mais ça reste accessible (aspect très important pour moi).
Pour IE6 il est tellement lourd à installer que je verrai ça plus tard : trouver la page qui va bien sur le site de Microsoft pour chopper l'install off-line ; télécharger chais plus combien de dizaines de Mo ; attendre patiamment l'install et la mise à jour du système ; redémarrer... voilà une tâche pénible, tout ça pour avoir un produit non fini sur son ordinateur.
En revanche c'est avec plaisir que j'ai ajusté mon nouveau style à Opera 8. Cette 8e version vient de sortir. Un navigateur facile à installer, et qui supporte bien les standards Web. J'ai juste eu un margin: 0 à ajouter et c'était réglé.
J'aimerais bien tester sous Safari aussi. Vincent, c'est peut-être toi qui vas t'y coller ^^ Le support des standards est bon dans Safari, et sera encore meilleur dans le futur avec cette brutasse de Dave Hyatt qui s'apprête à remporter le challenge de l'Acid2 Test :) Il y a juste ce pénible manque de cohérence des couleurs entre une CSS et les PNG, mais au moins je suis au courant du bug, ça sera une surprise en moins vis-à-vis des éventuels soucis.
La version 1 du style Electro demeure disponible dans la liste des thèmes de votre navigateur.