UX & créa
Compatibilité navigateur. 6 conseils indispensables
5 (100%) 1 vote[s]

07 juillet 2018
3minutes

Compatibilité navigateur. 6 conseils indispensables

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 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.

compatibilité navigateur eficiens

 

Les chiffres du marché

Part de marché sur PC desktop

mobile market share desktop alt

Part de marché sur mobile

market share mobile alt

Par de marché sur tablette

parts-de-marche-navigateurs-tablette alt

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.

compatibilite navigateur

 


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.

directrice informatique alt

 


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.

lab eficiens

 


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).

 

Nouveau call-to-action

 

Vous avez aimé ? Notez-nous !
Compatibilité navigateur. 6 conseils indispensables
5 (100%) 1 vote[s]