Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Rubrique Divers & Variés

Flânez sur les lectures relatant les péripéties souvent inintéressantes de l’auteur de ce site !

Rubrique Divers & Variés

CSS Summer Refresh 2007 pour Babylon Design 7

Voilà en partie la raison de deux mois d’inactivité sur le site ! Je profite du concours Cascading Style Summer Refresh 2007 pour refondre profondément Babylon Design et passer à la version №7. Voici un petit compte rendu de 60 jours de remue-méninges.

Soixante jours pour pondre un refonte, c’est long ! Mais entre les week-ends à l’autre bout de la France, les pendaisons de crémaillière tardives et le boulot, ce n’était pas évident. Surtout que j’ai pris soin de ne pas bacler le travail comme pour la version №6 qui avait nécessité un bon nombre de retouches.

Voyons point par point ce que cette nouvelle mouture nous apporte.

Le graphisme

Que de tergiversations pour me fixer sur un design ! Cette nouvelle version avait pour but de casser avec les anciens design mais de garder l’identité visuelle du site, cruel paradoxe…

Une chose était sûre, le logo devait changer. En effet, après plus 5 ans de bons et loyaux services le logo style aqua me resortait par les trous de nez.

C’est alors qu’après 4 versions ayant inexorablement terminées à la poubelle (voir ci-dessous) que j’ai pu créer le design qui me convenait.

Le nouveau design conserve donc la sobriéte grise extra-claire, renforce le contraste des typos avec un bleu plus profond mais arbore maintenant le orange en couleur complémentaire.

Le fameux picto du tube à essai reste présent même s’il est relègué sur un plan moins visible. Je ne pouvais décemment pas le supprimer après que ma femme m’est dit que L’identité de Babylon Design c’est tout de même un tube à essai enflammé glougloutant…. No comment.

En outre, le site accueille dorénavant une feuille de style pour l’impression à part entière.

La typographie et la mise en page

Dans un souci de clareté, j’ai accordé une attention particulière à la typographie. Des grandes polices sérifées pour la titrage et un interlignage bien aéré permettront une lecture aisée.

Le site supporte d’ailleurs assez bien 4 niveaux de grossissement de texte.

Les animations

Je profite de ce petit rafraîchissement pour intégrer une librairie Javascript.

Après avoir longtemps utilisé Script.aculo.us, j’utilise à présent Jquery. En effet, Jquery est beaucoup plus modulable et aisé d’utilisation.

C’est donc avec Jquery que j’ai intégré quelques animations sans intérêts mais indispensables :

  • Animation sur le menu des pages annexes
  • Animation sur le lien vers le RSS
  • Animations sur le moteur de recherche en Ajax
  • Animation sur la navigation des billets connexes
  • Animation Lightbox sur certaines images des billets

Suppressions & nouveautés

De substantielles apparitions :

  • Raccourcis claviers pour la navigation
  • Raccourcis d’évitement
  • Nouvelle page Plan du site
  • Nouvelle page Aide
  • Intégration du plugin DotClear Billets Connexes (page suivante/précédente dans les billets)
  • Animations Javascript
  • Moteur de recherche en Ajax accessible

Mais aussi pas mal d’abbattage :

  • Suppression de la colonne de droite
  • Suppression des liens dans la colonne de droite
  • Suppression de la page portfolio (bientôt fusionée avec la page Webmaster)
  • Suppression de la photo du Webmaster
  • Suppression du calendrier
  • Suppression du Flash

Petit bonus

Comme j’adore les PNG et que j’aime subtilement modifier la couleur du site suivant mes humeurs, voici un petit sélecteur de couleurs pour changer la couleur de fond.

R:
G:
B:
#

Conclusion

Lache tes coms et vote pour moi au Cascading Style Summer Refresh 2007 !


Ce que nos lecteurs en disent :

  1. rk2studio

    Tres beau design et sa plaisir de voir que babylon design est de retour, cependant l’ancien design ( moin beau ) etait peut-etre plus naviguable, " on trouvais mieut ce qu’on cherchait "

    Sinon en outre il est domage d’abandoner les bord arondit, les effet de transparence sont bien sympa mais le fond animé de la version precedente aussi.

    Il faudra peut-etre un mixe des deux ?

    Enfin, quand meme bravo car toutes est dans le respect du W3C et sa reste un gros travail, qui se doit être meriter. Resultat quand meme tres clean et bravo ;)

    BY BY

    • Shemu

      Merci ! Mais il n’y avait pas de fond animé sur la version précédente !

  2. MiniKeb

    Je suis entièrement d’accord avec votre femme,
    votre logo est trooop beau, et je dois avouer qu’il a contribuer à me faire accroché au site.
    "Ouah le beau logo, simple, efficace, joli…je vais lire ce que raconte ce site pour voir si tout est aussi simple et efficace que le logo"
    Et c’était le cas.
    En tout cas bravo pour la refonte, c’est très réussi à mon goût.

  3. MiniKeb

    Au fait, je suis curieux de savoir comment vous faites les div de couleur transparentes?
    Est ce une image "transparente" utilisée en background?

    • Shemu

      Oui, il s’agit de PNG.

  4. Lili-One

    Sympa la refonte, quoique j’ai failli croire que je m’étais trompée de site et aller voir ailleurs lol

  5. Terry

    Pas mal la refonte du design. Je reste un peu déçu quand même :). Je suis pas fan de la couleur du fond et dommage que l’animation du menu de gauche, les petites icônes ne soit pas fluide.

  6. Hervé

    C’est beau ! On en mangerait ! Le coup du sélecteur de couleur est bluffant, les .png sont nos amies :-)
    Bravo, je reviens toujours avec plaisir sur ce site pour apprendre de nouvelles choses…

  7. jparia

    Bonjour,
    je viens de découvrir votre site suite à une recherche,
    il est très enrichissant.
    Remarque, le sélecteur de couleur ne fonctionne pas sous IE6…

  8. Paco

    il est cool le design, je préfère celui là, mais je suis toujours nostalgique de la version 6 même si celle la se rapproche beaucoup,
    Continue à filer pleins d’astuces CSS xHTML et d’infographie, c’est carrément cool :)
    tchao!

Les commentaires sont clos.