Intégrateurs de tous les pays, ce billet s’adresse à vous, vous, oui, qui avez souvent souffert des heures et mêmes des jours entiers à rendre compatible votre site avec les différents navigateurs du marché. Rappelez-vous ce jour où pendant 4 heures vous avez cherché à supprimer cet espace blanc qui apparaissait sous Internet Explorer 6, mais pas sous Firefox, et quand vous aviez enfin réussi à le faire disparaître, voici que cet espace réapparaissait soudain sous Firefox ! Oui, intégrateurs de tous les pays, l’intégration html pour tous les navigateurs est le chemin de croix par lequel nous devons tous passer, ne serait-ce que pour complaire à votre directeur marketing, mais aussi pour arriver à ne pas perdre ces 0,5% « d’imbéciles » qui utilisent encore Safari sous leur Mac ou les 0,1% de geeks qui se servent d’Opera sous Linux. Eh oui, intégrateurs de tous les pays, chaque internaute est un client potentiel et derrière lui se cache peut-être votre marge du mois. Alors ne soyez pas si rétif et pensez à tous les sous que vous pourrez gagner si vous rendez votre site compatible sous IE4, IE5, IE6, IE7, Firefox 1, Firefox 2, Opera, Safari et j’en passe et des meilleurs.

Bien sûr, vous pouvez vous en fiche, comme de l’an 40, et, dans ce cas, je vous conseillerais de ne pas lire ce qui suit, un excellent article sur le « cross-borwser compatibility », déniché, fort heureusement, sur Smashingmagazine.com.

Les tests navigateurs sont nécessaires

Un des grands inconvénient du web est que l’oeil qui regarde votre site dépend beaucoup du navigateur et de l’environnement sous lequel tourne ce navigateur. Il est notoire (si, il est notoire) que les Mac ne rendent pas les polices de caractères de la même manière que les environnement Windows ou Linux, générant par là des différences notables de rendu de votre page web. Et cet exemple n’est que la partie immergée des nombreuses différences qui peuvent exister d’un navigateur à l’autre et d’un environnement à l’autre. Si l’on regarde la répartition des navigateurs en usage aujourd’hui dans notre beau pays qu’est la France, on remarquera, pour le peu qu’on soit un peu observateur, que la question n’est pas caduque et qu’il vous faut bien vous résoudre, malgré votre angoisse, à aborder de face les multiples combinaisons que nous offrent si généreusement les multiples navigateurs développés par des pelletées de développeurs, tous plus ardents les uns que les autres à produire des outils non compatibles entre eux. Mais, je m’égare.



La triste réalité veut donc qu’il n’existe pas de solution simple à ce problème. Respecter soigneusement les conventions du W3C ne suffisent malheureusement pas à nous aider et seul une analyse visuelle sous toutes les coutures de nos pages webs à travers différents navigateurs nous permettra d’atteindre le résultat escompté : à savoir, une charte graphique et une lisibilité homogène d’un bout à l’autre du spectre.

Pour cela, deux possibilités :

1. vous possédez un certains nombre de machines sous la main et vous avez la possibilité de tester sous chacune d’entre elles l’apparence de vos pages (méthode lourde)
2. vous utilisez des outils de simulation qui vous permettent d’avoir autant de versions de navigateurs qu’il existent sous une seule et même machine.

Nous allons voir que les deux méthodes devront être utilisées pour arriver au résultat parfait. Revue de détail –>

Internet Explorer

Ah Internet Explorer ! Outre le fait qu’il ne respecte JAMAIS les normes du W3C, il présente l’inconvénient de ne pouvoir jamais être installé sous plusieurs versions sur la même machine, fait très gênant, lorsqu’on connaît les différences d’interprêtation entre MSIE6 et MSIE7. Pour pallier à ce défaut, vous pouvez donc vous tourner vers TredoSoft’s Multiple IE’s package.



L’installation est simple et vous permettra de visualiser sur un même ordinateur vos pages webs sous IE3, IE4.01, IE5, IE5.5, IE6. Attention, pour l’instant, il n’existe pas de version pour Vista et il vous faudra donc installer Microsoft Visual PC 2007 avant de pouvoir l’utiliser. Et si vous souhaitez voir vos pages sur IE7, alors vous pouvez utiliser ieCapture, simple outil en ligne vous permettant de rendre vos pages comme sous IE7, quelque soit votre machine.

Safari

Safari est une trouvaille d’Apple qui imaginait sans doute que tout était trop simple dans le monde des navigateurs et décida donc de complexifier un peu le métier d’intégrateur en proposant ce superbe boulet navigateur aux utilisateurs de MAC.

Comme pour IE, une seule version de Safari peut être installée à la fois sur Mac OS X, mais heureusement pour nous, qu’un développeur québecquois du nom de Michel Fortin s’est décarcassé pour nous proposer gratuitement MultiSafari, qui nous aide fort opprotunément à résoudre notre problème (Cela ne vous empêchera pas de disposer d’un Mac).

Linux

OS préféré des geeks, Linux nous offre une intéressante panoplie de navigateurs et de rendus différents. Même si la proportion de leurs utilisateurs est faible, il peut tout de même valoir la peine de lancer Ubuntu ou Knoppix, deux OS qui n’ont pas besoin de disque dur pour fonctionner pour regarder un peu ce qu’y donnent vos pages (Knoppix intègre nativement Konqueror et Mozilla, tandis qu’Ubuntu se paye la dernière version de Firefox).

Des outils en ligne pour tester votre site

Autre technique pour tester votre site, les services en ligne. Voici un échantillon proposé par SmashingMagazine (la plupart payants).

• IE Web Renderer
  Génial pour tester en ligne le rendu de vos pages sur pratiquement toutes les versions d’Internet Explorer. Un peu long parfois.
• Browsershots
  Permet de tester sous tout plein de navigateurs différents. Pas pu le tester, car le serveur était planté quand j’ai écrit ce billet.
• Litmus
  Payant, mais les services offerts vont au delà de ses concurrents : génération de plus de 30 rendus en quelques secondes, tests de compatibilité, captures d’écran visible du haut vers le bas de la page originale (contrairement aux autres services qui coupent la page). Un service de versionning et de tracking de bugs est également disponible.
• Browser Photo
• Browsrcamp
  Magnifique outil permettant de tester ses pages sous Safari. La page d’accueil complète de mon site est visible sur cette page grâce à Browsrcamp. Et en plus, il est gratuit !
• Browsercam
  Sans doute la Rolls-Royce du rendu d’écran. Le nombre de type de navigateurs et de systèmes est en augmentation permanente (actuellement plus de 70) et vous permet de tester vos réalisations sous Linux, Mac, Windows et même sur des mobiles (Blackberry, etc.). La résolution d’écran est paramétrable et vous pouvez télécharger vos oeuvres dans un fichier ZIP. Pour le coup, celui là est payant
• BrowserPool

De quoi est capable votre navigateur ?

Maintenant que nous avons vu comment l’on pouvait rendre nos pages webs sous différents navigateurs, il serait aussi intéressant de connaître les possibilités de ces derniers en matière de compatibilité avec les derniers standards du web. Voici quelques sites amusant qui vous diront ce que votre navigateur a dans le ventre.

• Acid 2 Test
  Les meilleurs navigateurs devraient être capables de rendre ce smiley ridicule en css. Le votre y arrive-t-il ?
• Sélecteurs CSS 3
  Votre navigateur est-il compatible ?
• CSS2 Test Suite
  Votre navigateur rend-t-il correctement le CSS2 ? Mhhhh ?
• Acidic Float Tests
  Pour les puristes. Ces tests vérifient si les conteneurs suivant un logo flottant hors de son conteneur (un DIV) respectent ce « flottement » (??). Tests à ne réaliser que sous haute dose de calmants.
• CSS Test Suite
  Ca, c’est bon, ça. Testez tous les éléments du CSS2 sous votre navigateur. A ne pratiquer qu’en cas de jour pluvieux ou la veille de la fin du monde.
• CSS Tests and Experiments
  Pareil, mais là, je commence à avoir une migraine de derrière les fagots, je vous dis pas.
• Cascading Style Sheets Test Suites
  Uniquement pour les intégrateurs dépressifs et suicidaires.
• PNG Test
  Bon, ça, c’est plus marrant. C’est pour tester ce que donne vos images en PNG

Conclusion

Avec tous ces liens, vous allez avoir du boulot en perspective et surtout, vous ne pourrez plus dire à votre patron que vous n’arrivez pas à rendre son site compatible sous MSIE7 et Firefox. Bonne intégration !

NB : My apologizes to the guys of Smashing Magazine who gave me the subject and the contents of this article, but it was so worthwhile to translate it in french, that I could’nt help me to do it.

Share this: