Tout est question de smilies finalement…

Publié le 10 août 2009 par Paul

Canon EOS 450D – 70-200@78mm – f/2.8 – 1/160s – ISO-100 – Flash ON.

C’est assez difficile, pour ne pas dire impossible, de trouver un site qui parle de smilies Je ne parle pas de ces sites pourris, avec 50 millions de pubs surgissantes, qui proposent des milliards de smilies tous plus moches et dépareillés les uns que les autres Avoir un bon pack de smilies c’est important mais faut-il encore pouvoir l’intégrer convenablement à son site, à son blog, à son forum, etc… Oui parce qu’il vaut mieux ne pas avoir du tout de smilies plutôt que de proposer une présentation hideuse à cause d’un interlignage complètement foireux Ca peut paraître risible de parler ainsi de smilies mais c’est pourtant une chose sérieuse qui est, que vous le croyez ou non, de plus en plus utilisée dans le milieu professionnel ! Soyez sûrs que mes clients savent que c’est très « in » d’avoir un blog d’entreprise Un smiley fait partie intégrante du design d’un site et se doit donc de rentrer dans sa charte graphique. Il n’aide en aucun cas à la compréhension mais permet une communication bien plus efficace. Découvrez mes smilies comme vous ne les avez jamais vu et, suite à plusieurs beaucoup de demandes par mail, téléchargez-les !

Hormis l’aspect esthétique, tout le problème avec les smilies c’est finalement l’interlignage qui dépend directement de la police de caractères, de sa taille (et de son formatage) et de la taille de vos smilies. Il ne me semble pas utile de préciser que tous vos smilies doivent avoir sensiblement la même taille : libre à vous de mettre deux godasses avec deux pointures différentes finalement On va donc parler CSS car la première des choses est d’annuler toute mise en forme qui pourrait être appliquée aux smilies. Et hop on refait une beauté à la trombine…

  1. .smiley
  2.    {
  3.      border:0 none; /* pas de bordure */
  4.      vertical-align:middle; /* alignement vertical sur la ligne */
  5.      margin:0; /* pas de marge */
  6.      padding:0; /* pas de retrait */
  7.    }

Ensuite il faut bien penser à appliquer le bon interligne à la div qui va contenir les smilies. Par exemple sur NightAngel.fr il faut un interligne de « 2em » pour que tout soit nickel, mais imaginez le drame avec un interligne de seulement 1em ! Voyez par vous-même…

Et donc l’interlignage c’est important et ça se présente comme ça en CSS

  1. .billet p
  2.    {
  3.       line-height: 2em;
  4.    }

Mon pack de smilies…

Quand je dis « mon » pack de smilies, c’est très relatif puisque je ne suis pas l’auteur de ces smilies, je ne fais que les utiliser. Par contre il est vrai que j’avais mis un certain temps avant de leur mettre la main dessus ! Comme cela est indiqué dans les Mentions illégales, le pack s’appelle « The Blacy », est composé de 30 émoticônes (au format .png) qui ont été dessinées par Rokey. Il n’en est pas à son coup d’essai bien que ce pack soit mon préféré. Vous pouvez d’ailleurs télécharger ses créations depuis cette page !

Robbie Maddison – Record du Monde de saut Jump Motocross FMX – Las Vegas