Un p'tit coup de pinceau !

Du rangement et un bon coup de peinture ! Eh oui ! J'ai pris quelques jours pour toiletter le site dont je n'ai guère le temps de m'occuper, en tout cas pas autant que je le souhaiterais...

Réorganisation de la navigation

J'ai réorganisé la navigation parmi les tutoriels sur Jimdo (voir le menu ci-contre : le rangement est maintenant thématique, peu ou prou). J'en ai profité pour fusionner quelques tutoriels, en déplacer d'autres, bref, j'ai mis de l'ordre. Au passage, j'ai ajouté sur la plupart d'entre eux les nouveaux boutons de partage Facebook, Twitter, etc (social bookmarking comme on dit). Le travail est loin d'être fini, puisqu'il me reste à ajouter sur les pages de garde (comme celle-ci) un sommaire présentant la liste des tutoriels contenus dans la section correspondante. De la même façon, j'ai mis à jour le blog, ses archives et ses catégories, en éliminant de vieux billets que j'avais insérés pour faire des tests et... oubliés depuis !

Rafraîchissement du design

Surtout, j'ai donné un bon coup de pinceau au site ! En fait, étant passée sous Mac, je n'utilise plus qu'Opera et Safari comme navigateurs - et de temps en temps, je lance Firefox, mais rarement. Du coup, quand j'ai lancé Internet Explorer 8 sur mon ancien PC, j'ai eu un choc : le design du site était vraiment déformé, à cause de problèmes de marges que je n'ai réglés qu'après avoir bataillé pendant 3 heures !... Au final, j'ai décidé de faire des modifications dans la présentation, en introduisant pas mal de propriétés CSS3 : ombres portées sans images, coins arrondis, ombre interne, etc.

 

Ces propriétés hélas ne sont pas implémentées dans IE8 et à peine dans IE9 (incroyable que le nouveau joujou de Microsoft ne soit pas distribué sous Win XP d'ailleurs !) Du coup, le site est un peu "déshabillé" de ses atours sous IE8. Bref, je ne le dirais jamais assez : utilisez Opera, Safari, Chrome ou Firefox ! Les sites resplendissent de santé grâce à eux :-)

Pour les visiteurs qui (encore bien nombreux, hélas !) arrivent ici au volant d'Internet Explorer (sic), voici donc un aperçu en images de ce que vous manquez :

Capture nouveau design du site
Cliquez sur la capture pour la voir en plus grand

A la loupe

Des titres en 3D

Des titres structurants en 3D, subtilement ombrés et arrondis (c'est très léger). Ils sont réalisés en CSS3, sans la moindre image.

Ombre portée

 

 

 

Une ombre portée appliquée au bloc principal de contenu : en CSS3, elle donne un (là encore, très subtil) relief à la page.

Capture de la rotation des étiquettes

 

 

Une propriété des CSS3 permet d'appliquer aux étiquettes de la colonne latérale un léger mouvement de rotation. Là encore, pas d'utilisation d'images : le graphisme est rendu par des propriétés CSS.

Capture étiquettes et rotation

 

 

 

Comme le mouvement de rotation qu'on peut impulser est paramétrable, j'en ai appliqué un différent à chaque étiquette-titre, histoire de donner un air un peu désinvolte - en tout cas faussement négligé - à la colonne latérale.

Bidouillage sous le capot

J'ai surtout profité de ce coup de neuf pour réécrire la feuille de style de mon design personnel. Elle était désordonnée ; elle manquait de rationalité et de rigueur. J'ai donc tout repris, réécrit et commenté. Au passage, j'ai appris plein de choses sur le fonctionnement de Jimdo (ah ! la fameuse et intrusive class .n !... )

Écrire commentaire

Commentaires : 3
  • #1

    FilmsdeLover.com (mardi, 08 mars 2011 16:02)

    Toujours aussi beau ton site. Et toujours aussi utile. Une mine. Merci donc à toi et au plaisir de te retrouver bientôt sur le forum. ;)

  • #2

    Artdeos (lundi, 21 mars 2011 15:45)

    Merci pour tout ce partage d'expérience ;-)

  • #3

    Nina-grafic (vendredi, 22 avril 2011 09:04)

    Merci pour ton site qui m'a énormément aidé, par curiosité c'est quoi la class .n ?

Ruban