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à !

Visite guidée dans le guide stylistique de Mark Boulton pour le redesign du site web Drupal.org

Je vous propose une visite guidée dans le guide stylistique réalisé par Mark Boulton chargé du redesign du site Drupal.org. Ce guide est un petit bijou de concision tout en étant très complet. On y trouve trois parties principales : Langage visuel, Editorial et Prototype.

Langage visuel

La partie visuelle est la plus importante. Elle regroupe les informations liées à la marque, au logo, aux couleurs, aux choix typographiques, à la grille de mise en page, à la navigation sur le site, au traitement des images, aux formats publicitaires et à leurs emplacements, aux icônes ainsi qu’aux styles de mise en forme spécifiques pour les tableaux ou les formulaires.

Marque

Il est toujours utile de rappeler ce qui fait la spécificité de l’entreprise qui fait appel à vos services.  Les éléments mis en avant par l’entreprise sur elle-même sont un bon point de départ, mais il ne faut pas oublier de décrire précisément les produit ou les services qu’elle propose. Par ailleurs, un résumé des motivations qui pousse l’entreprise à (re)faire un site web est très utile. Cette partie se rédige idéalement en tout début de projet pour servir de garde-fou à votre imagination fertile.

Logo

Affichez le logo avec les éléments indispensables à son bon fonctionnement : marges mini et maxi, tailles, couleurs, version noir et blanc ou en niveau de gris, etc. Sans oublier les conseils comme : ne pas encadrer ou ne pas souligner le logo, par exemple. Il est utile de rappeler qu’il faut partir de la version originale du logo plutôt que de modifier la taille d’une version déjà en ligne. A cet égard, rappelez également le format png, gif ou jpg choisi avec le taux de compression ou d’échantillonnage approprié.

Couleur

Donnez un échantillon des couleurs utilisées dans le site en indiquant les valeurs RVB et Hexadécimales. Si les couleurs font partie des couleurs nommées en HTML, précisez-le. Dans le cas contraire, donnez un nom à chaque couleur pour faciliter la communication entre les différentes personnes susceptibles d’intervenir sur le site. Vous pouvez également enregistrer votre palette de couleur et fournir des palettes au format Photoshop ou Illustrator.

Typographie

Affichez un échantillon des polices de caractère que vous avez choisies selon les éléments HTML : niveaux de titre h1, h2, etc., paragraphes p, les liens a (survolés a:hover, visités a:visited, etc.), les listes (ordonnées ol, non-ordonnées ul, de définition dl). Ainsi que tout autre élément susceptible d’être utilisé. Affichez la typographie sous forme d’images au cas où la fonte en question ne serait pas disponible sur le poste de l’utilisateur.

Grille

Tout le monde ne travaille pas avec une grille de mise en page, mais si c’est le cas, affichez la grille en indiquant les valeurs retenues pour les colonnes, les gouttières et la largeur totale du design. Indiquez également les regroupements de colonnes prévus et donnez quelques exemples d’utilisation en surimpression avec la grille en arrière-plan.

Navigation

Indiquez les différentes solutions visuelles retenues pour la naviguation à l’intérieur du site : navigation principale (ex. les catégories), navigation secondaires (ex. les tags), les liens dans le pied de page avec des exemples de mise en forme pour chaque élément.

Images

Donnez des exemples d’utilisation des images en fonction du nombre de colonnes et des différentes manières de les habiller selon le texte et le contexte lorsque : l’image occupe toute la largeur d’une colonne ou d’un regroupement de colonnes ; des marges la séparent des bords ; l’image est habillée à droite ou à gauche ; un titre se trouve au-dessus, etc. Pensez à tous les cas de figure.

Publicités

Les formats publicitaires sont un peu le tue-l’amour du design web. Et pourtant, pour nombre de sites web, c’est le nerf de la guerre. Sans aller jusqu’à définir le pas de votre grille en fonction des formats les plus courants, il est important de préciser où et comment la publicité peut s’intégrer dans la mise en page.

Fournitures diverses

Regroupez ici les éléments visuels utilisés dans le site : icônes, boutons, mais aussi les styles spécifiques pour la mise en forme des tableaux, l’affichage de commentaires, les formulaires, etc. Si les icônes et les boutons sont très nombreux, n’hésitez pas à créer une rubrique spécifique pour les styles particuliers pour ne pas surcharger cette section.

Editorial

Après la charge graphique au complet, la charte éditoriale est un éléments primordiale : c’est elle qui servira de guide pour que les différents intervenants puissent faire vivre le site web en employant des conventions communes pour que le discours ne s’éparpille pas lorsque les rédacteurs sont nombreux.

Notez que même si vous êtes l’unique rédacteur de votre site, mettre votre charte éditoriale noir sur blanc n’est pas une perte de temps, bien au contraire !

Qu’est-ce qu’une charte rédactionnelle ?

La charte rédactionnelle (ou charte éditoriale) est un document qui définit un style particulier de rédaction, en relation avec l’image de l’entreprise ou d’un produit. Plus précisément, la charte rédactionnelle peut formaliser et fixer des principes d’écriture :

• Rédaction des titres (long, court, informatif, accrocheur, laconique, comique),
• Style d’écriture (impliquer le lecteur, écrire à la 1re personne du singulier, à la 2ème personne du pluriel)
• Nombre de mots optimum par billet et par paragraphe,
• Illustration des billets (photos, dessin, graphique),
• Comment citer l’entreprise et ses produits dans les liens hypertextes, ainsi que les collaborateurs, les marques déposées, les concurrents, etc.,
• Déterminer la liste des mots interdits (dans le milieu médical, par exemple).

Les plus courageux d’entre vous se plongeront dans le Guide stylistique de la CFP dont la version PDF pèse pas moins de 165 ko !

Prototype

La partie Prototype liste toutes les pages du site et donne pour chacune d’elle un exemple de mise en place de la charte graphique en terme de fonctionnalités. Cet exemple est réalisé en HTML / CSS pour donner une idée aussi proche que possible de la version finale si les prototypes en question étaient retenus par le client.

En guise de conclusion

La mise en place d’une charte graphique et éditoriale est assez chronophage, c’est pourquoi elle est souvent réservée aux projets importants. Mais sa rédaction tout au long de la phase de conception peut s’avérer une aide précieuse pour éviter la dispersion et formaliser les choix créatifs au fur et à mesure de leur cristallisation.

1. Echelle et proportion

Pour mélanger harmonieusement plusieurs polices de caractère dans la même page, assurez-vous qu’elles ont des proportions et une échelle en commun. Ainsi, Georgia et Verdana ont des formes similaires bien que l’une est avec serif et l’autre sans-serif. C’est pareil pour Times New Roman et Arial Narrow.

Observez les caractères de chaque fonte séparément, par mot ou par phrase pour dégager leurs points communs. L’idéal est de superposer les fontes les unes sur les autres dans votre logiciel graphique préféré.

2. Harmoniser vos polices à l’aide de la couleur et des styles

Placer six fontes de style et de couleurs différents n’est pas une bonne idée. Lorsque vous avez trouvé deux couleurs qui vont bien ensemble, essayez de les assembler en jouant sur la teinte et la saturation. En ce qui concerne les styles, il faut surtout s’assurer qu’ils s’adaptent à la graisse et à l’emphase des polices : certaines supportent mal l’italique et/ou la mise en gras, par exemple.

3. Priorité et emphase

Certaines polices de caractère ont plus de personnalité que d’autres. C’est un point à vérifier lorsque vous mélangez plusieurs familles de polices sur la même page. Certaines fontes seront trop présentes, d’autres pas assez. Ajuster la taille est une bonne option, mais n’oubliez pas de jouer avec les balises strong, em, ou les propriétés CSS comme italic, oblique, small-caps, etc. pour augmenter ou diminuer l’impact en fonction de votre objectif.

La couleur peut jouer un rôle central pour hiérarchiser l’information véhiculée par telle ou telle fonte. Si l’une d’entre elles est trop présente, il sera possible d’atténuer son impact visuel avec une couleur plus claire ou moins saturée.

4. Eviter les polices trop similaires

L’utilisation rapprochée de Georgia et de Garamond peut donner l’impression que l’une des deux polices n’est pas à sa place. Par ailleurs, une des raisons qui pousse à utiliser plusieurs familles de caractère dans la même page est de donner du rythme. Les famille de caractères trop proches ne sont donc pas une bonne idée !

5. Assurez la lisibilité des textes

Les fontes un peu funky peuvent trouver leur place dans la navigation, les titres ou les textes courts en général. Dès qu’il y a beaucoup de texte à lire, il est préférable de s’en tenir à une seule police de caractère en privilégiant la sobriété et la simplicité.

6. N’oubliez pas les styles

Voici un moyen simple pour ne pas se tromper dans le choix des polices de caractères de votre site web : utilisez une seule police et variez les styles, les tailles, les couleurs, les fonds. Vous aurez la diversité, le rythme, tout en évitant les mariages malheureux entre des polices disparates.

7. Faites confiance à votre instinct

Pour finir, voici probablement le conseil le plus important de cette liste : prenez du recul sur votre travail et si quelque chose ne semble pas à sa place, changez-le ou supprimez-le !

Note personnelle

J’ai pompeusement classé cet article dans Traduction, mais il s’agit plutôt d’une «craduction». Je ne saurais trop vous conseiller de lire l’article original qui contient par ailleurs de nombreux exemples illustrant visuellement chacun des points abordés, avec pour finir, une galerie de sites d’une grande qualité typographique pour développer votre imagination créative.