Comment j’ai créé le thème de mon blog

Ça y est, j’ai enfin fini le redesign de mon blog, et plutôt que de (re)faire un billet « Changement de thème« , je me suis dit que j’allais m’attarder sur les différentes étapes qui ont mené à sa création. Un genre de pas-à-pas, mais sans aller jusqu’à détailler toutes les lignes de code, juste donner mon approche de la partie recherche et développement de ce thème.

Cela fait déjà un moment que j’en avais envie, que je changeais petit à petit des trucs sur l’ancien thème, mais ce n’était pas suffisant. Alors, je me suis dit que j’allais tout refaire en partant de la chose que je voulais le plus changer : le header et son logo (inexistant). J’avais enfin trouvé une police qui me plaisait, j’ai ouvert Paint Photoshop, j’ai écrit le texte puis il fallait bien en faire quelque chose, y ajouter des couleurs… j’ai regardé les différentes palettes disponibles et je me suis arrêté sur les couleurs ANPA.
Stats navigateurs Là, je choisis un peu au hasard une nuance de bleu comme couleur de fond et en prenant simplement les 3-4 nuances qui lui étaient adjacentes je me retrouve avec des couleurs de base pour mon logo. Et si je veux changer pour du rouge, du vert, ou autre, je n’ai qu’à monter ou descendre d’une ligne dans la palette ANPA, pratique ! :D Ensuite, j’ajoute une bordure et une ombre portée à mon texte pour lui donner un peu de relief et éviter le côté plat. J’aime bien le rendu, mais je voudrais y ajouter un symbole, avoir un « vrai » logo pas juste du texte.
Comme mon pseudo c’est Yus, j’essaye avec le symbole grand yus : Ѫ que j’utilisais déjà (ancien favicon ancien favicon), mais ça ne va pas avec le reste alors je passe au petit yus fermé : Ꙙ et je colorie les espaces qui l’entourent pour faire ressortir une forme ressemblant à une montagne (nouveau favicon), comme je l’avais fait pour un de mes avatars il y a quelques mois. Ça y est, le logo est terminé !

Je me lance dans la modification de l’ancien thème, mais très vite ça ne me convient pas, je préfère créer un thème sur des bases plus solides, après avoir testé pendant des semaines tous les thèmes dits frameworks pour WordPress qui existent (si si tous) mon choix s’est arrêté sur ce bon vieux Sandbox qui offre tout un tas de possibilités de bidouillage sans imposer plein de trucs plus ou moins (in)utiles et plus ou moins chiants à virer.
Pour la structure je m’inspire des formes et couleurs du logo avec ses ombres et ses arrondis, et tant pis s’ils sont tout carrés sur Internet Explorer, j’en ai marre de devoir faire des concessions et me priver des « nouvelles » (les bordures arrondies en CSS c’est assez vieux quand même) possibilités offertes par les navigateurs modernes. Plus vite on se met à les utiliser et plus vite les navigateurs devront s’adapter. Il n’y a qu’à voir l’apparition des versions dédiées à l’iPhone de certains sites, même si finalement cet exemple est peut-être mal choisi, car c’est les sites qui s’adaptent à un navigateur et pas l’inverse… :?

Stats navigateurs Enfin bref, j’ai même failli envisager le passage au HTML 5. :P C’est mon blog après tout, pas le site d’un gros groupe international qui se doit d’avoir le même rendu sur tout et n’importe quoi. Et puis j’ai de la chance : les 2/3 de mes visiteurs utilisent Firefox/Chrome/Safari, et plus de 70 % du tiers restant a laissé tomber IE 6 pour des versions plus récentes, j’imagine que les autres se connectent depuis leur boulot avec le seul navigateur qu’ils ont sous la main et je les plains.

L’autre chose que je tenais absolument à faire avec ce nouveau thème, c’est garder une compatibilité avec les résolutions des netbook type Eee PC (car j’en ai un ^^), donc éviter les barres de défilement, sans pour autant me contenter d’un design fixe qui tiendrait dans 800 pixels de largeur comme avec le précédent thème.
Vous êtes plus de 98 % à avoir des résolutions plus élevées (heureusement) et même mes vidéos sont passées à la HD, alors je veux et j’ai besoin de plus d’espace. J’ai donc opté pour une largeur convenable de 960 pixels qui s’adapte aux résolutions plus petites si besoin, essayez en redimensionnant la fenêtre de votre navigateur. ;)
Bref, c’est parfait j’ai eu ce que je voulais. Pour cela il m’a fallu faire plein de calculs afin de trouver des valeurs qui correspondent à ce que je veux et restent compatibles avec tous les navigateurs (même IE 6 !) lorsqu’on redimensionne leur fenêtre.

La dernière étape consistait à choisir où et comment j’allais afficher telle ou telle information, c’est celle qui a pris le plus de temps, celle pendant laquelle j’ai le plus glandé aussi :P c’est peut-être pour ça. :D Au final je suis assez content du résultat, en étant l’auteur, je n’ai plus à me dire « j’aime pas comment tel machin/truc a été fait dans ce thème ». Et puis j’ai mon propre thème, ma charte graphique, qui ne ressemblent pas à X autres blogs (ou alors j’ai vraiment pas de bol ^^), et ça, c’est assez cool comme sensation.

Allez, un petit comparatif avant/après pour finir façon D&Co :

L'ancien thème Le nouveau thème

À bientôt les petits loulous. :snowman: