Comment faire un site compatible pour tous les navigateurs ?

Par Benjamin SANCHEZle 16/07/2013

Aujourd'hui sur le Blog du Webdesign, découvrez différentes ressources pour faire des sites web compatibles sur tout les navigateurs

Le plus gros problème dans notre métier est sans aucun doute le parc navigateurs. Trop trop de versions de navigateurs, trop de moteurs différents à prendre en compte. Comment savoir si ce magnifique mot-clé qui résoudrait parfaitement notre problème est compatible IE8 ? Comment faire en sorte que l'affichage soit identique sour Chrome et Firefox ?

Pour essayer de répondre à ces questions et vous simplifier la vie, voila une petite liste d'outils et ressources.

Savoir ce que l'on peut utiliser sans risque

La première chose pour se simplifier la vie est bien cibler les navigateurs principalement utilisés par la cible. Avec cette information en main, il ne reste plus qu'à regarder sur un des deux sites suivant quels sont les outils dont l'on peut disposer.

HTML5please

Can I use

Modernizr est un peu plus radicale : Il permettra d'utiliser des conditions dans le CSS et le JS pour savoir si le navigateur du client supporte tel ou tel comportement (support des bords ronds, des ombres, ...)

Palier aux problèmes de navigateurs obsolètes

Si notre segment utilise fortement IE8, par exemple, doit-on réellement abandonner tout espoir de bord rond ? Heureusement, non. Il existe de nombreux outils pour pallier les manques de ses ancêtres. HTML5 shiv contient de nombreux "polyfills" qui ne se chargeront que si besoins, et qui permettront de fournir le support de la fonctionnalité demmandée.

Homogeneiser son developpement

Pour éviter de trop perdre de temps lors du développement, il est important d'utiliser divers outils pour simplement "oublier" la différence entre les navigateurs.

Prefix-free, par exemple, permet d'écrire toutes les règles CSS3 sans préfixe. Un petit JS détectera ensuite le navigateur, et ajoutera le bon préfixe coté client.

Compass, le framework SCSS, est encore plus radicale: Il permet de specifier des règles (ou d'en utiliser de nombreuses refaites) pour automatiser l'ajout de tous les préfixes, ou l'ajout de zoom: 1 sur tout les display: inline-block.

Enfin, il ne faut pas sous-estimer les problèmes que peut attirer le Javascript. En effet, ce dernier ne se comporte pas réellement de la même façon sur tous les navigateurs, ce qui peut introduire des problèmes allant de subtiles à dévastateurs (notez que la case "pas de problèmes" n'existe pas). Solution: utiliser un framework, qui prendra en compte ces différences pour nous.

Tester dans de bonnes conditions

Enfin, il est évidemment important de tester son projet sous le plus de configurations possible, ce qui comprend de nombreuses combinaisons OS Navigateur. Pour cela, pas de secrets, le mieux reste la VM.

Microsoft a d'ailleurs mis à notre disposition de nombreuses VMs pour tester leurs navigateurs sur la plupart des OS. Sympa

  • Partager l'article en 1 clic !

    Subtitle
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte

7Commentaires

  • Avatar_thumb
    Jérémy

    le 16/07/2013 | #1

    Qu'en est-il des performances et de la prise en compte des mobiles ? Le mieux ne serait pas de s'orienter vers une intégration dite "Mobile-First" ou de construire le site avec une démarche d'amélioration progressive ?

  • Avatar_thumb
    Benjamin SANCHEZ

    le 17/07/2013 | #2

    Alors, pour ce qui est de l'amelioration progressive (souvent avec modernizr), c'est effectivement le mieux a faire si on en a le budget.

    Pour ce qui est du Mobile-First, pour moi la question est plus complique que juste se dite "on fait un site, on le fait responsive et mobile first". Le mobile est une plateforme spécifique, avec des besoins spécifiques, qui peuvent passer par un site mobile, ou une application native.
    Donc disons que selon les besoins, il est possible que l'on ai besoin d'un site responsive mobile-first, et que dans ce cas la, il serait effectivement de passer par une inte Mobile-first et des outils mobile-first, comme Foundation.

  • Avatar_thumb
    Jérémy

    le 17/07/2013 | #3

    Benjamin, Merci d'avoir pris le temps de me répondre. Par rapport au titre de l'article, j'aurai du coup préférer voir une liste de "bonnes pratiques" avec l'utilisation des différents outils en illustration. Car du coup, si on utilise modernizr, il est inutile d'utiliser html5shiv (le choix se fait en fonction du projet), il aurait été intéressant de le mentionner. De même que pour -prefix-free, il est inutile si Compass est utilisé. Enfin, comme tu en as parlé il aurait été intéressant de citer Foundation qui peut s'avérer une bonne base de travail pour un site compatible navigateur desktop/mobile et facilement personnalisable avec l'utilisation de Sass et Compass.

  • Avatar_thumb
    Webzoo-Cms

    le 20/08/2013 | #4

    Merci pour vos liens utiles ! Je vais partager votre article avec mes clients pour testez leurs sites web. Merci encore et bonne continuation à votre site. Cordialement Webzoo-Cms

  • Avatar_thumb
    Richard SIMONET

    le 29/08/2013 | #5

    Bonjour, Firefox est un navigateur à part parce que la plupart des sites que je conçois sont nickelles sur Chrome, Safari, et Firefox est plus gourmand en détails CSS. Il faut piétiner et avancer lentement pour régler les problèmes. Merci pour ces infos forts utiles. Cordialement. Richard

  • Avatar_thumb
    mickael

    le 25/09/2013 | #6

    salut!! c'est juste demande comment visite les blog?

  • Avatar_thumb
    Nico

    le 02/03/2014 | #7

    Bonjour, j'ai écrit un article sur comment tester un site sur plusieurs navigateurs: http://www.blogintegrateur.fr/10-outils-pour-tester-la-compatibilite-de-votre-site/ C'est le top 10 des sites (payant et gratuit) proposant de tester la compatibilité de votre site internet. PS: certains de ces sites permettent également de tester les navigateurs mobiles! Bon code à tous!

Ecrire un commentaire

captcha

Ouvrir