La question du jour est : faut-il absolument qu’un site web s’affiche de manière identique sur tous les navigateurs ? Les réponses divergent selon que l’on est du côté de la conception graphique ou du côté de l’intégration web. On peut toujours répondre «non», la réponse toute faite étant qu’un visiteur donné n’utilise qu’un navigateur à la fois. Ce n’est pas faux, mais ce même visiteur peut très bien utiliser Internet Explorer 6 sur son lieu de travail, Firefox à la maison,  Google Chrome chez un ami et Opera chez un autre ami…

Le graphisme, c’est de l’expérience utilisateur

L’expérience utilisateur au sens large, c’est-à-dire en prenant en compte les différents contextes de visite d’un utilisateur qui bouge (sans se  limiter à la session en cours, donc), peut être compromise. Comment faire confiance à un site qui change d’apparence comme de chemise ? Selon l’écart qu’il peut y avoir entre les différents affichages, le visiteur peut légitimement se demander s’il n’est pas victime d’une tentative de Phishing (même s’il est plus facile de refaire une page web à l’identique qu’avec des différences, on est bien d’accord).

Ça va sans dire mais mieux en le disant : si la confiance est un élément important dans votre communication, il vaut mieux que votre site s’affiche de manière identique sur les différentes combinaisons plate-forme-navigateurs présentes sur le marché. Et vous l’aurez sans doute devinez, si l’on veut que le site web présente une interface identique sur tous les navigateurs, les notions d’amélioration progressive et de dégradation gracieuse perdent toute leur substance.

FUD ? Je reconnais qu’avec cette histoire de confiance, la peur, l’incertitude et le doute se sont insinués dans votre esprit. Et ce n’est que le début car j’aborde maintenant un élément essentiel dans toute communication d’entreprise : l’identité graphique. Il s’agit de faire en sorte que les signes distinctifs d’une marque (société, produit, etc.) soient explicités, sublimés et fixés dans la charte graphique que les différents intervenants devront respecter quel que soit le domaine d’intervention : plaquette imprimée, site web, drapeau planté sur la lune, etc.

Adapter la charte graphique au web, pas le contraire !

Pour s’en sortir, il faut parfois s’affranchir de la charte graphique de l’entreprise si celle-ci n’est pas adapté au support web. On rencontre souvent, par exemple, des chartes qui prévoient le logo en bas à gauche de la page compte tenu du parcours de l’oeil sur l’imprimé. Ce sens de lecture en Z, n’est pas forcément optimisé pour le web sauf à limiter la hauteur de la page à la hauteur de l’écran disponible sans défilement. Ce n’est pas impossible mais ce n’est pas souhaitable non plus si l’on veut profiter à fond du support.

Qui ne m’audit, consent…

L’idée serait donc d’adapter la charte graphique de l’entreprise au support web dans un premier temps, puis de faire un audit pour connaitre les limites de cette charte graphique quand vient le temps de l’intégration pour connaitre le temps qu’il faut réserver pour ceux qui interviennent le plus souvent en fin de chaine et qui paient les pots cassés, soit sur le temps de travail (travailler plus pour gagner plus ?) soit au détriment de la qualité du produit fini.

Après cet audit, il sera possible de revoir la charte graphique pour l’adapter aux contraintes du web soit en éliminant les coins arrondis et/ou les ombres portées par exemple, soit en mettant en place des stratégies techniques pour que ces coins arrondis et ses ombres portées puissent voir le jour dans de bonnes conditions. Reste aussi la possibilité de déterminer une politique de dégradation gracieuse et/ou d’amélioration progressive dès le départ. L’objectif est que l’équipe chargée de l’intégration ait connaissance de ces contraintes le plus tôt possible pour travailler avec la charte graphique et non pas contre.

Pour (éviter de) conclure

Bon évidemment cette démarche est réserver à celles et ceux qui veulent vraiment s’investir dans le web, pour les autres, il sera nécessaire d’expliquer à leurs prestataires qu’ils sont trop exigeants et qu’il faut apprendre à gérer les problèmes au lieu d’essayer de les éviter en amont !

PS : Les Quelques notes regroupent des débuts de billets restés longtemps sous forme de brouillons faute de matière suffisante que je partage en l’état :  l’humour peut côtoyer la mauvaise foi et l’exactitude peut se mélanger à l’approximation… Un joyeux b***** en fait, même si tout n’est pas à jeter !

Les hacks CSS sont une utilisation peu conventionnelle des sélecteurs CSS pour s’adresser à un ou plusieurs navigateurs quand on doit servir une propriété ou une valeur CSS spécifique à un ou plusieurs navigateurs. Si IE6 fait la fine bouche devant sa soupe de balises, il peut être intéressant de lui servir le même plat mais dans une assiette différente (la comparaison est bancale). Ces hacks s’utilisent souvent pour cibler des versions spécifiques d’Internet Explorer (généralement IE6 et IE7). Toutefois, il en existe pour Firefox, Opéra, Safari, iPhone, etc. Par ailleurs, je n’utilise pas ces hacks CSS dans ma feuille de style principale, mais uniquement dans une CSS réservée à IE via les commentaires conditionnels.

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 */

Tester ses pages web dans les différents navigateurs présents sur le marché est souvent source de frustration. Même lorsqu’on utilise un système Windows, on rencontre des difficultés pour tester les sites dans IE6, IE7 et IE8 en même temps. Opera, Firefox, Google Chrome ou Safari ne posent pas de problème particulier. Selon votre configuration, il existe plusieurs techniques permettant d’assurer un affichage homogène sur la majorité des navigateurs : virtualisation, logiciels, services en ligne ou pourquoi pas un deuxième ordinateur dédié comme un NetBook ?

Il est bien évident que la question de pose différemment selon que l’on utilise un Mac ou un PC et dans ce dernier cas, c’est encore différent selon que l’on utilise Windows XP, Vista ou Seven. Si vous êtes sous Linux, ma foi, vous devriez être capable de vous en sortir tout(e) seul(e), non ? ^_^v

Installer «Test Drive» (IE9 preview) sur Vista

Note du 16/03/2010 — Microsoft vient de lancer Test Drive pour mettre la version preview d’Internet Explorer 9 en téléchargement. Cette version propose de basculer vers les models de document de IE5, IE7 et IE8 (et bien sûr IE9 par défaut). Ce qui devrait permettre de tester ses pages web beaucoup plus rapidement, sous réserve que le IE5 document mode affiche les pages comme le fait IE6 !

Machine Virtuelle avec Windows XP et IE6

Si comme moi vous utilisez Windows Vista, vous rencontrez peut-être des difficultés pour travailler avec IE6 dans de bonnes conditions. La virtualisation avec Virtual PC ou VirtualBox et l’image disque proposée gratuitement par Microsoft regroupe une version de Windows XP et Internet Explorer 6 et offre un environnement de travail opérationnel.

Une fois l’installation et le paramétrage de la connexion internet de Windows XP effectués, vous pouvez tester votre site sous IE6. Mais c’est très gourmand en ressources et la séance de test se transforme vite en cauchemar à moins d’avoir 4 go de ram et deux écrans (j’ai souvent Photoshop et/ou Illustrator ouverts sans compter les autres logiciels…).

Si votre configuration tient la route, cette solution présente l’avantage de vous permettre de tester votre site avec une vraie version d’IE6, Javascript et commentaires conditionnels en ordre de marche, ce qui n’est pas forcément le cas pour toutes les solutions présentées plus bas.

Quelques conseils pour l’installationde Virtual PC chez xuxu et Comment ça marche.

Logiciels pour tester votre site sous IE

A coté de la virtualisation, il existe des solutions logicielles pour tester son site avec plusieurs navigateurs :

• Si vous êtes sous Windows XP avec IE6, vous pouvez utiliser IE7_standalone pour tester sous IE7. Si vous avez déjà IE7, utilisez Multiple IE pour tester dans IE6 et les versions précédentes. Si vous êtes passé sous Vista, vous pouvez tester IE6 for Vista en version alpha. A noter qu’en désinstallant IE7 sur Windows XP, on retrouve une bonne vieille version d’IE6.
• Dans le même esprit, il existe Internet Explorer Collection qui contient pratiquement toutes les versions d’Internet Explorer : d’IE 1.0 à IE 8.0 ! (Merci à Deloo).
• Si vous utilisez IE8, vous pouvez basculer le moteur de rendu graphique et Javascript dans le mode IE7 ou encore le mode Quirks (IE5) déclenché par IE8 en l’absence de Doctype. Pour cela, rendez-vous dans les outils pour développeurs. Ces outils sont une tentative bienvenue de la part de Microsoft pour offrir des outils de débuggage comme Firebug pour Firefox. Plus d’information sur la prise en charges des CSS, Javascript et documentMode dans IE8.
• IE Tab est une extension Firefox qui utilise le moteur de rendu d’Internet Explorer (IE7 ?) dans un onglet Firefox. C’est surtout utile lorsqu’un site vous annonce qu’il n’est pas compatible avec votre navigateur préféré. Le rendu ressemble vaguement à IE7 mais avec des variantes, notamment en ce qui concerne les comportements Javascript.

IETester

Pas convaincu par les logiciels précédents ? Installez donc IETester qui vous permettra de tester votre site avec la majorité des versions d’Internet Explorer. Toujours en version Alpha, la v0.42 propose des options pour développeurs comme l »activation ou la désactivation du Javascript.

IETester est un peu instable, mais relativement confortable pour des séances courtes.

Tester votre site dans IE5.5, IE6, IE7, IE8 avec IETester. Cliquez pour agrandir l'image.

La communauté autour de IETester semble assez active et vous trouverez de  l’aide sur le forum.

Captures d’écran en ligne

Si les solutions précédentes ne vous conviennent pas, vous pouvez vous tournez vers les services en ligne pour obtenir des captures d’écran sous différentes combinaisons de navigateurs et de systèmes d’exploitation :

• BrowserShots — Pratiquement tous les navigateurs sur la plupart des systèmes d’exploitation,
• BrowsrCamp — Capture d’écran sous Mac OS X,
• Scapture — Capture d’écran sous Linux,
• Netrenderer — de IE5.5 à IE8,
• lynxview — Tester votre site sous Lynx (N’oubliez pas de créer le fichier delorie.htm à la racine de votre site pour que ça fonctionne),
• Browsera — Service payant permettant de tester l’ensemble d’un site (à partir de 29$/mois).
• browsercam — Un autre service payant pour tester sur plus de 400 combinaisons de navigateurs/OS  (à partir de 39.95$/mois pour 3 mois ou 19.95$ pour la journée)

Browser Sandbox

Browser Sandbox est un bac à sable pour navigateurs à mi-chemin entre les solutions logicielles et la virtualisation via une extension pour Firefox ou un plugin (.exe) pour Internet Explorer.

Le résultat s’affiche sous la forme d’une instance du navigateur que vous avez choisi parmi IE8, IE7, IE6, Firefox 3.5, Firefox 3, Firefox 2; Apple Safari 4 et 3, Google Chrome ou encore Opera 9 et 10 pour finir.

A noter qu’à l’instar d’IETester, l’affichage des polices de caractère n’est pas identique au vrai IE6 et bénéficie plutôt du rendu de la version d’Internet Explorer installée sur votre système.

Browser Sandbox fonctionne bien malgré des plantages inopinés qui surviennent de temps à autre.

Affichage du site dans dans Internet Explorer 6 avec Browser Sandbox de Spoon. Cliquez pour agrandir l'image.

NetBook ou Portables

La solution qui a ma préférence, c’est le NetBook sous Windows XP et IE6. C’est presque trop beau pour être vrai : pour moins de 300€ on s’offre la même configuration que les moins bien lotis de nos visiteurs : faible résolution d’écran, petit processeur et navigateur obsolète… le rêve, je vous dis !

Depuis que j’ai eu l’occasion d’admirer mon blog dans la résolution moyenne de ces Netbook (1024 par 600), je fais en sorte d’avoir du texte à lire dans cette zone en dehors du logo et de la baseline.

Essayez, et vous serez surpris par le nombre de sites ou de blogs qui ne proposent rien à lire dans cette zone primordiale des 500 premiers pixels (oui, il faut retrancher quelques précieux pixels occupés par les barres d’adresse et d’outils de votre navigateur).

Des modèles comme le Asus EeePC 1005HA ou 1008HA, le Samsung N140 ou encore le HP Compaq Mini 311c sous Windows XP sont de bons candidats. Tout autre portable sous Windows XP fera bien entendu l’affaire.

Adobe Browserlab

Oui, mais voilà, vous voudriez également savoir à quoi ressemble votre site chez le Mac Addict qui ne jure que par Mac OS X. Dans ce cas-là Browserlab est fait pour vous. Non seulement il vous permettra de tester votre site sous Firefox et Safari pour Mac OS X, mais en prime vous aurez la possibilité de voir ce que ça donne dans IE6 et IE7 pour Windows de manière à la fois fluide et rapide.

L’affichage des capture est assez rapide et il est possible de comparer plusieurs versions.

Comparer son site : IE6 sous Windows et Safari 3.0 sous Mac OS X. Cliquez pour agrandir l'image.

Internet mobile

Avec des chiffres estimés à plusieurs millions d’utilisateurs, il est important de vérifier que son site web s’affiche correctement sur les petits écrans des périphériques mobiles.

Plus d’information sur MobiReady dans l’article Votre blog sur un téléphone portable, really ready ?

N’oubliez pas de proposer un menu skip links à vos visiteurs mobiles !

Testez votre site web dans plusieurs téléphones portables avec Mobi Ready. Cliquer pour agrandir l'image.

Pour conclure

Cet article fait rapidement le tour des solutions que j’ai eu l’occasion de tester de manière plus ou moins approfondie pour tester mes pages web avec IE6, sachant que j’utilise Vista au quotidien. Si dans votre environnement professionnel les pages web doivent s’afficher correctement partout, il vaut mieux utiliser de vraies machines sous Mac OS X, Windows Vista, XP, Linux, etc.

Il s’agit de la seule manière de pouvoir compter sur le moteur de rendu graphique et Javascript et des éventuels outils d’aide à l’intégration et au développement… Le débuggage d’une page web ne se réduit pas à recaler une barre latérale qui passe sous le contenu principal !

Par ailleurs, il est toujours très intéressant de voir le rendu de son site sous une autre configuration (taille d’écran et résolution différentes, autres polices de caractère  installées, etc). Ça calme !

Avec Browser Size, Google Labs nous propose de découvrir la part de contenu visible dans la fenêtre des internautes selon des moyennes statistiques réalisées d’après les visites sur les sites de Google, c’est-à-dire un peu tout le monde ! On découvre ainsi que 99% des visiteurs ont une fenêtre d’environ 550 pixels de large pour 350 pixels de haut avec des chiffres qui chutent assez vite à mesure que la taille augmente : seulement 90% des visiteurs visualisent une surface de plus de 950 pixels par 500 pixels. Quand aux tailles supérieures à 1200 pixels de largeur, elles concernent moins de 50% des utilisateurs.

Qu’en penser ? Ce viewport n’est pas forcément lié à la résolution de l’écran. Il s’agit de la taille ajustée manuellement par l’utilisateur. On peut imaginer qu’il alloue une largeur pour tous les sites qu’il consulte ou qu’il ajuste cette largeur en fonction des informations qui apparaissent sur le site, en fonction de ses centres d’intérêt.

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

Dans ce cas, les tailles données par Google ne voudrait pas dire grand chose. Difficile en effet de savoir qui de la poule ou de l’oeuf était là avant et vice-versa ! Je terminerais par un proverble chinois que j’affectionne particulièrement : Quand le sage montre la lune, l’imbécile regarde le doigt… J’exagère un peu et je tiens à modérer mon manque d’enthousiasme pour Browser Size : cet outil fait peu mais il le fait bien, et c’est déjà pas mal ^_^v

Conditional-CSS est un programme écrit en php4 et php5 (au choix) qui permet d’utiliser des commentaires pour cibler une dizaine de navigateurs par leur nom et leur version, à la manière des commentaires conditionnels ciblant les différentes versions d’Internet Explorer.

Les commentaires conditionnels de Conditional-CSS peuvent s’appliquer à l’ensemble d’une règle CSS ou à une seule de ses propriétés. Voici un exemple d’utilisation :

/* Conditional-CSS example */
a.button_active, a.button_unactive {
    display: inline-block;
    [if lte Gecko 1.8] display: -moz-inline-stack;
    [if lte Konq 3.1] float: left;
    height: 30px;
    [if IE 5.0] margin-top: -1px;
    text-decoration: none;
    outline: none;
    [if IE] text-decoration: expression(hideFocus='true');
}

Voici les navigateurs pris en charge par le script :

• Internet Explorer
• Internet Explorer Mac
• Gecko (Firefox etc)
• Webkit (Safari etc)
• Opera
• Konqueror
• Safari Mobile (iPhone, iPod)
• IE Mobile
• PSP Web browser

Même si je ne suis pas fan de ce genre de technique — qui automatise d’une certaine manière les hacks CSS souvent décriés — force est de reconnaitre que l’auteur de c-css à fait du beau travail. Je garde l’adresse sous le tapis de souris : on ne sait jamais ;)

Vous le savez certainement, les fichiers Javascript ou CSS sont placés dans le cache du navigateur pour être réutilisés sans devoir aller chercher les mêmes informations sur le serveur. C’est assez pratique car les fichiers en question ne sont téléchargés qu’une fois. Mais si vous modifiez ces fichiers après la mise en ligne, c’est la version placée en cache qui continuera de s’afficher jusqu’à ce que l’utilisateur vide son cache d’une façon ou d’une autre.

Pour y remédier, Damien Ravé nous propose une utilisation judicieuse de la fonction PHP filemtime() qui renvoie la date de la dernière modification d’un fichier pour recharger le cache CSS ou JS :

<script type="text/javascript" src="js/script.js?v=<?php echo filemtime('js/script.js'); ?>">
<link rel="stylesheet" type="text/css" href="css/ecran.css?v=<?php echo filemtime('css/ecran.css'); ?>">

Un spectre hante le web : le spectre Internet Explorer 6. Nombreux sont ceux qui ont tenté de convaincre les webmasters de refuser de servir le navigateur collé au fond de la classe près du radiateur ou qui s’interrogent sur son utilisation. Sans trop de résultats.

Il faut dire que la base installée est encore importante et on ne peut pas demander au gens de couper la branche sur laquelle ils sont assis. Et pourtant, je sens que vous n’attendez qu’une bonne occasion pour vous débarrasser du bouzin.

Le constat

IE6 représente encore entre 20% et 30% des visites, parfois plus, parfois moins. Il est donc important d’en tenir compte dans la majorité des projets de sites web. Sur mon blog, les internautes équipés de IE6 ont représenté environ 12% des visites depuis juillet 2006 et comptent pour 7% des visites sur les trois dernier mois.

Si j’enlève les développeurs web qui dégainent IE 6 pour tester les sites visités (et qui doivent représenter une grande partie des lecteurs), j’évalue à moins de 5% le nombre d’internautes qui me rendent visite « pour de vrai » avec IE6 sachant qu’il s’agit certainement des visiteurs envoyés par Live.com qui désirent regarder danser Louxor…

5%, c’est peu mais ça représente plus de 1000 visites par mois : c’est suffisant pour s’en soucier quand même ! Il n’est pas dans mes intentions de priver ces visiteurs d’une saine lecture :)

Du coup, il m’est venu une idée : pourquoi ne pas rediriger les visiteurs équipés d’une version d’IE inférieure à 7 vers le flux RSS mis en forme par Feedburner sachant qu’un visiteur surfant avec IE6 pourra s’abonner et me lire plus tard depuis son agrégateur ?

C’est là qu’intervient kickIE6 :

I’m in ur blog kicking ie6, kwel… ^__^v

<script type="text/javascript">
    if ( $.browser.msie ) {
        if ( $.browser.version < 7 ) {
            document.location.href = 'http://feeds.feedburner.com/css4design';
        }
    }
 </script>

Placez ce script après l’appel de la librairie jQuery entre les balise head de votre fichier header.php (si vous êtes sous WordPress) et d’indiquez l’adresse de votre flux Feedburner à la place du mien.

Pour que votre flux RSS s’affiche correctement dans un navigateur, vous devrez peut-être activer le service BrowserFriendly de Feedburner dans l’onglet Optimize. En savoir plus sur les services Feedburner.

Installer jQuery sans douleur sur WordPress

Vous ne savez pas si jQuery est installé dans votre thème WordPress ? Voici une ligne à ajouter juste au-dessus du script kickIE6 :

<?php wp_enqueue_script('jquery'); ?>

Cette ligne devrait activer la bibliothèque jQuery installée en standard avec WordPress.

Une solution qui exclue ?

J’ai mis en place ce script depuis une dizaine de jours et comme me l’ont fait remarquer plusieurs personnes (deux pour être exact), une partie de ceux qui utilisent IE6 ne le font pas par choix personnel et subissent les lourdeurs de leurs administrateurs réseaux qui ne veulent (ou ne peuvent) pas mettre à jour le parc informatique de l’entreprise. C’est pour ceux-là justement que je propose la lecture du flux et l’abonnement ensuite si plus d’affinité.

Mais quid de l’interaction ? Et oui, la lecture du flux ne permet pas aux lecteurs de laisser des commentaires. C’est vrai et ça m’ennuie. Même si derrière les chiffres il y a des personnes, je ne peux m’empêcher de me dire que le pourcentage de ceux qui laissent des commentaires par rapport aux lecteurs est faible et il n’y a aucune raison pour que ceux qui utilisent IE6 soient plus bavards que les autres…

Par ailleurs, je compte sur le fait que ceux qui subissent IE6 au travail, ont certainement un autre navigateur installé à la maison ;)

Comment j’en suis arrivé là, en réalité…

C’est la faute à Blueprint ! Pas vraiment, mais un peu quand même. J’avais déjà utilisé avec succès ce framework CSS et le script IE7.js, mais quand j’ai refait mon thème, j’ai péché par excès de confiance en ne testant mon design sous IE 6 qu’à la fin ^_^v

Blueprint n’est pas vraiment en cause car je n’ai pas suivi la logique du framework pour toutes les parties de la mise en page. C’est là que je me suis aperçu que l’intrusion de la présentation dans le code HTML sous la forme des classes CSS ne facilite pas la mise en place d’une feuille de style alternative. Surtout quand on change de design tous les mois, ou presque !

Je reconnais que si j’avais été plus vigilant en utilisant Blueprint (tester tôt et souvent), j’aurais — comme d’habitude — un blog qui s’affiche aussi bien dans IE6 que dans les autres navigateurs.

Conclusion

Je n’envisage pas de laisser tomber le support CSS d’IE6. Mais ce blog est un terrain d’expérimentation et j’ai eu envie d’expérimenter en mettant en avant une utilisation originale des flux RSS pour pallier les manques d’Internet Explorer 6. Cette idée pourrait trouver un prolongement en fournissant du contenu aux périphériques mobiles en complément d’une version mobile d’un blog, par exemple.

Je rappelle que le support d’Internet Explorer 6 est indispensable pour gagner ses galons d’intégrateur web. Pour autant, il n’est pas interdit de prendre en compte son lectorat et les ressources que l’on est prêt à mettre sur la table pour fournir la meilleure interaction possible entre les visiteurs et le contenu. De ce point de vue, les flux RSS associés aux différents services de Feedburner méritent d’être pris en compte dans une stratégie globale d’accès à l’information.

Keep clickin’

Comme tous les intégrateurs web j’utilise plusieurs navigateurs pour tester la conformité du rendu HTML et CSS. Firefox 3 a une place particulière puisqu’il fait également partie des outils de conception grâce à des extensions comme Webdevelopper.

Pour autant, je reste un utilisateur comme les autres quand il s’agit de consulter mes mails (Gmail) de saisir du courrier (Google Documents), de consulter mes flux RSS (Google Reader) ou simplement pour lire le journal (Google News).

Firefox 3 — le capital sympathie s’épuise ?

La force de Firefox 3 ne réside pas dans ces qualité intrinsèques : qu’en reste-t-il une fois les extension désactivées ? Pourtant, l’indulgence de la part de la communauté vis-à-vis du Panda roux a été jusqu’au déni des contre-performances, pourtant évidentes que j’avais évoqué dans l’article Firefox roxe ? Opera, ça ira ? et IE7 part en sucette ?

La faute à Javascript ?

La particularité des services mentionnés plus haut est de faire un usage important de Javascript qui sollicite la mémoire du navigateur et grève ses performances. De ce point de vue, Firefox n’est pas un foudre de guerre et question rapidité il ne fait pas le poids, y compris face à Internet Explorer 6…

On a retrouvé Big Foot !

Quant à l’empreinte mémoire, n’en parlons pas : il m’arrive régulièrement d’observer une occupation de près de 1Go. Tout ça ne serait rien, si Firefox n’avait pas la fâcheuse habitude de planter régulièrement. La fonction qui permet de recouvrer l’ensemble de la session n’excuse pas tout. Mais au final, j’y trouve mon compte grâce aux extensions disponibles qui me font gagner du temps dans dans le « débuggage » des pages web.

Et Google Chrome fut

Une des particularités de Google Chrome est de lancer chaque onglet dans un processus différent à côté du noyau principal qui reste très léger. Grâce au gestionnaire de tâche intégré, il devient possible de connaitre précisément l’occupation mémoire de des onglets ouverts. Cela permet d’optimiser la navigation et de mieux gérer la RAM en réservant Google Chrome pour afficher les sites nécessitant des ressources importantes.

Où je veux en venir ? Simplement à une nouvelle organisation de mon surf quotidien : Google Chrome comme navigateur par défaut et Firefox 3 comme outil de développement web.

Conclusion

Comme la majorité de la population n’a pas besoin des extensions de developpement de Firefox 3, Google Chrome risque de rafler la mise auprès du grand public, comme le moteur de recherche Google l’avait fait en son temps : on ne résiste pas à l’accélération de l’affichage des résultats, pas plus qu’à celui des pages web.

Pour finir, il sera plus difficile pour la fondation Mozilla de mettre en place une plate-forme anxiogène sur le produit de Mountain View que sur celui de Redmond !

Google Chrome affiche une poignée en bas à droite des balises textarea pour les redimensionner. C’est sympa, mais un peu redondant avec le script que j’ai installé pour avoir la même chose sur les autres navigateurs…

L’aspect pratique, en revanche est indéniable quand on est face à des zones de saisie trop chiches. Déjà une bonne surprise au bout de 5 min. d’utilisation seulement. Ca promet :)

Question : Au fait, c’est quoi le user-agent de Google Chrome ?

Réponse :

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US)
AppleWebKit/525.13 (KHTML, like Gecko)
Chrome/0.X.Y.Z Safari/525.13.`

Si vous utilisez le tableau de bord Admin de WordPress avec Internet Explorer vous avez droit à ce joli visuel vous mettant en garde contre l’utilisation d’un navigateur non sécurisé et vous invitant à switcher pour un monde meilleur ;)