Old metal – Les dessous de la création

Comme promis, voici la démarche que j’ai utilisée pour créer le visuel Old metal pour CSS Zen Garden. Elle diffère assez peu de celle que j’utilise habituellement. La principale différence vient du fait que pour une fois le code HTML était imposé ce qui induisait des contraintes supplémentaires.

Préambule

J’ai mis la main il y a quelques années sur une série de photos libres de droits mettant en scène des plaques de différents métaux. L’une d’elle m’a immédiatement fascinée. Je l’ai utilisée comme base pour le visuel de la première mouture de Dying Culture. Malheureusement avec l’arrivée du blog, les titres en images n’étaient plus appropriés et je ne voulais pas les remplacer par des titres en texte car le rendu visuel était bien moins intéressant. Je me suis donc résolu à changer de visuel pour celui qui est actuellement en place. Seulement j’aimais tellement l’ancien visuel que je ne voulais pas qu’il aille définitivement aux oubliettes du Web. J’ai donc décidé de le retravailler en vue de le soumettre au CSS Zen Garden de Dave Shea. C’est ambitieux, j’en ai conscience, voire même peut-être présomptueux mais j’espère qu’il sera accepté.

Dans un autre registre, on me demande régulièrement des conseils de développement Web. Je donne avec plaisir quelques conseils ci et là mais j’ai pleinement conscience que souvent ce ne sont pas les détails qui pêchent mais carrément la méthodologie complète. Ceci n’est pas un reproche, tout débutant par définition ne sait pas comment aborder les problèmes auxquels il est confronté. C’est avec l’expérience et les erreurs commises qu’on acquiert une méthode de travail efficace. Je vais donc détailler ma démarche dans la conception de ce visuel. N’y voyez pas la manifestation d’un ego hypertrophié. Ce ne sont que des conseils et des méthodes tirées de mon expérience personnelle. Chacun peut faire des choix radicalement différents qui ne sont pas pourtant moins bons. Mon but est uniquement de vous donner une vision d’ensemble de ma méthode. Ensuite libre à vous de vous inspirer de tout ou partie pour vous forger votre propre méthode ou même de considérer qu’il n’y a rien d’intéressant là dedans à vos yeux.

Je ne vais utiliser que des logiciels libres ou gratuits à l’exception notable de Photoshop qui est incontournable dans son domaine. Cela montre bien qu’en terme de développement Web, la valeur ajoutée se situe dans la créativité et les compétences du développeur et non dans les outils eux même.

Croquis

Tout d’abord je commence par faire un croquis de ce que je veux obtenir. Bien que simpliste, ce croquis me permet d’avoir une idée des volumes et donc de l’équilibre global de la page. Je peux également grâce à cela estimer les tailles des différents éléments pour la maquette.

Maquette

Ensuite je passe à la maquette. Elle me permet de faire des essais de couleurs, de formes, d’agencement et me servira, une fois finalisée, de source pour mes images.

Généralement je travaille avec Photoshop dont j’apprécie la gestion des calques, les styles de calques, les tranches ainsi que l’exportation pour le Web. Le seul défaut est une mauvaise gestion du PNG en compression. Si vous préférez un outil libre alors essayez Gimp qui est vraiment bien mais, tout du moins à mes yeux, ne rivalise pas encore avec Photoshop pour la création de graphismes destinés au Web.

Nous allons commencer par créer la texture rocheuse qui servira de fond. Je veux qu’elle ressemble un peu à du charbon, qu’on ait l’impression d’une pierre très sombre avec un peu de relief. Obtenir cet effet est assez simple avec Photoshop, le problème ici est qu’il faut obligatoirement que cette texture puisse être utilisée comme motif pour le fond. Cela complique sérieusement la tâche. Heureusement j’ai trouvé sur l’excellent site theWebMachine un tutorial montrant une technique pour y arriver. Je m’en suis grandement inspiré mais j’y ai introduit quelques différences notamment j’ai utilisé une taille de 512 et non 256. Le but est de limiter le nombre de répétitions du motif afin justement que cela ne saute pas aux yeux qu’il s’agit d’un motif comme c’est trop souvent le cas. J’ai ensuite diminué la luminosité afin d’accentuer le côté charbon.

Voici à présent les 2 images qui vont nous servir de matériau de base pour ce visuel. Ces versions sont bien entendu réduites. Les versions originales font 3800×2500 en 300 dpi.

En ce qui concerne la police, je voulais une écriture manuscrite mais peu structurée. Après une petite recherche sur DaFont j’ai trouvé mon bonheur en la police Violation.

Voici ce que donne la maquette une fois terminée. Pour le moment les 3 menus sont regroupés en un sur la gauche mais c’est uniquement pour faciliter la création de la maquette et éviter de dupliquer inutilement des éléments.

Réalisation

Il est maintenant temps de créer la feuille de style pour le visuel. L’éditeur que j’utilise depuis des années est Top Style Lite. Il s’agit d’une version très allégée et gratuite de l’excellent éditeur Top style. Ma méthode est de développer avec Firefox jusqu’à ce que je sois satisfait du résultat. C’est à ce moment et pas avant que je teste mon design avec Internet Explorer.

Cela peut paraître étonnant comme démarche mais mon principe est que je veux coder proprement donc utiliser Firefox est un bon moyen de vérifier l’aspect de la page dans un navigateur conforme. Néanmoins je suis conscient qu’Internet Explorer détient une part de marché beaucoup trop importante pour être négligé. C’est pourquoi je m’attache ensuite à adapter ma feuille de style afin d’obtenir un rendu correct dans ce navigateur. Ainsi j’ai un code CSS globalement propre avec seulement quelques « bidouilles » concédées pour Internet Explorer. Cette démarche a fait ses preuves à maintes reprises mais elle suppose tout de même d’avoir en tête lors de la création de la feuille de style initiale les limitations d’Internet Explorer afin de ne pas introduire des choses impossibles à reproduire sous ce navigateur même en bidouillant.

Pour être sûr que le code CSS concernant les liens sera pris en compte partout, il faut respecter l’ordre de déclaration suivant : link, visited, hover, active. C’est un peu idiot mais certains navigateurs ayant une gestion assez spéciale de cela, seul cet ordre vous assure un rendu correct.

Tests

Une fois le visuel réalisé, il convient de tester son rendu dans le plus de navigateurs possibles. Ne disposant que d’un PC sous Windows pour le moment (Mon serveur Linux n’a toujours pas de nouvelle carte mère), j’ai utilisé la technique de Ethan Marcotte mise en oeuvre par Ryan Parman. Celle-ci permet d’avoir plusieurs versions d’Internet Explorer installées en même temps sur un poste.

Pour tester sur Mac, j’ai eu recours à l’excellent iCapture de Daniel Vine qui permet de tester l’apparence d’une page dans Safari.

Au final j’ai donc testé ce visuel sur les navigateurs suivants :

  • Mozilla 1.7 / Windows
  • Firefox 0.9 / Windows
  • Internet Explorer 6.0 / Windows
  • Internet Explorer 5.5 SP2 / Windows
  • Internet Explorer 5.01 SP2 / Windows
  • Opera 7.51 / Windows
  • Safari 1.2 / Mac

Corrections

Suite à ces tests j’ai donc effectué les quelques corrections nécessaires afin de limiter l’impact de la mauvaise gestion des CSS par certains navigateurs. Il y a finalement assez peu de hacks, et ceux-ci sont assez basiques. Ainsi ils ne compliquent pas outre mesure le code CSS. Si vous visualisez ce design avec un navigateur moderne (Firefox, Mozilla, Opera etc.) puis avec Internet Explorer vous constaterez que la version affichée par le navigateur de Microsoft est moins jolie. Cela est dû aux limitations de ce navigateur. Entendons nous bien, le site reste visuellement agréable et parfaitement navigable seulement pour profiter à 100% du visuel il faut utiliser un navigateur digne de ce nom. Cela rejoint la doctrine Don’t sell. Show ! qui, à mon sens, est la meilleure pour démocratiser l’utilisation des standards Web.

Conclusion

J’espère que ce billet vous aura donné quelques pistes quant à la démarche à adopter pour développer une page avec CSS. Comme je l’ai dit précédemment, ne vous sentez pas obligé de l’appliquer à la lettre. Piochez-y plutôt ce qui vous intéresse et adaptez-le à vos besoins.

Ce contenu a été publié dans Développement Web. Vous pouvez le mettre en favoris avec ce permalien.

15 réponses à Old metal – Les dessous de la création

  1. YoGi dit :

    > N’y voyez pas la manifestation d’un ?go hypertrophi?.

    peut-?tre voulais-tu dire d?meusur? ? 😉

  2. JMF dit :

    YoGi>peut-?tre voulais-tu dire d?meusur? ? 😉

    C’est en effet le sens d’hypertrophi? mais peut ?tre as-tu confondu avec atrophi?. 😉

  3. YoGi dit :

    Qui fait le malin, tombe dans le ravin.

  4. Romain dit :

    Merci pour ce post bien instructif. Ca faisait un moment que je cherchais un ?dteur de feuille de style. Merci.

    >Qui fait le malin, tombe dans le ravin.
    J’ai lu cette commentaire ? haute voie. Mes coll?gues ?taient mort de rire.

  5. Flyounet dit :

    Un tr?s grand merci pour le site DaFont que je ne connaissais pas.

  6. Sypeth dit :

    Alors en fait la d?butante qui ne sait pas par o? commencer et tout ?a… c’est moi, je suis c?l?bre! 😉
    Sinon bien expliqu? fr?rot, mais fais un peu plus attention ? l’orthographe et la grammaire, enfin moi je dis ?a, je dis rien hein! 😉

  7. JMF dit :

    Sypeth> Si tu as des exemples je suis preneurs parce que je viens de relire ? Oncle Ivement (Tante Ivement n’?tait pas l?) ce billet et ? part quelques fautes de frappe je n’ai rien vu de sp?cial.

  8. Sypeth dit :

    Bah j’ai vu ?a:
    Aux quels –> auxquels
    UNE dibouille –> conc?d?Es
    A (pas ?) fait ses preuves
    navigateurs possibleS
    Plusieurs versions… install?Es
    Piochez-y
    Adaptez-le
    Voil?, Tante Ivement ? ton service! 😉

  9. JMF dit :

    C’est corrig?, merci. 🙂

    Au passage on dit « bidouille ». 😉

  10. katsoura dit :

    Excellente id?e ce billet. Le style est vraiment tr?s agr?able ? regarder. Superbe!

  11. Nico dit :

    Ton billet est vraiment bien fait, merci pour ces conseils.

    Ton visuel est vraiment r?ussi.

  12. Reuns dit :

    Je confirme … j’aime beaucoup le style que tu as cr?? !

  13. Laurent (Paris) dit :

    Hello je découvre ce blog: trés bon 🙂

    Moi aussi je finalise pour Firefox et aprés j’adapte pour IEx. En revanche je me force à ne jamais utiliser de hacks (gros risque de compatibilité à terme), mais il est vrai que je fais pas des design aussi classieux que les votre 🙂

    Merci et bonne continutation !

    ps: les commentaires n’auraient pas un pb d’encodage ?

  14. JMF dit :

    Laurent> Merci pour les compliments.

    Concernant les commentaires, le problème vient d’un passage en UTF-8 de DotClear qui semble avoir eu un souci. Ce n’est pas le cas des nouveaux commentaires.

  15. firdaws dit :

    Merci pour cet article.
    Je découvre ce post avec beaucoup de retard mais c’est toujours instructif de voir comment procède un développeur Web dans la conception de ses sites.
    je fais passer l’info sur mon blog.

Les commentaires sont fermés.