Création de Sites Web Compatibles Entre Navigateurs
Publié dans Performance par WP Engine
Dernière mise à jour le 30 mai, 2019
Même si la plupart des gens utilisent un seul navigateur, vous disposez de dizaines d’options pour les appareils de bureau et mobiles. Idéalement, les sites Web s’afficheraient parfaitement quel que soit le navigateur que vous utilisiez. Cependant, ce n’est pas toujours le cas, c’est là que les tests inter-navigateurs interviennent.
Grâce à des tests approfondis sur plusieurs navigateurs, vous pouvez vous assurer que votre site Web ressemble et se comporte parfaitement dans toutes les options populaires. De cette façon, vos visiteurs auront une expérience tout aussi formidable, qu’ils utilisent Chrome, Firefox, Opera ou des options moins connues telles que SeaMonkey.
Dans cet article, nous allons parler un peu plus de l’importance des tests inter-navigateurs. Ensuite, nous passerons en revue quelques étapes pour vous aider à créer un site Web compatible avec plusieurs navigateurs. Mettons-nous au travail!
Pourquoi La Compatibilité Entre Navigateurs Est-Elle Importante ?
La plupart des gens utilisent des navigateurs bien connus, tels que Google Chrome, Safari, Firefox et Opera. Cependant, il y a beaucoup plus d’options disponibles que vous ne l’imaginez. C’est bon pour le consommateur, mais le problème pour vous est que chaque navigateur est construit différemment. Cela signifie que votre site Web peut fonctionner parfaitement sur Chrome, mais rencontrer des problèmes sur Firefox (pour ne donner qu’un exemple).
Selon notre expérience, la plupart des erreurs que vous verrez dans un navigateur mais pas dans un autre sont des problèmes relativement petits. Un élément spécifique de votre site peut ne pas le regarder, ou une fonctionnalité particulière peut ne pas fonctionner correctement. Bien que ces problèmes puissent être mineurs, ils doivent être résolus si vous souhaitez offrir la même expérience à tous les visiteurs de votre site.
Idéalement, vous voudrez concevoir votre site Web pour qu’il soit compatible avec tous les navigateurs à partir de zéro. De cette façon, vous ne risquez pas d’aliéner les utilisateurs d’un navigateur particulier. Dans les prochaines sections, nous vous montrerons comment faire cela.
Comment créer un site Web compatible avec plusieurs navigateurs
L’idée de créer un site Web compatible avec plusieurs navigateurs peut sembler décourageante. Cependant, quelques étapes simples peuvent vous aider à vous assurer que votre site fonctionne parfaitement sur la plupart des navigateurs. Parlons de ce que c’est!
Étape 1: Définissez un « Doctype » pour vos fichiers HTML
Lorsqu’un navigateur charge votre site Web, il doit déterminer la version de HTML que vous utilisez. Ceci est important, car différentes versions de HTML contiennent des règles différentes.
Un ‘doctype’ est une instruction qui indique aux navigateurs: « Hé, c’est la version de HTML que nous allons utiliser! »De cette façon, les navigateurs n’auront pas à faire de suppositions, ce qui peut diminuer le nombre d’erreurs que vos utilisateurs rencontreront.
Heureusement, cette étape est remarquablement simple. Tout ce que vous avez à faire est d’ajouter l’extrait de code suivant à vos documents HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Comme vous le remarquerez, cet extrait concerne la version 4.01 de HTML. Si vous souhaitez utiliser HTML5 à la place, vous pouvez utiliser ce code:
<!DOCTYPE html>
Le problème est que certains navigateurs ne fonctionnent toujours pas bien avec HTML5. Malgré ses nombreuses améliorations, son utilisation peut affecter la compatibilité entre navigateurs, vous devrez donc peser ce fait à côté de ses avantages.
Étape 2: Utilisez les règles de réinitialisation CSS
Habituellement, CSS est le principal responsable des erreurs de compatibilité du navigateur. En effet, chaque navigateur a son propre ensemble de règles CSS. Pour le dire autrement, le CSS de votre site peut s’afficher différemment selon le navigateur utilisé par vos visiteurs.
Une façon de résoudre ce problème consiste à utiliser une « réinitialisation CSS ». Ce sont des ensembles de règles que vous pouvez ajouter à votre site Web, qui définissent une ligne de base pour le fonctionnement du CSS sur l’ensemble des navigateurs.
Il existe plusieurs options pour les réinitialisations CSS, mais l’un de nos favoris s’appelle Normalize.css, en raison de la façon dont il est complet:
Vous pouvez télécharger le normaliser.fichier css de sa bibliothèque GitHub et utilisez-le comme point de départ pour le CSS de votre site Web. Cela vous aidera à maximiser la compatibilité entre navigateurs sur votre site.
Étape 3: Utilisez des bibliothèques et des frameworks compatibles entre navigateurs
Les bibliothèques JavaScript et les frameworks larges tels que Foundation et Bootstrap sont incroyablement populaires de nos jours. Si vous allez utiliser de tels éléments pour créer votre site Web, vous pouvez vous épargner beaucoup de maux de tête en utilisant des options compatibles avec plusieurs navigateurs.
Certaines bibliothèques et frameworks ont été développés à partir de zéro pour fonctionner avec autant de navigateurs que possible. De manière générale, les frameworks les plus populaires – y compris les deux que nous venons de mentionner – sont conçus pour être compatibles avec autant de navigateurs que possible.
Juste pour être sûr, cependant, assurez-vous de vérifier la documentation de toute bibliothèque ou framework que vous avez l’intention d’utiliser. Dans la plupart des cas, vous trouverez assez facilement des informations sur la compatibilité entre navigateurs. Par exemple, voici la page de compatibilité de Foundation à partir de sa documentation:
Un peu de recherche vous aidera à offrir une expérience incroyable à tous vos visiteurs, pas seulement à ceux qui utilisent un navigateur particulier.
Tests inter-navigateurs
Même si vous avez fait un effort pour créer un site Web compatible inter-navigateurs, il est toujours judicieux de vérifier et de voir si tout fonctionne comme il se doit. Ce processus est relativement simple – tout ce que vous avez à faire est de charger votre site Web à l’aide de plusieurs navigateurs et de vérifier les erreurs.
Le problème est qu’il existe de nombreux navigateurs. Pour couvrir vos bases, nous vous recommandons de vous concentrer sur les cinq premières options en fonction de la part de marché, qui sont:
- Google Chrome
- Safari
- Firefox
- UC Browser
- Opera
Vous remarquerez peut-être que Microsoft Edge n’a pas fait partie de la liste. Sa part de marché est plutôt faible de nos jours, mais il est toujours bon de s’assurer que votre site fonctionne également avec.
Bien sûr, l’installation de cinq ou six navigateurs différents sur votre ordinateur peut être pénible. C’est pourquoi de nombreux services vous permettent d’effectuer des tests inter-navigateurs en ligne. Cela simplifie grandement le processus, et les frais impliqués sont généralement mineurs.
Ne sacrifiez pas Votre Expérience numérique
Tous les visiteurs de votre site Web n’utiliseront pas le même navigateur. Cela signifie que si vous voulez vous assurer que chaque utilisateur profite de votre site Web, vous devrez effectuer des tests inter-navigateurs.
Gardez cependant à l’esprit que même si votre site fonctionne parfaitement sur tous les navigateurs, vous devez toujours utiliser un hébergeur de qualité supérieure si vous souhaitez offrir la meilleure expérience numérique possible. Avec WP Engine, vous obtenez des performances incroyables et un accès à un support de niveau expert, alors consultez nos plans!