Cerise sur le gâteau, le marquage nécessaire est réduit au strict minimum pour un maximum d’effet :

J’ai bien envie de coincer la bulle

<h2 class='triangle-border'>J'ai bien envie de coincer la bulle</h2>

Avec le marquage de type <p>Ma bulle</p> il est possible de réaliser les bulles ci-contre

Effet bulles de dialogue avec un marquage de type <p>Ma bulle</p>

En ajoutant un élément enfant (comme <blockquote><p>Quote</p></blockquote> il est possible de réaliser d’autres effets.

Effet bulles de dialogue avec un marquage de type <blockquote><p>Ma bulle</p></blockquote>

Compatibilité avec Internet Explorer

Mise à part les coins arrondis et les dégradés, cette bulle est totalement fonctionnelle sous IE8 (on garde le triangle caractéristique et le fond ou le contour.

Dans la version preview de IE9, les coins arrondis sont bien rendus. Manque juste les dégradés.

Dans IE7 le triangle disparait, mais le fond et le contour restent en place.

Conclusion en forme de bulle

Je sens que la feuille de style bubble.css va rejoindre rapidement ma boite à outils CSS et gageons qu’elle fera partie de tout bon framework CSS qui se respecte !

Via Kerweb.

• Picnik
  Cet éditeur d’image intégré à Flickr (et racheté par Google depuis peu) est très simple d’utilisation. Une fois sur le site, il suffit de sélectionner une photo sur votre poste de travail pour commencer à travailler. Les outils sont orientés «retouche de photo» pour l’impression papier : correction automatique des couleurs et du contraste, pivotement, rognage, redimensionnement, réglage de l’exposition, des les couleurs, de la netteté, etc.

  Les plus

  • L’interface est composée de gros curseurs que l’on fait glisser pour voir le résultat des manipulations en direct live,
  • Des boutons Annuler et Rétablir mettent l’utilisateur novice en confiance,
  • L’interface est en français, ce qui ne gâche rien, surtout que des aides sont disponibles pour indiquer la marche à suivre à chaque réglage,
  • Pour finir, un zoom permet d’afficher l’image jusqu’à 800% de la taille d’origine.

  Les moins

  • Pas de gestion des calques,
  • Pas de sélection : les opérations sont globales,
  • Nombreuses options payantes,
  • Chargement un peu long.

  Verdict

  Idéal pour permettre aux clients novices d’effectuer les corrections basiques mais souvent nécessaires lorsqu’on met des photos en ligne. Simplicité et efficacité.
• Sumo Paint
  Après un chargement très rapide, l’interface de Sumo Paint n’a pas à rougir devant celle de Photoshop : elle est même plus réactive ! On y retrouve la plupart des outils de retouche et de création avec la même gestion des options dans une barre sous le menu principal. La palette des calques est très complète et comprend un menu pour les effets de calques qui reprend la majeure partie des effets proposés par Photoshop comme les ombres portées ou les effets de lueur internes ou externes.

  Les plus

  • Prise en main rapide,
  • Orienté retouche et manipulation de photo,
  • Nombreux équivalents-clavier,
  • Gestion des dégradés,
  • Annulations multiples,
  • Zoom à 1000%,
  • Baguette magique,
  • La barre d’espace permet de se déplacer dans l’image avec l’outil Main.

  Les moins

  • Il manque l’outil Plume pour les détourages,
  • La gestion des sélections n’est pas simple,
  • Pas de version française.
  • Aspect du contour de la sélection,

  Verdict

  Un très bon outil généraliste qui devrait plaire à ceux qui sont déjà habitués à utiliser des outils complexes de retouche d’image. Le zoom à 1000% permettra d’affiner les sélections réalisées avec le lasso. On retrouve les habitudes prises avec Photoshop pour ajouter ou retrancher à la sélection.
• PicMagick
  L’interface n’a pas grand chose à voir avec celle de Photoshop : elle est partagée en deux parties avec à gauche deux menus (Basics et Effects) et la zone principale pour afficher l’image. C’est clair et sobre. Ça devrait plaire. Un gros bouton Load Image permet de charger un image depuis le poste de travail.
  Le bouton Save, permet d’enregistrer l’image. Le menu Basics permet d’effectuer des opérations simples : recadrage, rotation, anti yeux rouges, adoucisseur de peau, ajustement et amélioration des couleurs. Le menu Effects propose un outil Netteté, Flou, Couleurs sépias, Niveaux de gris, et Glow (effet de luminescence ou de halo).

  Les plus

  • Le résultat des opérations sur l’image ou les couleurs est affiché en temps réel dans la fenêtre principale,
  • Les options vont à l’essentiel,
  • Outil Smooth Skin (Adoucisseur de peau) utile et intuitif,
  • Outil Main avec la barre Espace,
  • Les outils Ajustement et Amélioration des couleurs, particulièrement efficaces.

  Les moins

  • Pas d’outils de sélection pour isoler une portion de l’image,
  • En anglais (mais la frugalité de l’interface rend la traduction moins indispensable),

  Verdict

  Les options vont à l’essentiel, sans fioriture et c’est ce qui est plaisant avec PicMagick. L’outil Smooth Skin est particulièrement sympa pour adoucir les visages. J’aime bien l’outil Ajustement des couleurs qui propose un pipette pour sélectionner une couleur neutre sur l’image afin de redéfinir la balance des couleurs, ajustable ensuite en terme de température ou de teinte. Bref, un outil à mettre en toutes les mains, y compris pour les non-anglophones.
• Pixlr
  L’interface démarre par le choix entre la création d’une nouvelle image à partir de rien, l’ouverture d’une image présente sur le poste de travail ou depuis le web en précisant son URL. Cette application propose une interface qui semblera familière aux utilisateurs de Photoshop grâce notamment aux équivalents-claviers.

  Les plus

  • Interface en plusieurs langues dont le français.
  • L’outil de recadrage propose une grille pour recadrer les photos selon la règle des tiers.
  • Outil anti yeux rouge.
  • Rapidité.

  Les moins

  • L’aide n’est pas contextuelle.

  Verdict

  Une application honnête et rapide, une sorte de tout-terrain de la retouche photo en ligne.
• Splashup
  Splashup propose d’aller chercher des images sur différents réseaux de stockage et de partage comme Facebook, Flickr, Picasa, SmugMug, PhotoBucket ou Splashup à condition d’ouvrir un compte. Il reste bien évidemment possible d’aller chercher une image sur le disque dur ou depuis son URL. L’interface est douce et ressemble à celle de Sumo Paint tout en étant un peu plus sombre.

  Les plus

  • Joli contour de sélection.

  Les moins

  • Pas d’équivalents-claviers,
  • En anglais,
  • Peu d’options.

  Verdict

  Les possibilités de sélection se réduisent au Lasso et aux sélections circulaires ou carrées. Si le lasso est assez précis, il ne semble pas possible d’ajouter plusieurs sélections successives pour effectuer un détourage, par exemple. Par ailleurs, les possibilités de retouches d’image sont assez limitées.
• Photoshop Express
  L’outil d’édition et de gestion d’image de Photoshop est finalement celui qui ressemble le moins à la version logicielle. Il est nécessaire de s’enregistrer pour pouvoir sélectionner une image depuis son disque dur, mais il est possible de tester l’outil en cliquant sur Test Drive. La partie Edition d’image n’est qu’une option parmi d’autres, mais elle permet d’effectuer des opérations complexes en cliquant sur des prévisualisations des différents états possibles. Le passage de la souris affichant immédiatement l’image telle qu’elle apparaitra une fois les modifications validées. C’est très bien réalisé. D’autant plus qu’un curseur sous les vignettes permet de choisir les valeurs intermédiaires. Photoshop Express propose également un mode Décoration en version bêta qui propose d’ajouter du texte, des bulles de dialogue, des post-it ou des illustrations vectorielles.

  Les plus

  • Présélection des effets avec prévisualisation automatique,
  • Outil anti yeux rouge particulièrement efficace,
  • Zoom et navigation dans l’image à l’aide d’une miniature interactive,
  • Une case cochée apparait devant les effets qui ont été appliqués. On peut les activer ou les désactiver à volonté.

  Les moins

  • Obligation d’ouvrir un compte pour éditer des images en provenance de son poste de travail,
  • Pas d’outil de sélection,
  • Pas de version française (mais il existe une version allemande et japonaise).

  Verdict

  Assez déroutant au premier abord tant l’interface s’éloigne de ce auquel on aurait pu s’attendre, Photoshop Express s’avère être un outil intuitif et très simple d’utilisation.
• Pixer.us
  Assez sobre voire austère, Pixer.us propose des opérations comme le recadrage, redimensionnement, la rotation des images mais aussi quelques manipulations sur la luminosité, le contraste, la saturation, l’ajout de flou ou de netteté. Quelques effets gadgets sont à éviter, à part peut-être l’effet «1850» qui donne à votre visuel l’aspect caractéristique des premières photographies.

  Les plus

  • Le curseur pour modifier la taille de l’image met l’image à jour en temps réelle en affichant les valeurs en direct live,
  • Effet «1850».

  Les moins

  • Les valeurs en pixels qui s’affichent lors du recadrage de l’image ne sont pas sélectionnables et ne se mettent pas à jour en temps réel : il faut tâtonner pour trouver la bonne valeur,
  • Pas de version française,
  • Les effets mettent du temps pour s’afficher,
  • Fonction Annulation un peu laborieuse.

  Verdict

  Un peu trop austère, un peu trop lente, cette application ne brille pas particulièrement. Pour le côté sobre, je préfère largement PicMagick.
• Phoenix
  Image Editor (Phoenix) fait partie de la suite Aviary qui comprend de nombreux outils en ligne : Image MarkUP (Falcon), Color Editor (Toucan), Effects Editor (Peacock), Vector Editor (Raven) et Audio Editor (Myna).  Après un chargement assez long (enfin tout est relatif), Phoenix offre un environnement complet de création et de retouche d’image dans une interface très «application de bureau».
  Cet outil se rapproche bien de l’esprit de Photoshop. L’outil Lasso permet d’ajouter ou de retrancher à la sélection courante avec les mêmes équivalents-claviers que Photoshop, et c’est pareil pour la Baguette magique dont on peut régler la tolérance et la sélection des pixels contigus ou non. En commençant par la Baguette magique puis en affinant avec le Lasso, on parvient — en jouant sur le zoom à 400% – à isoler assez facilement un personnage du fond.

  Les plus

  • Gestion intuitive des dégradés,
  • Ajout/retranchement des sélections au clavier,
  • Effets de calques,
  • Calques de dégradés (biseau et lueur),
  • Historique des actions effectuées en mode «texte» ou «vignette» avec retour à un état antérieur,
  • Nombreux tutoriels disponibles.

  Les moins

  • Pas d’outil Plume.

  Verdict

  Phoenix est un outil très complet relativement simple à prendre en main si l’on a déjà l’habitude d’un logiciel comme Photoshop. Ses fonctions, ses options et sa rapidité en font l’un des meilleurs de cette sélection.
• Flauntr
  Il s’agit d’un service proposé par le groupe FotoDesk spécialisé dans l’impression photo, ce qui explique l’orientation plutôt ludique des applications disponibles une fois que l’on a ouvert un compte gratuit. Malheurement, je n’ai pas pu me connecter une fois enregistré, la gestion calamiteuse des caractères du clavier par Flauntr doit y être pour quelque chose. Bref, j’ai demandé le renvoi de mon mot de passe. J’ai bien réessayer plusieurs inscriptions avec des mots de passes très simples, mais rien n’y fait pour l’instant. Je laisse les chose en l’état et je reviendrais vers Flauntr quand il sera calmé ;)

  Les plus

  • ?

  Les moins

  • Connexion impossible après enregistrement.

  Verdict

  Inscription un peu lourde : obligation d’avoir au moins 6 caractères dans l’identifiant (du coup br1o ne passe pas) et dans le mot de passe (là encore ça peut se comprendre). Impossibilité d’accéder aux outils malgré plusieurs tentatives de connexion

Autres outils bien pratiques

• http://www.roundmypic.com — Arrondis les angles de vos images avec un effet de relief. En option : désactivation de l’effet relief, valeur de l’arrondi en pixels et redimensionnement de l’image. La couleur de fond de l’image devient transparente sur les côtés pour la placer sur un fond de couleur. Via Roget.biz.
• SnipShot — La plupart des effets sont réservés à la version payante. Pour 9$ par mois, je pense qu’il vaut mieux se tourner vers Picasa en version desktop ou se tourner vers Photoshop Elements qui coûte moins de 80€ jusqu’au 11 avril 2010.
• drPic — A part le redimensionnement, le recadrage, la rotation  et le réglage des contrastes, cet outil propose des effets de cadres assez basiques. Enfin, je dis ça, mais tout les goûts sont dans la nature, et de ce point de vue, ne disons pas au client ce qu’il doit aimer, mais demandons-nous plutôt comment lui donner les moyens de créer lui-même de beaux cadres autour des images. De ce point de vue, le docteur Pic tombe… à pic, bien sûr ! On  a du mal à distinguer les fonctionnalités de la publicité.
• Pixenate — Dans le même esprit que le précédent.

Pour la route

• FotoFlexer
• Phixr

Conclusion

Ces applications en ligne en remplaceront pas votre logiciel d’édition d’impage, qu’il s’agisse de Photoshop ou de Gimp, mais vous pourrez sans problème les conseiller aux clients qui ont besoin d’effectuer des retouches simples avant d’illustrer leurs contenus dans leur CMS préféré. Pour eux, Picnik sera parfait.

Par ailleurs, je trouve ces services en ligne très pratiques en situation de mobilité avec les Netbooks où Photoshop n’est clairement pas à son aise. Pour ceux qui ont l’habitude de Photoshop ou de Gimp : Sumo Paint ou Phoenix rendront de grands services.

Mention spécial pour Phoenix et l’ensemble de la suite de logiciels en ligne Aviary qui propose de surcroit des outils pour réaliser des captures d’écran : extentions Firefox et Chrome ;  bookmarklet multi navigateur.

Cerise sur le gâteau, il est possible de basculer vers les modes d’affichage des anciennes versions IE5, IE7 et IE8. Ce qui devrait permettre de tester ses pages web beaucoup plus rapidement, sous réserve que le IE5 Document Mode affiche bien les pages comme le fait IE6 !

Quelques plantages, mais je dois avouer que la mémoire de mon PC était pleine comme un oeuf lors de mes tests, ceci expliquant (espérons-le) cela…

Comme on peut le voir, ce blog s’affiche correctement dans cette preview d’Internet Explorer 9 : pourvu que ça dure !

css 4 design vu par Internet Explorer Platform Preview. Cliquez pour agrandir l'image.

Les outils pour développeurs de cette preview ne rivaliseront pas avec  Firebug, mais offrent un environnement de débuggage fonctionnel et assez réactif.

Sélection d'un paragraphe à l'intérieur d'un élément de liste avec les outils pour développeurs de IE9

Lire MIX10 : Internet Explorer 9 se dévoile en preview pour plus d’information.

Comment utiliser les hacks CSS ?

Dans l’article Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels, j’utilisais un commentaire conditionnel pour cibler les versions inférieures ou égales à IE7. Toutefois, IE9 est sur les rails et il est temps de le prendre en compte, d’autant plus que Microsoft veut en faire un champion des standards du web en terme de rendu CSS3 et HTML5.

L’idée derrière la feuille de style unique pour IE est de ne pas augmenter inutilement le nombre de requêtes pour charger une CSS pour chaque version d’Internet Explorer. En attendant de voir ce que nous réserve IE9, j’ai décidé de cibler les versions inférieures ou égales à IE8 en espérant que IE9 tienne ses promesses et en attendant de voir s’il va continuer à gérer les commentaires conditionnels (auquel cas nous pourrions cibler les version inférieures à IE9).

Cibler les versions <= à IE8

<!--[if lte IE 8]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen,projection" />
<![endif]-->

Note : il existe une forme de commentaires conditionnels qui permet de cibler tous les navigateurs sauf Internet Explorer : <!--[if !IE]> <!--> IE Windows ne lira pas ça <!--> <![endif]-->

Dans cette feuille de style ie.css, si IE6 (et seulement lui) ne se comporte pas comme prévu devant #header { margin-top: 0; }, il suffira d’y ajouter * html #header { margin-top: -5px; } pour régler le problème. Si le problème concerne IE6 et IE7 et que IE8 se comporte de manière standard (c’est à dire que la règle située dans style.css suffit), il faudra utiliser les hacks de la manière suivante :

* html #search .submit { margin-top: -10px; } // IE6
*+html #search .submit { margin-top: -14px; } // IE7

#search .submit { margin-top: -7px; }         //Toutes les versions d'IE
* html #search .submit { margin-top: -10px; } // Surcharge pour IE6 seulement
*+html #search .submit { margin-top: -14px; } // Surcharge pour IE7 seulement

Mettez vos frameworks CSS à jour

Les frameworks CSS proposent souvent une feuille de style spécifique à Internet Explorer. Le plus souvent, le hack utilisé pour cibler IE7 est de la forme html>body qui n’est pas pris en charge par IE6. Or, si l’on cible les versions <= à IE8, ce hack est obsolète puisqu’il est compris par IE8. Pour y remédier, j’utilise *+html qui n’est compris que par IE7.

Ainsi, dans le fichier ie.css de Blueprint, il sera nécessaire de modifier la ligne html>body p code { white-space: normal; } par +html p code { *white-space: normal; } pour éviter que IE8 ne s’emmêle les pinceaux ;)

22 hacks CSS à consommer avec modération

Cette liste de 22 contournements a été compilée par Paul Irish. Elle présente le double intérêt de la quasi-exhausitivité et de distinguer les hacks jouant sur les sélecteurs de ceux qui concernent les attributs.

Hacks sur les sélecteurs

1. IE6 et inférieurs

   * html .test  { color: red }

2. IE7

   *:first-child+html .test { color: red }

3. IE7, Firefox, Safari, Opera

   html>body .test { color: red }

4. IE8, Firefox, Safari, Opera (Tout sauf IE 6,7)

   html>/**/body .test { color: red }

5. Opera 9.27 et inférieurs, Safari 2

   html:first-child .test { color: red }

6. Safari 2 — 3

   html[xmlns*=""] body:last-child .test { color: red }

7. safari 3+, Chrome 1+, Opera9+, Firefox 3.5+

   body:nth-of-type(1) .test { color: red }

8. Safari 3+, Chrome 1+, Opera9+, Firefox 3.5+

   body:first-of-type .test { color: red }

9. Safaris 3+, Chrome1+

      @media screen and (-webkit-min-device-pixel-ratio:0) {
               .test  { color: red }
       }

10. iPhone / Webkit mobile

       @media screen and (max-device-width: 480px) {
                .test { color: red }
        }

11. Safari 2 — 3.1

    html[xmlns*=""]:root .test  { color: red }

12. Safari 2 — 3.1, Opera 9.25

    *|html[xmlns*=""] .test { color: red }

13. Tout sauf IE6 — 8

    :root *> .test { color: red  }

14. IE7

    *+html .test { color: red }

15. Uniquement Firefox. 1+

    .test,  x:-moz-any-link  { color: red }

16. Firefox 3.0+

    .test,  x:-moz-any-link, x:default  { color: red }

Hacks sur les attributs

1. IE6

   .test { _color: blue }

2. IE6, IE7

   .test { *color: blue /* or #color: blue */ }

3. Tout sauf IE6

   .test { color/**/: blue }

4. IE6, IE7, IE8

   .test { color: blue\9 }

5. IE7, IE8

   .test { color/*\**/: blue\9 }

6. IE6, IE7 — fonctionne comme !important

   .test { color: blue !ie } /* la chaine après ! peut être n'importe quoi */

Comment ça marche, un framework CSS ?

Le positionnement des blocs avec un framework CSS s’effectue grosso modo en attribuant une classe CSS pour spécifier les propriétés width et margin aux blocs avec une ou plusieurs techniques pour rétablir le flux HTML après les éléments possédant la propriété float.

Dans une grille en 16 colonnes, pour placer une image sur 4 colonnes et du texte sur les 12 restantes, on pourra utiliser le marquage HTML suivant (je vous fais grâce des CSS, le code HTML est assez explicite) :

<div id="header" class="grid_16 clear">
    <div class="grid_4"><img src="/img/logo.png" /></div>
    <div class="grid_12 last">Mon texte sur 12 colonnes</div>
</div>

Attention, pas forcément du tout fait en 950px ou 960px mais en déterminant le «pas» de la grille selon mes besoins. Je laisse ensuite  les fastidieux calculs à un générateur de grille, qu’il s’agisse de boks pour Blueprint ou encore de 960 Layout System pour 960.gs.

Un peu (ou pas) de sémantique

Les classes .span-4 ou .grid_4 ne sont pas sémantiques dans le sens où — pour certains — elles véhiculent une notion d’apparence et non pas d’utilité, de sens. Ainsi, une classe .warning est préférable à une classe .rouge même si la couleur de .warning est rouge ; si on change d’avis, on aura l’air fin avec notre classe .rouge affichant du texte orange. L’idée, c’est d’être à la fois très précis et suffisamment générique pour s’adapter à toutes les situations.

Pour revenir aux classes spécifiant la largeur des colonnes, j’ai toujours pensé qu’elles apportaient du sens, un peu à l’image de la presse quotidienne où l’on met un titre sur 8 colonnes, signifiant ainsi son importance par rapport aux autres contenus (à supposer que la maquette comporte un maximum de 8 colonnes).

Le côté sémantique de la chose est surtout à mettre en regard des contenus à maquetter : s’ils n’ont pas de sens en eux-mêmes, toute la sémantique du monde n’y pourra rien changer :D

Pour finir avec cette question de sémantique, il reste la possibilité de renommer les classes .span-x ou .grid_x. En fonction de votre projet, vous pourrez utiliser des termes plus en accord avec vos contenus comme .a-la-une pour .span-16, .breves pour .span-4 ou encore .entrefilet pour .span-2, etc. On peut donc considérer que des contenus auxquels on applique un .span-16 sont plus importants que ceux auxquels ont attribut la classe .span-4 et ainsi de suite.

Comme j’ai déjà eu l’occasion de le dire dans Framework CSS sémantique ? Comment je vois les choses (et au risque de me répéter) :

[...] la suite des .span-x peut se comprendre comme l’importance accordées à chaque bloc : du moins important (.span-1) au plus important (.span-24), à l’image de la presse écrite où un article surmonté d’un titre en «8 colonnes à Une» mérite plus d’attention qu’un entrefilet sur 2 colonnes.

Les avantages des frameworks CSS

Standardiser les méthodes de travail

Quand plusieurs personnes interviennent sur le code HTML pour placer ou déplacer des éléments (ex. supprimer ou ajouter une sidebar, un bloc de contenu, etc.) il vaut mieux avoir un jeu de classes CSS (issus d’un framework ou non, d’ailleurs) pour éviter que chaque intervenant bidouille le fichier CSS avec sa «méthode» : certains sont adeptes des position: absolute, d’autres raffolent des float: left, d’autres des table, etc. Avec des classes standardisées comme span-x, last et les clearfix qui vont avec, tout devient plus simple et cohérent.

Des maquettes dynamiques côté serveur ou client grâce aux grilles

Autre argument qui milite en faveur de la mise en place d’une grille avec un framework, c’est qu’en travaillant de cette manière, il devient possible de modifier dynamiquement la mise en page côté serveur avec PHP ou côté client avec Javascript.

Pour distribuer votre contenu sur 4 colonnes au lieu de 8, il suffira de modifier tout ou partie du nom de la classe utilisée (le «4» de col_4 par «8», par exemple) sans être obligé d’intervenir sur la feuille de style ou d’en charger une autre à la volée.

Frameworks PHP, Javascript et pourquoi pas CSS ?

Les critiques concernant les frameworks CSS sont souvent les mêmes que celles qui ont été faites contre les frameworks PHP ou Javascript avant que leur utilisation se généralise. Pour illustrer mon propos, voici un extrait de l’intervention de Didier Galland sur WebDevFr à propos de l’industrialisation de l’intégration web :

On a tenu exactement le même discours à propos de PHP, puis à propos de javascript. Les frameworks dans ces deux domaines ont largement prouvé qu’ils permettaient des améliorations. Je ne vois pas pourquoi l’intégration (css/html + javascript) ne pourrait pas bénéficier des mêmes améliorations. On a le droit d’utiliser son framework personnel dans son coin, mais pour le bien de mon agence, je ne peux pas bloquer mes futures évolutions (en personne ou en techniques) à cause de cette attitude, j’aurais donc forcément tendance à privilégier un professionnel au courant de ces techniques dans mes recrutements ou mes contracteurs freelances.

Aller au bout de la logique du reset CSS

Tout le monde connait le reset CSS d’Eric Meyer que l’on trouve dans de nombreux framework. Quand on y réfléchit cinq minutes, la suite logique de ce reset, c’est le frameworks. Il faut bien voir que la plupart d’entre eux ne sont pas spécialement très lourds et quand on fait le compte des déclarations redondantes qui se trouvent dans une feuille de style un peu touffue (parce qu’évidement, si votre projet tient en 20 lignes de CSS, c’est peut-être pas la peine de se poser la question), on se rend compte que les frameworks ne sont pas si gourmands.

Remplacer les styles par défaut des navigateurs

J’ai toujours trouvé que les styles par défaut appliqués par les navigateurs manquait d’originalité et de peps. Il suffit de mettre un soupçon de Boilerplate ou de Typogridfy pour que de très banal, la mise en page par défaut prenne un coup de jeune et de modernité !

Comment déterminer le «pas de la grille»

Un argument récurrent qui va à l’encontre de l’utilisation des grilles concerne la partie conception graphique. Les grilles entraveraient la créativité. Pourquoi pas. Mais je mets au défi quiconque de proposer un design de site web qui ne rentrerait pas dans une grille. Une grille n’est pas forcément synonyme de 12, 16 ou 24 colonnes. Il peut s’agir de 2, 4, 6 ou 8 colonnes et pourquoi pas d’un nombre impair de colonnes comme 1 colonne (un peu le degré zéro de la grille, mais bon…), 3 ou 5 colonnes pour bénéficier d’une asymétrie créative ? Tout est possible.

Pour aller au plus simple, si l’on veut un site avec un bloc de contenu et une barre latérale, on pourra diviser la page en 3 parties pour obtenir les ratios 2/3 pour le contenu principal et 1/3 pour la sidebar ou en 4 parties, soit 3/4 pour le contenu principal et 1/4 pour la barre latérale. On pourra se baser sur les proportions 1/3 ou 1/4 pour la largeur des images accompagnant les textes.

Ensuite, rien n’empêche de diviser chaque colonne en plusieurs parties pour granulariser l’information selon les besoins : affichage de miniatures, etc. Celà permet d’obtenir une mise en page très simple tout en bénéficiant d’une système de grille souple et efficace.

Quelques liens à propos des frameworks et des reset CSS

• 24 frameworks CSS — Mettez une grille (ou pas) dans votre site web
• Frameworks CSS + Reset CSS : design from scratch
• Quelques notes sur les grilles de mise en page
• Grid Design — Quelques notes sur l’intérêt des grilles de mise en page
• Framework CSS sémantique ? Comment je vois les choses
• Framework CSS — mettez vos grilles au pas !
• Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web
• Styles CSS par défaut : après Reset Reloaded, Eric Meyer fait encore risette avec Resetting Again
• 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs

Pas de conclusion hâtive !

Je pense que j’aurais l’occasion de revenir sur ces questions (oui encore) notamment sur la partie grille et créativité qui semble passionner beaucoup de monde à juste titre. N’hésitez pas à partager vos expériences en la matière. A bientôt !

Pour assurer une compatibilité maximum, il faut utiliser plein de déclarations CSS redondantes et c’est fastidieux. Heureusement, jacob bijani (Directeur de la création de Tumblr et à l’origine de start.io) a développé un générateur de coins arrondis qui s’appelle… border-radius.com ;)

Des coins arrondis différents à chaque angle

Il est possible de spécifier les coins arrondis pour Webkit, Gecko et CSS3 en cochant les cases appropriées

Un générateur de coins arrondis en CSS3

Exemple de coins arrondis en haut mais pas en bas

.roundies-top {
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    -webkit-border-top-left-radius: 5px; /* pour Chrome /
    -webkit-border-top-right-radius: 5px; / pour Chrome */
    border-radius: 5px 5px 0 0;
}

Google Chrome n’accepte pas les raccourcis : il faut ajouter explicitement chaque coins arrondis.

Exemple de coins arrondis identiques

Le générateur n’utilise pas la syntaxe raccourcie qui permet de gagner quelques lignes. Pour avoir des coins arrondis identiques pour les 4 angles avec une écriture plus concise on peut utiliser :

.rounded-all {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Pour terminer

Je vous conseille la lecture de Créer des coins arrondis en CSS et sans images pour plus d’informations, notamment en ce qui concerne Internet Explorer avec du Javascript et du composant .htc en veux-tu en voilà !

Mes blog professionnels

En ce qui concerne mes trois blogs «professionnels», ils ont une ligne éditoriale claire :

• Tout ce qui concerne la conception de site web, la réalisation de design web et la gestion d’un site web (référencement, mesure d’audience, marketing, etc.) sur css4design où je réserve mes articles les plus fouillés ;
• Les trouvailles Javascript pour le webdesign sur js4design
• Les ressources pour créer des thèmes Wordpress sur wp4design où je commence à trouver un rythme de croisière.

Pourquoi un nouveau blog ?

J’éprouve le besoin d’avoir un espace où ma subjectivité pourrait s’exprimer plus facilement que sur les sujets plutôt techniques que je traite d’habitude. D’où le choix du nom de domaine qui n’est autre que le pseudo que j’avais choisi fin 2005 pour le lancement de mon tout premier blog sur Wordpress : mon prénom (bruno) en remplaçant les lettres «un» par le chiffre correspondant).

J’en ai profité pour modifier mon compte Twitter qui passe de @integrateur_css à @br1o pour plus de cohérence : il se trouve que je suis inscris sous ce pseudonyme sur de nombreux services comme Delicious, Friendfeed, LastFM, Mister Wong, Copaing, etc. depuis plusieurs années pour la plupart.

Et Notorious Blog dans tout ça ?

L’avenir de Notorious Blog est incertain. Pour l’instant j’ai fait une redirection permanente vers br1o.fr pour transférer le peu de Google Juice qui reste. Je vais réfléchir à un nouveau projet de Consulting pour la mise en place de blogs professionnels et voir si Notorious Blog est le nom de domaine le plus adapté.

Comme des poissons dans l’eau

Le contenu de vos billets est semblable à l’asticot qui gigote au bout de l’hameçon. Chacun sait qu’on n’attrappe pas tous les poissons avec le même appât et que l’eau dans laquelle on lance la ligne n’abrite pas les mêmes espèces… En fonction de la thématique globale de votre site et des sujets abordés dans les billets, vous parviendrez à intéresser certaines espèces ou pas.

Ce que parler veut dire

Plus votre site est spécialisé et plus vous avez des chances d’être bien vu par Google qui est toujours à la recherche d’informations rares et pertinentes à proposer à ses utilisateurs. Bien évidemment, Google n’accordera une attention particulière au contenu de vos pages que si vous accordez vous-même un soin particulier à l’écriture de vos articles. L’emploi de termes spécifiques et d’expressions du métier au lieu d’un vocabulaire passe-partout peut vous propulser très haut sur la scène googlienne.

Ce qui ne doit pas vous faire oublier que beaucoup de visiteurs interrogent peut-être justement les moteurs pour apprendre le jargon du métier. Pour cette raison, je relis souvent mes billets en me mettant à la place des visiteurs. J’imagine les mots ou les phrases qu’ils pourraient utiliser. Il s’agit de trouver le juste équilibre entre l’emploi de termes ésotériques et de formules toutes faites. Si la répétition d’un même terme dans la page peut avoir des effets positifs, privilégiez toutefois l’emploi de synonymes : vous élargirez le diamètre de l’entonnoir.

Quand le sage montre la lune, l’imbécile regarde le doigt

Le première fois que j’ai regardé les mots-clés en provenance de Google, je me suis dit : tiens, c’est marrant, tout le monde cherche des informations au sujet des blogs commerciaux, puis plus tard se sont ajouté ceux qui voulait des informations sur les classements des blogs, puis sur la monétisation des blogs…

Aujourd’hui, une bonne part des requêtes qui mènent sur ce blog concerne le statut du blogueur, etc. Vous l’avez compris : je ne regardais pas la lune, mais mon doigt ;). C’est comme des cercles concentriques : plus les sujets d’une même thématique globale sont nombreux et plus vous aurez de chance de correspondre aux requêtes qui fusent dans le cyberespace.

Un algal, des algos ?

Le deuxième enseignement de l’analyse des statistiques, c’est que les résultats retournés par Google semblent utiliser des algorithmes différents selon le nombre de terme contenus dans la requête.

Pour un ou deux termes génériques, les sites qui apparaissent dans les premières pages semblent bénéficier d’un traitement de faveur en fonction de l’ancienneté surtout (date de création du domaine) et de leur popularité (PageRank).

Google fonctionne comme si les requêtes étaient ventilées dans des clusters thématiques (développement web, voyage, sexe, divertissement, etc.) à l’intérieur desquels certains sites seraient considérés comme proposant un contenu de référence. (TrustRank ?).

De l’influence de l’ancienneté et du PageRank

A partir de deux ou trois termes et plus, le contenu reprend la main sur l’ancienneté et le PageRank, et là, c’est surtout la présence et la proximité de tout ou partie des termes demandés qui fait le bon positionnement. Il semblerait que la fraicheur de l’information disponible soit ici favorisée au détriment parfois de sites plus qualifié installés de longue date. C’est peut-être la conséquence de la forte croissance des blogs en particulier et du web en général : il faut bien que les moteurs fassent de la place pour les petits nouveaux ;)

Des invités triés sur le mot-clé volet

Pour cet article, j’ai tenté de faire preuve d’empathie envers des profils de visiteurs assez différents :

• Les gens du marketing, toujours à l’affût d’une information liée à Google,
• Les geeks, toujours intéressés par un terme qui se termine par Rank ;)
• Ceux qui rédigent des articles pour le web en général,
• Et ceux qui cherchent des rédacteurs en particulier…

Le mot-clé mots-clefs par l’exemple

Parmi tous les termes éligibles pour capter un flux de visiteurs potentiels, j’ai comparé les différentes possibilités dans Google lui-même pour avoir une idée du marché potentiel d’un mot en fonction du nombre de résultats retournés et de la diversité des sites retournés par le moteur.

A cet égart, l’orthographe a son importance. Le terme mot-clé, par exemple, a plusieurs acceptions parmi lesquelles il faudra trancher au moins pour le titre :

• mot-clé,
• mots-clé,
• mots-clés,
• mot-clef,
• mots-clef
• ou mots-clefs ?

Après réflexion, j’ai choisi mots-clés qui renvoit dix fois plus de résultats que mots-clefs. Ce qui me donnera sans doute moins de chances d’être positionné dans les premières pages, mais d’avoir plus de possibillités d’être présent sur la requête en espérant que cette présence s’accompagne d’un bon positionnement avec le temps (Dans le billet d’origine j’avais choisi le contraire).

Le ClickRank

The hyperlink was a vote in the search-driven Internet. Now I’m dependent on a new currency – human action. The click is much more potent than the existence of a link.

Tout le monde ou presque connait le PageRank, mais il pourrait bientôt être remplacé ou relégué au fond de la classe par des paramètres autrement plus précis et sûr (le genre sûr que même les méchants pirates experts en SEO, ils auraient du mal à dealer with ;) ).

En effet, Google pourrait par exemple, tenir compte du nombre de fois où un résultat fait l’objet d’un clic sur une requête donnée en enregistrant le contexte sémantique.

On pourrait considérer celà comme une extension du vote représenté par les backlinks (ou liens entrants) vis à vis du site vers lequel ils pointent. Grosso modo cela reprendrait le principe des digg-like : un clic sur un résultat = un vote.

Matt Mc Alister s’interroge sur le remplacement du PageRank par le ClickRank. En tout état de cause, Google a la possibilité d’améliorer encore ses résultats et de garder longtemps encore l’avantage. Notamment, en utilisant les données d’Analytics et des Webmaster Tools, pour déterminer toujours plus de critères d’évaluation d’une URL ou d’un site en entier au regard d’une requête donnée en prenant en compte le nombre de pages vues sur un site, le temps passés sur ses pages, le nombre de clics effectués, etc.

En bref

Tout ce que Google peut enregistrer grâce à nous, n’a pas finit de lui donner un avantage intellectuel et économique vertigineux. Ce sujet semble inépuisable, mais ce n’est pas mon cas. Je laisse cette conclusion ouverte, et la fin de ce billet en version bêta, c’est-à-dire destinée à s’enrichir avec vos retours d’expériences sur le sujet. Stay tuned and mind the gap!

Coins arrondis et ombre semi-transparente avec une image

Méthode universelle pour décorer les blocs – Agrémenter des blocs HTML de largeurs variables avec des images de fond pour obtenir des coins arrondis ou des ombres portées est souvent un casse-tête pour l’intégrateur web.

La solution proposée ici ne nécessite aucun hack tout en restant compatible avec les plus vieux navigateurs web comme IE6.

Les balises div surnuméraires pourront être générées par Javascript afin de ne pas polluer inutilement votre code avec du marquage HTML non sémantique. Pour cela, je suis allé me fournir chez l’ami burningHat qui nous gâte avec coins arrondis avec jQuery dont vous pourrez vous inspirer pour la partie purement jQuery.

13 Extensions Chrome pour développeurs web

13 extensions pour développer avec Google Chrome — J’utilise beaucoup le navigateur de Google pour le surf quotidien et je réserve Firefox pour le développement. Toutefois, il peut être utile d’avoir quelques outils d’aide au développement sous la souris : Color Picker, Firebug Lite, Capture d’écran avec Aviary, IE Tabs, Mesure It, Speed Tracer, etc. Via Rémi Garcia.

Aviary Screen Capture

J’ai tout de suite été séduit par Aviary Screen Capture qui permet d’obtenir une capture d’écran depuis votre navigateur en plus d’un accès direct au outils en ligne d’édition d’image développés par Aviary.com.

Une fois l’extension installée, il suffit de cliquer sur son icône et de lancer l’application avec Capture Visible Portion of Page pour accéder ensuite directement à votre capture d’écran dans un outil en ligne permettant d’effectuer moult opérations utile pour attirer l’attention sur une image : dessin, texte, rotation, rognage, redimensionnement, etc.

Parmi les autres outils proposés, nous trouvons : Image MarkUP, Image Editor, Color Editor, Effects Editor, Vector Editor et Audio Editor que je vous laisse le soin de découvrir par vous-même ;)

Augmenter l’affordance de vos boutons

Créer des boutons avec CSS3 — Même si les CSS3 en sont pas implémentée dans tous les navigateurs, rien n’empêche d’en faire profiter ceux qui ont eut la bonne idée d’installer un navigateur moderne, comme Firefox 3.6. Ce tutoriel simple et concis propose des exemples concrets (codes et images) pour ajouter des effets d’arrondis et d’ombres portées sur les blocs et les textes pour obtenir des boutons attrayants afin d’augmenter le côté affordance de la chose ;)

CSS3 en action

Les propriétés CSS3 en action — Louis Lazaris a eu la bonne idée de regrouper les propriétés CSS3 box-sizing, border-radius, box-shadow, rgba, column, hsla, gradient et multiple backgrounds sur la même page avec l’effet, la description et un exemple de syntaxe.

Plan de site en CSS

SlickMap CSS est une simple feuille de style CSS qui assure un affichage soigné à toute liste non-ordonnée jusqu’à 3 niveaux d’imbrication ; facile à personnaliser en fonction de vos besoins.

Pour la route

1. Et vous, savez-vous faire des liens ? — Les liens hypertextes sont le sang du web. Faire un lien parait aussi simple que de ne pas en faire (oui, bof, je sais…). Pourtant faire un lien correct du point de vue de l’accessibilité n’est pas donné à tout le monde.
2. Markdown et XSS — Une attaque XSS (cross-site scripting) est une technique permettant d’injecter du contenu HTML suspect dans une page web pour voler des mots de passe  en analysant les cookies. Markdown n’inclus pas de filtre XSS et il faut donc le faire soi-même, mais pas n’importe comment !
3. eCSStender — Toujours rêvé d’utiliser les sélecteurs CSS avancés dans vos designs web sans vous soucier d’IE6 ? Alors vous devriez vous intéresser au travail d’Aaron Gustafson. Une fois le DOM chargé, eCSStender rassemble les feuilles de styles impliquées dans l’affichage de la page dans une variable. Le parsing peut commencer et eCSStender recherche tous les motifs pour lesquels une extension est disponible (@font-face et @page pour le moment). Pour la suite des explications je vous invite à lire la documentation ;)
4. Le rédacteur web est un animal social — Les métiers liés à la rédaction web ne peuvent plus faire l’impasse sur le référencement et la dimension sociale des contenus. Le rédacteur web est-il un Community Manager comme les autres ?
5. Migrer d’un Wordpress.com à un Wordpress.org — Vous avez commencé par un blog hébergé chez Wordpress.com et vous aimeriez avoir les mains libres avec un blog bien à vous ? Cette traduction de l’article How to Migrate your Blog from WordPress.com to a Personal Domain est là pour vous aider.
6. TestSize — Affiche n’importe quelle URL dans une `iframe` à une taille déterminée (`240×320`, `640×480`, `800×600`, `1024×600`, `1024×768`, etc. ou selon vos envies. Pratique pour s’assurer que votre site est accessible sur des écrans différents du vôtre. Découverte de l’excellent http://time.is par la même occasion ;)
7. Footerama — Galerie de pieds de page de site tous plus intéressants les uns que les autres à garder sous le coude lorsque vous aborderez la conception de votre footer. Via John’s Graphisme.
8. Les annuaires sont nos amis ? — C’est en tout cas ce que pense Aymeric dans ce billet qui fait le point sur la bonne attitude à adopter face à ces mal-aimés du web. Je n’ai jamais été vraiment convaincu de leur véritable intérêt, mais pour jouer le jeu, j’ai commencé à proposer mon blog dans quelques annuaires.
9. Classement des 30 premiers annuaires — En parlant d’annuaire, voici une liste composée d’annuaires à priori de qualité que je soumets à votre sagacité.
10. L’harmonie des couleurs — De la même manière qu’un musicien doit avoir des notions d’harmonie s’il veut avoir des chances de composer la mélodie du siècle, le webdesigner doit connaitre les principes de base qui régissent l’harmonie des couleurs afin de les employer en connaissance de cause. Très bon article de Pixenjoy sur ce sujet complexe qui mêle le subjectif et l’objectif.
11. Mettre à jour instantanément votre Flux RSS avec votre blog — Cette astuce vous permettra d’ajouter et d’actionner les services liés à la fonction PingShot de Feedburner pour signaler immédiatement vos nouvelles entrées de blog.
12. Designing Interfaces (Patterns for Effective Interaction Design) — Ce site est la version abrégée du livre Designing Interfaces paru aux Editions O’Reilly : une foultitude de pistes et de conseils concis pour améliorer nos interfaces utilisateurs.
13. IE6 Funeral — Pour finir cette liste, je ne résiste pas au plaisir de vous convier aux funérailles d’internet Explorer 6 prévues le 1er mars 2010 à Mountain View, Californie. Venez nombreux.

La fonction wp_list_bookmarks()

La fonction wp_list_bookmarks() possède plusieurs arguments intéressants dont l’identifiant de la catégorie à afficher category=386 et before et after qui permettent de spécifier les balises HTML que vous voulez avant et après chaque élément de liste. Par défaut, il s’agit de la balise li. Toutefois, pour une bonne gestion des coins arrondis, j’ai ajouté une balise p (oui, un p dans le li, ça manque d’élégance… ), ce qui oblige à préciser explicitement les balises li.

<div id="featured-posts" class="wrapper">
    <ul>
        <?php echo wp_list_bookmarks('title_li=&categorize=0&category=386&before=<li><p>&after=</p></li>'); ?>
    </ul>
</div>

Une pincée de CSS3 pour épicer le menu

#featured-posts ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#featured-posts li {
    float: left;
    width: 102px;
    margin-right: 18px;
}
#featured-posts li:hover {
    background: #2F0615;
    color: #fff;
/*
* Coins arrondis
/
    -moz-border-radius: 5px 0 5px 0;
    -webkit-border-radius: 5px 0 5px 0;
    border-radius: 5px 0 5px 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 5px;
/
* Ombres portées
*/
    -webkit-box-shadow: #aaa 3px 3px 3px;
    -moz-box-shadow: #aaa 3px 3px 3px;
    box-shadow: #aaa 3px 3px 3px;
}

Note : si vous aviez déjà utilisé le Widget Liens dans votre barre latérale, cette catégorie est affichée deux fois. Pour la supprimer de votre blogroll faites glisser le Widget Liens, sélectionnez la catégorie dans le menu déroulant et répétez l’opération autant de fois que nécessaire.

Pour finir

Oui,  toutes ces opérations sont un peu fastidieuses, mais je n’ai pas encore trouvé mieux à part attendre la sortie prochaine de Wordpress 3.0. D’ailleurs, à ce propos, je vous propose de lire l’article Les menus, l’intégration de MU, et une course aux correctifs ! de Xavier Borderie sur Wordpress Francophone qui parle notamment de l’intégration prochaine d’une fonctionnalités permettant de faire des menus en veux-tu en voilà !