La compatibilité navigateur, un vrai sujet qui n’intéresse personne et qui peut pourtant coûter très cher !
Site web, mini-site ou landing page. La [sc_fs_multi_faq headline-0= »p » question-0= »Pourquoi tester la comptabilité navigateur ? » answer-0= »Chaque navigateur a des implantations de la norme W3C légèrement différente. Il est donc indispensable de tester avant la mise en ligne. » image-0= » » headline-1= »p » question-1= »Comment tester la compatibilité navigateur ? » answer-1= »Le mieux est d’utiliser des plateformes réelles. Vous pouvez également utiliser des plateformes virtualisées comme BrowserStack. » image-1= » » headline-2= »p » question-2= »Quels sont les principaux navigateurs du marché ? » answer-2= »Chrome a pris la tête du marché, suivit sur PC par Firefox et Microsoft Edge. » image-2= » » headline-3= »p » question-3= »Que doit-on tester particulièrement pour la comptabilité navigateur ? » answer-3= »Les formulaires sont souvent les éléments les plus exposés à la variation et nous devons donc les tester spécifiquement. » image-3= » » headline-4= »p » question-4= »Qui doit tester la comptabilité sur navigateur ? » answer-4= »Une partie du travail doit être faite au niveau de l’intégration par les intégrateurs front et une équipe d’assurance qualité est également indispensable à ce stade. » image-4= » » count= »5″ html= »false » css_class= » »]compatibilité navigateur (ou browser) est un vrai sujet trop souvent négligé en projet web. Cet excellent article sur MacGé nous incite à vous alerter : un moment ou un autre, vous devrez pourtant vous poser la question de la liste des navigateurs et le niveau de version supportés. Et la décision est loin d’être anecdotique. Trop lâche vous verrez vos coûts d’intégration et de tests exploser, trop serrée vous risquez de perdre du business. Voyons donc de plus près les chiffres du marché et 6 conseils incontournables.
Les chiffres du marché
Part de marché sur PC desktop
Part de marché sur mobile
Par de marché sur tablette
Et chez un client Eficiens, site grand public français à fort volume (>1M VU), IE 8, sorti il y a 10 ans, est encore utilisé par certains des utilisateurs de son site web !
Nos 6 conseils incontournables
1️⃣ Définir une liste de compatibilité : avant tout développement, vous devez établir la liste cible de vos navigateurs. Chez Eficiens, voici notre liste cible remise à jour tous les 3 mois. La base de travail est ainsi claire et admise entre l’agence et son client.
2️⃣ Prendre en compte les particularités de votre métier en trafic et en transfo : les parts de marché navigateur sont une première indication. Mais vous devez prendre en compte les spécificités de votre propre trafic (en visite et surtout en transformation) sur votre site. L’analyse de Google Analytics sera précieuse.
3️⃣ Eduquer votre direction générale et votre DSI : point fondamental et ignoré. Combien de fois avons-nous entendu. « Oui je sais personne n’utilise plus IE10 mais en interne notre PDG l’utilise. On doit le supporter ! » La réponse ? Non ! Si vous voulez être sérieux sur vos projets web, votre direction (générale et informatique) doivent l’être aussi. On ne développe pas pour des versions de navigateurs obsolètes.
4️⃣ Focaliser mobile. En 2018, la compatibilité navigateur mobile doit être parfaite. Google par exemple indexe maintenant d’abord la version mobile. Ce doit être votre priorité absolue.
Depuis quelques mois maintenant, le module Grid Layout est l’une des nouvelles spécifications CSS utilisée en développement web mobile. Point d’attention : cette fonctionnalité est valable à partir de la version IOS 10.3.
5️⃣ Avoir un lab de test réel en plus d’outils de virtualisation. Une grande plateforme de test existe : Browserstack. Un abonnement y est indispensable.
La plateforme XRespond est également intéressante pour tester les différents rendus mobiles/tablette en fonction du device et de sa taille d’écran.
6️⃣ Les formulaires sont à tester séparément et soigneusement. En effet des comportements très différents peuvent se produire, et pas seulement en fonction des devices mais également selon le navigateur.
Le développement d’un formulaire étant très spécifique, il faut bien garder en tête qu’en fonction du type de champ renseigné un IE11 n’aura pas forcément le même rendu visuel qu’un Chrome 67. Prenons l’exemple de l’assignation du type « téléphone » à un champ :
La vérification d’un formulaire doit vraiment se faire champ par champ d’un navigateur et d’une version à une autre, tellement de types existent comme on le voit ci-dessous (champs texte, téléphone, url et menu déroulant).
