Tests cross browser : optimisation de sites inter-navigateurs

En tant que Web designer ou développeur, il est préférable de travailler sur des projets de sites Web qui peuvent être supportés par plusieurs navigateurs. 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 JavaScript) soient cross-browser, c’est-à-dire que tous les éléments soient programmés de manière à afficher le contenu de manière identique, quel que soit le navigateur utilisé.

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

Si vous renoncez à effectuer ces tests de compatibilité, il y a de fortes chances que votre site Web ne soit optimisé que pour une quantité restreinte de navigateurs. Certains navigateurs peuvent donc afficher le site web avec de nombreux bugs et erreurs d’affichage disgracieux. Les problèmes de compatibilité proviennent avant tout du fait que le navigateur interprète le code de manière individuelle et standardisée. En tant que Web designer, il arrive fréquemment que l’on perde de vue certains navigateurs lorsque l’on se concentre sur un en particulier au cours du développement d’un site Web. Cette étape cruciale ne portera pas ses fruits si les internautes voient votre contenu s’afficher de manière inappropriée parce que le site n’est pas supporté par leur navigateur.

L’optimisation d’un site Web pour plusieurs navigateurs joue également un rôle important en Responsive Web design. Dans ce cas de figure, les systèmes d’exploitation mobiles (à l’image d’Android par exemple) doivent également être pris en compte. Mais une optimisation cross-browser est souvent un travail fastidieux car la fonctionnalité des divers éléments doit souvent être vérifiée au cas par cas sur chaque navigateur.

Dans la pratique, les navigateurs suivants sont souvent problématiques : 

  • Internet Explorer dont des versions anté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 ordinateur ;
  • Safari avec lequel on ne peut pas effectuer de tests cross browser si on utilise Windows ou Linux en tant que système d’exploitation ;
  • Les navigateurs mobiles qui sont pour la plupart devenus obsolètes.

Comme la plupart des versions de navigateurs ne sont généralement pas à votre disposition ou ne sont pas installées et à portée de main, des outils de tests cross browser ont été développés pour remédier à ce problème. Ces outils disponibles sur le Web proposent souvent des packs comprenant différents navigateurs et les ressources matérielles dont vous pourriez avoir besoin pour effectuer les tests de compatibilité inter-navigateurs.

Comment fonctionnent les outils de tests cross browser ?

Les nombreux services disponibles vous permettent de tester la compatibilité avec différents navigateurs des éléments du site Web à l’aide de simulations. Néanmoins, les prix et les fonctionnalités de ces outils varient grandement.

A titre d’exemple : si vous souhaitez optimiser une application intranet pour une PME, les chances sont élevées pour que celle-ci soit compatible avec la plupart des navigateurs. Les outils de test cross browser vous seront utiles dans ce cas de figure pour installer les navigateurs nécessaires 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 compatibilité. Il est préférable pour cela d’utiliser les outils disponibles sur le Web qui comprennent une fonctionnalité de copie d’écran intégrée. Ces outils effectuent des copies d’écran de votre site Web avec les navigateurs de votre choix. En règle générale, vous constaterez que la plupart des bugs avec HTML et CSS seront affichés tandis que les applications Web de votre site seront ignorées par l’outil. Pour que vous puissiez vérifier le bon fonctionnement de votre site dans sa totalité, il existe des outils permettant un contrôle à distance sur différents navigateurs sans avoir à les installer et nécessitant peu de matériel.

Les meilleurs outils de test cross browser

Il est d’une importance primordiale de vérifier si votre site Web s’affiche correctement sur les différents supports (ordinateurs, tablettes, smartphones) et en fonction des différents navigateurs. Cela permet, en plus de répondre aux attentes des internautes, 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.

CrossBrowserTesting

Le service en ligne CrossBrowserTesting permet de tester la compatibilité de votre site avec 900 navigateurs Web différents et plus de 40 systèmes d’exploitation. Vous pouvez vérifier s’il n’y a pas de problèmes de compatibilité avec des éléments AJAX, Flash, HTML ou JavaScript. A l’aide des copies d’écran qui ont été prises automatiquement, vous gagnerez du temps en comparant la mise en page en fonction des différents navigateurs, peu importe que votre site soit en phase de développement ou déjà en ligne. De plus, ces tests sont effectués avec de véritables machines physiques, et non des émulateurs. CrossBrowserTesting est disponible en version d’essai gratuite pendant une semaine.

BrowserStack

L’outil en ligne BrowserStack permet de vérifier si votre site Web est supporté par plus de 700 navigateurs. Du matériel est mis à la disposition des utilisateurs pour la plupart des essais, dont le framework Selenium pour les tests automatisés ainsi que des émulateurs 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 performants, recherchent les bugs en temps réel et les reportent. BrowserStack fonctionne également lorsque le site Web n’a pas encore été mis en ligne. Néanmoins, vous aurez à effectuer les copies d’écran manuellement 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 navigateurs virtualisés. Cet outil ne fonctionne que sur les ordinateurs personnels. Si les ressources de votre matériel informatique sont suffisantes, vous pouvez vérifier si votre site est pris en charge par les navigateurs les plus populaires tels que Chrome, Firefox, Internet Explorer ou Safari, sans avoir à les installer sur votre ordinateur. Grâce aux émulateurs de navigateurs, peu importe le système d’exploitation que vous utilisez. La version gratuite de l’outil permet de gérer ces tests cross browser virtuellement mais avec un seul navigateur. Le pack payant d’un mois permet cependant d’effectuer les essais avec un nombre illimité de navigateurs.

Cet article vous a-t-il été utile ?