Entre les différents navigateurs et différents devices, la compatibilité multi-supports d’un site est importante.
Voilà un sujet au combien important dans la réalisation d’un site, blog ou forum. A prendre en compte dès sa création, la compatibilité est un critère jouant sur l’accessibilité du projet aux visiteurs et repose sur la manière dont il est construit. Ce tutorial va expliquer ce qu’est la compatibilité, ce qu’elle comprend et les pistes pour rendre les sites compatibles.
I – Définition
Chaque utilisateur dispose de moyens différents pour naviguer sur internet. Tous n’ont pas les mêmes machines et les mêmes configurations. Rendre un site compatible consiste à le rendre accessible au plus grand nombre d’utilisateurs, quelques soient leur moyens de navigation.
On peut diviser la compatibilité en deux catégories que je nommerai la matérielle et la logicielle.
II – Compatibilité matérielle
Elle concerne tous les moyens techniques existants et en prendre en compte :
Système d’exploitation : Windows, Mac, Linux, bien qu’on y pense pas forcément, c’est un critère à prendre en compte. Exemple tout bête certains Mac n’ont pas de clic droit sur la souris. Si l’on met une fonctionnalité Javascript nécessitant un clic droit, certaines personnes ne pourront pas l’utiliser. Autre influence du système d’exploitation : les navigateurs. Sur un vieux PC, une version plus récente d’Internet Explorer ne pourra être installée, sur un ancien Mac, seul Safari est disponible.
Type de machine : PC de bureau, PC portable, tablette, smartphone, selon la machine la taille de l’écran est différente, mais surtout la résolution d’écran. Le site doit pouvoir s’afficher correctement sur tous. La résolution prise en compte de manière standard est de 1024 x 768 pixels. Un site compatible avec cette résolution sera affichable correctement sur tous les supports, même sur mobile. Pour ces derniers, la navigation restera moins facile, mais est tout à fait faisable. Cependant, la navigation sur mobile étant en forte expansion, une version mobile est désormais quasiment obligatoire. Mieux encore, penser le site en Responsive Design, faisant qu’il s’adapte automatiquement à la taille de l’écran. Une application mobile pour la version sur smartphone et éventuellement la version tablette peut être aussi envisagée selon le projet. Il faut également penser aux différents réglages de contraste et luminosité des écrans pour le choix des couleurs. Une teinte allant très bien sur un écran peut devenir trop foncée voire trop flashy sur d’autres. un détail très important si le projet se veut visuellement plus poussé, que ne le serait un Wikipédia par exemple.
III – Compatibilité logicielle
Elle concerne les logiciels utilisés pour naviguer sur le web, soit les navigateurs. Tous les utilisateurs n’utilisent pas les mêmes, quand en plus ils n’ont pas des versions différentes de ceux-ci. Rendre compatible son site sur le maximum d’entre eux est le cœur véritable du problème. La complexité vient du fait que chaque navigateur interprète le HTML, les CSS et parfois des fonctions Javascript à sa manière, ce qui créée des différences. Des navigateurs existants seuls les cinq principaux sont à avoir en tête :
- Edge
- Internet Explorer (IE)
- Google Chrome
- Mozilla Firefox
- Safari
- Opera
Lesquels privilégier ainsi que leurs versions, nous le verrons plus loin.
IV – Est-ce que mon site est compatible ?
Question bête quand on est au cœur du sujet mais il faut commencer par là. Comme on l’a dit, le site est compatible quand il s’affiche correctement sur tous les navigateurs et types d’interfaces. Cependant beaucoup de personnes font des erreurs sur l’estimation de la compatibilité de leur projet.
Le site est donc compatible quand :
- sa mise en page reste fonctionnelle d’une résolution d’écran à une autre et d’un navigateur à un autre.
- ses fonctionnalités (telles que des Javascript ou en HTML5) marchent dans toutes les configurations.
- les éléments intégrés (vidéos, citation de tweets, images Instagrams,…) s’affichent correctement dans toutes les configurations
Si certaines propriétés CSS3 ne sont pas lues et bien en fait…ce n’est pas forcément grave du moment qu’il ne s’agit pas de propriétés affectant la mise en page, nuisant profondément à l’expérience de l’utilisateur. Si un bord arrondi, une ombre ou autre chose de purement décoratif n’est pas pris en compte, la compatibilité reste là. Ce qui n’empêche pas de veiller à ce que le projet s’affiche de la même manière partout. L’ensemble des navigateurs prenant désormais quasiment toutes les propriétés CSS3, il devrait y avoir moins de problèmes à ce niveau là, qu’il y a encore quelques temps. Alors autant ne pas négliger les détails.
Là je sens que vous y êtes, vous commencez à comprendre. Oui, la compatibilité est avant tout liée à l’utilisation même du site et à sa navigation et non à son aspect dans ses petits détails mineurs.
V – Comment le rendre compatible
S’il y a des soucis entre les navigateurs il va falloir arranger tout cela. La première chose étant de faire un point sur quels navigateurs privilégier. De base il faut travailler en premier Internet Explorer, Chrome, Mozilla Firefox et Edge qui sont les plus utilisés. C’est un minimum et si l’on veut pousser les choses plus loin, il faut rajouter également Opera et Safari à la liste. Oui, IE est dans le lot, je sais vous ne l’aimez pas, comme beaucoup d’autres vous détestez cette bête noire des webdesigner. Pourtant IE reste le plus utilisé, certaines personnes n’utilisant que lui. Perdre des visiteurs et ne pas les fidéliser parce qu’on le délaisse peut être regrettable vous ne croyez pas ? Alors j’en entends certains dire « oui, bah ils n’ont qu’à changer ». Seulement cela ne marche pas dans ce sens là. C’est à vous à vous adapter à vos cibles et non l’inverse. Beaucoup de personnes n’auront pas envie de délaisser leur navigateur préféré, avec tous leurs favoris dessus, juste pour vous.
Maintenant se pose la question des versions des navigateurs. Raisonnons par rapport à leur méthode de mise à jour :
- Firefox et Chrome : elles se font automatiquement donc à priori tous les utilisateurs les ont à jour. Donc penchez-vous sur la dernière.
- Opera et Safari : ce n’est pas automatique mais ils les proposent, le premier à l’ouverture, le second via l’appli Apple Software Update. Donc à priori ils les ont à jour.
- IE et Edge : via le Windows update donc c’est un peu comme les deux précédents.
il faut se pencher en premier sur toutes les dernières versions puisqu’il y a fort à parier que les ¾ des visiteurs ayant une machine ayant moins de cinq ans voire sept, auront leurs navigateurs à jour. Cependant, il faut regarder quand même ce que le projet donne sur les anciennes versions, surtout avec celles d’IE pour ses version 7 et 8.
Donc ceci étant défini il est temps de mettre les mains dans le cambouis. La compatibilité repose essentiellement dans la manière donc le site a été construit, soit dans le code. Je ne vais pas faire un cours de HTML et CSS, ce n’est pas le propos de cet article, cependant je vais donner des pistes.
Plus le code sera léger, soit simple, plus cela augmente les chances de comptabilité. Cela rejette donc les propriétés CSS spécifiques aux navigateurs tels que les -moz-bidules pour Firefox, qui sont de plus en plus obsolètes. D’autant qu’avec les évolution de CSS, on peut désormais s’en passer (si si je vous jure). Référez-vous également aux normes officielles du W3C sur le HTML et les CSS. Si les navigateurs ne les respectent pas tous à la lettre, ils tendent à le faire. Donc en les respectant on réduit les différences d’interprétation du code d’un navigateur à l’autre. Tout ceci étant un bonus pour le référencement, puisque les moteurs de recherche aiment les codes légers et respectant les normes.
Malgré tout, il est fort probable qu’il y est des petites différences de marges, d’écarts, d’espacement d’un navigateur à l’autre. Pour pallier cela, il existe plusieurs solutions. La première consiste à réinitialiser les CSS au début de votre feuille style. En gros, on remet à zéro certaines balises (celles qui créent des différences), forçant ainsi tous les navigateurs à partir sur une base similaire. Une autre solution est d’utiliser un framework tel que Normalize.css. Il permet cette réinitialisation de toutes les propriétés CSS pour tous les navigateurs. Cependant, il oblige le site à charger une seconde feuille de style, donc je ne la conseillerais que pour les gros et complexes projets, quand juste réinitialiser les balises de base ne suffit pas.
Concernant le Javascript c’est plus compliqué. Parfois il y a plusieurs manière d’écrire une même fonction. La première chose à faire et d’essayer de trouver la manière passant sur tous les navigateurs (qui est généralement la plus simple) et généralement cela marche.
VI – Tester la compatibilité
Il faut vérifier désormais ce qui a été fait. Ce n’est pas une phase à négliger et à faire rapidement, mais méticuleusement. Il faut tout tester, tout vérifier, le mieux en faisant une checklist pour n’oublier aucune partie du projet ni aucune configuration. Cela passe donc par parcourir le site avec tous les navigateurs pour commencer. Ils sont tous gratuits donc cela ne vous coûtera qu’un peu d’espace disque. Ensuite le parcourir en agrandissant et réduisant la fenêtre pour voir ce que cela fait et sous différentes résolutions d’écran. Pour finir, trouver des bêtas testeurs dans son entourage pour avoir des retours sur plus de configurations différentes. Selon leur résolution d’écran, les réglages de luminosité et contraste, le rendu peut-être différent.
VII – L’affichage de la compatibilité
Le travail achevé, la grande question se pose (sisi ne le cachez pas vous allez vous la poser pour certains) si vous affichez ou non les navigateurs compatibles sur votre entête. La réponse normalement est non. Quand on est un batailleur chevronné (ou un acharné) ou simplement un codeur rigoureux, le site sera compatible sur tous les navigateurs. Inutile de le préciser alors que tout le monde peut venir. D’autant qu’afficher une compatibilité partielle peut avoir des allures de manque de qualité. A n’afficher donc que dans des cas majeurs, par exemples liés à des formulaires ou fonctionnalités avancées.
VIII – Les autres compatibilités
Si le sujet a été évoqué sous son aspect rendu pur, il existe d’autres compatibilités comme celle pour les déficients visuels. Elle demande un traitement particulier, pour satisfaire à la fois les mal-voyants et les non-voyants. Cependant elle ne sera pas évoquée ici car il s’agit d’un sujet à part entière puisqu’il fait le prévoir à la conception même du site demande de calculer le site. Rajouter des éléments par la suite ne donnera jamais un résultat valable.
Le sujet peut être également approfondit du côté des versions mobiles et tablettes. Si nous avons évoqué avant tout l’affichage, il faut également tenir compte du changement de manière de naviguer, passant de la souris au doigt. Ce qui entraîne des choses d’un device à l’autre à prendre en compte comme l’espacement entre les éléments du site. Cependant pour ce qui concerne ces version là d’un site, cela demande un sujet à part entière.