Voici donc la troisième version du design du site pixenjoy.com. C’est une version en cours d’élaboration puisque pour le moment, seule la partie blog est développée. Je n’étais pas satisfait de la version précédente, je me suis donc remis à l’ouvrage pour produire un design plus soft.

Explications

J’ai volontairement voulu m’éloigner des styles à la Web 2.0 pour quelque chose de plus personnel. J’ai choisi une ambiance apaisante, dans des tons naturels (marron, beige, vert …). J’ai également souhaité sortir des présentations habituelles du blog (articles en fil indienne avec menu à droite contenant archives, rubriques, blogoliste …) en mettant en avant uniquement l’article le plus récent. Les autres articles s’affichent en liste dans la colonne de droite. Le sujet du futur article sera annoncé sous l’article principal. Autant que possible j’ai essayé que l’affichage reste homogène dans les principaux navigateurs, quelques petites différences existent mais normalement rien de gênant pour la lecture des pages. Bien sure c’est dans les navigateurs modernes que ce site s’affiche avec son meilleur potentiel.

Il subsiste un problème sous IE6 pour l’affichage des images PNG transparentes. Mes images sont insérées dans ma page xhtml via la balise <img>, j’ai donc utilisé le javascript de ce tutoriel. Cependant, mes images transparentes sont déformées bien que j’ai indiqué la largeur et la longueur de celles ci en attribut de ma balise <img> comme précisé dans la documentation du javascript cité ci-dessus. Si quelqu’un a une idée, je suis preneur.

Edit: 21.06.2007
Finalement j’ai laissé tomber les PNG transparents avec script javascript, pour des PNG avec fonds. Mon logo a été incrusté dans l’image de fond de mon en-tête, pas terrible mais bon. J’ai fais des ajustements de positionnement des autres images pour IE6 et IE7 dans des feuilles de styles séparées. Mes essais de gif transparents étaient vraiment de mauvaises qualités.
Au final, pas mal de temps perdu pour combler les lacunes de IE. Je hais les produits Microdobe.