En tant que Web designer ou dé­ve­lop­peur, il est pré­fé­rable de tra­vail­ler sur des projets de sites Web qui peuvent être supportés par plusieurs na­vi­ga­teurs. Pour parvenir à cette fin, il est important de veiller à ce que le contenu (notamment les feuilles de style comme CSS et les codes script de type Ja­vaS­cript) soient cross-browser, c’est-à-dire que tous les éléments soient pro­gram­més de manière à afficher le contenu de manière identique, quel que soit le na­vi­ga­teur utilisé.

Garder un bon aperçu d’ensemble avec les tests cross browser

Si vous renoncez à effectuer ces tests de com­pa­ti­bi­lité, il y a de fortes chances que votre site Web ne soit optimisé que pour une quantité res­treinte de na­vi­ga­teurs. Certains na­vi­ga­teurs peuvent donc afficher le site web avec de nombreux bugs et erreurs d’affichage dis­gra­cieux. Les problèmes de com­pa­ti­bi­lité pro­vien­nent avant tout du fait que le na­vi­ga­teur in­ter­prète le code de manière in­di­vi­duelle et stan­dar­di­sée. En tant que Web designer, il arrive fré­quem­ment que l’on perde de vue certains na­vi­ga­teurs lorsque l’on se concentre sur un en par­ti­cu­lier au cours du dé­ve­lop­pe­ment d’un site Web. Cette étape cruciale ne portera pas ses fruits si les in­ter­nautes voient votre contenu s’afficher de manière inap­pro­priée parce que le site n’est pas supporté par leur na­vi­ga­teur.

L’op­ti­mi­sa­tion d’un site Web pour plusieurs na­vi­ga­teurs joue également un rôle important en Res­pon­sive Web design. Dans ce cas de figure, les systèmes d’ex­ploi­ta­tion mobiles (à l’image d’Android par exemple) doivent également être pris en compte. Mais une op­ti­mi­sa­tion cross-browser est souvent un travail fas­ti­dieux car la fonc­tion­na­lité des divers éléments doit souvent être vérifiée au cas par cas sur chaque na­vi­ga­teur.

Dans la pratique, les na­vi­ga­teurs suivants sont souvent pro­blé­ma­tiques : 

  • Internet Explorer dont des versions an­té­rieures sont encore utilisées et qui peut être installé sur une machine virtuelle (au prix de nombreux efforts), mais qui ne peut pas être installé sur un or­di­na­teur ;
  • Safari avec lequel on ne peut pas effectuer de tests cross browser si on utilise Windows ou Linux en tant que système d’ex­ploi­ta­tion ;
  • Les na­vi­ga­teurs mobiles qui sont pour la plupart devenus obsolètes.

Comme la plupart des versions de na­vi­ga­teurs ne sont gé­né­ra­le­ment pas à votre dis­po­si­tion ou ne sont pas ins­tal­lées et à portée de main, des outils de tests cross browser ont été dé­ve­lop­pés pour remédier à ce problème. Ces outils dis­po­nibles sur le Web proposent souvent des packs com­pre­nant dif­fé­rents na­vi­ga­teurs et les res­sources ma­té­rielles dont vous pourriez avoir besoin pour effectuer les tests de com­pa­ti­bi­lité inter-na­vi­ga­teurs.

Comment fonc­tion­nent les outils de tests cross browser ?

Les nombreux services dis­po­nibles vous per­met­tent de tester la com­pa­ti­bi­lité avec dif­fé­rents na­vi­ga­teurs des éléments du site Web à l’aide de si­mu­la­tions. Néanmoins, les prix et les fonc­tion­na­li­tés de ces outils varient gran­de­ment.

A titre d’exemple : si vous souhaitez optimiser une ap­pli­ca­tion intranet pour une PME, les chances sont élevées pour que celle-ci soit com­pa­tible avec la plupart des na­vi­ga­teurs. Les outils de test cross browser vous seront utiles dans ce cas de figure pour installer les na­vi­ga­teurs né­ces­saires sur votre système. En revanche, si vous désirez optimiser un site Web qui génèrera beaucoup de trafic, il vous sera difficile de tester par vous-même la com­pa­ti­bi­lité. Il est pré­fé­rable pour cela d’utiliser les outils dis­po­nibles sur le Web qui com­pren­nent une fonc­tion­na­lité de copie d’écran intégrée. Ces outils ef­fec­tuent des copies d’écran de votre site Web avec les na­vi­ga­teurs de votre choix. En règle générale, vous cons­ta­te­rez que la plupart des bugs avec HTML et CSS seront affichés tandis que les ap­pli­ca­tions Web de votre site seront ignorées par l’outil. Pour que vous puissiez vérifier le bon fonc­tion­ne­ment de votre site dans sa totalité, il existe des outils per­met­tant un contrôle à distance sur dif­fé­rents na­vi­ga­teurs sans avoir à les installer et né­ces­si­tant peu de matériel.

Les meilleurs outils de test cross browser

Il est d’une im­por­tance pri­mor­diale de vérifier si votre site Web s’affiche cor­rec­te­ment sur les dif­fé­rents supports (or­di­na­teurs, tablettes, smart­phones) et en fonction des dif­fé­rents na­vi­ga­teurs. Cela permet, en plus de répondre aux attentes des in­ter­nautes, d’être mieux référencé dans les résultats de recherche. Le Digital Guide IONOS a dressé une liste des meilleurs outils de test cross browser en fonction de vos besoins.

Cross­Brow­ser­Tes­ting

Le service en ligne Cross­Brow­ser­Tes­ting permet de tester la com­pa­ti­bi­lité de votre site avec 900 na­vi­ga­teurs Web dif­fé­rents et plus de 40 systèmes d’ex­ploi­ta­tion. Vous pouvez vérifier s’il n’y a pas de problèmes de com­pa­ti­bi­lité avec des éléments AJAX, Flash, HTML ou Ja­vaS­cript. A l’aide des copies d’écran qui ont été prises au­to­ma­ti­que­ment, vous gagnerez du temps en comparant la mise en page en fonction des dif­fé­rents na­vi­ga­teurs, peu importe que votre site soit en phase de dé­ve­lop­pe­ment ou déjà en ligne. De plus, ces tests sont effectués avec de vé­ri­tables machines physiques, et non des ému­la­teurs. Cross­Brow­ser­Tes­ting est dis­po­nible en version d’essai gratuite pendant une semaine.

Brow­serS­tack

L’outil en ligne Brow­serS­tack permet de vérifier si votre site Web est supporté par plus de 700 na­vi­ga­teurs. Du matériel est mis à la dis­po­si­tion des uti­li­sa­teurs pour la plupart des essais, dont le framework Selenium pour les tests au­to­ma­ti­sés ainsi que des ému­la­teurs pour les tests avec Android. L’accès à tous les serveurs est possible de manière immédiate et de manière illimitée pour effectuer les mises à jour de votre choix. Les scripts, très per­for­mants, re­cherchent les bugs en temps réel et les reportent. Brow­serS­tack fonc­tionne également lorsque le site Web n’a pas encore été mis en ligne. Néanmoins, vous aurez à effectuer les copies d’écran ma­nuel­le­ment pour analyser l’affichage de votre site, en 800 x 600 jusqu’à 2048 x 1536 pixels.

Spoon Browser Sandbox

Spoon Browser Sandbox est un autre service qui propose d’effectuer des tests avec des na­vi­ga­teurs vir­tua­li­sés. Cet outil ne fonc­tionne que sur les or­di­na­teurs per­son­nels. Si les res­sources de votre matériel in­for­ma­tique sont suf­fi­santes, vous pouvez vérifier si votre site est pris en charge par les na­vi­ga­teurs les plus po­pu­laires tels que Chrome, Firefox, Internet Explorer ou Safari, sans avoir à les installer sur votre or­di­na­teur. Grâce aux ému­la­teurs de na­vi­ga­teurs, peu importe le système d’ex­ploi­ta­tion que vous utilisez. La version gratuite de l’outil permet de gérer ces tests cross browser vir­tuel­le­ment mais avec un seul na­vi­ga­teur. Le pack payant d’un mois permet cependant d’effectuer les essais avec un nombre illimité de na­vi­ga­teurs.

Aller au menu principal