Comment tester un site sur la majorité des navigateurs ?
- 27-09-2010
- Posté dans css . html
- Écrire un commentaire
En fonction des navigateurs, des versions de ceux-ci et du système d'exploitation, un site peu s'afficher différemment.
Donc avant publication de celui-ci, il convient de le tester dans la majorité des situations.
Pour ce faire, il faut :
1- avoir un Mac
Car un même navigateur s'affichera différemment suivant le système d'exploitation, et le Mac OS X n'est pas virtualisable à ma connaissance.
2- un logiciel de virtualisation pour tester sur Linux et Windows
Pour éviter d'avoir plusieurs ordinateurs.
Par exemple, Virtualbox est gratuit et fait très bien l'affaire.
3- avoir Windows Vista ou Seven
Pour pouvoir le virtualiser et installer internet explorer 9.
4- installer les principaux navigateurs avec les principales versions
Aujourd'hui, je teste sur :
- Firefox 3.0 et 3.6
- Chrome dernière version
- Safari dernière version
- Opera dernière version
- Internet explorer 7, 8 et 9
Et internet explorer 6 ?
J'ajoute le bandeau ie6nomore pour expliquer que, comme facebook et beaucoup d'autres, j'arrête le support de ce navigateur obsolète.
Pour tester IE 7 et 8, pas besoin de les installer : sur IE 9, il suffit d'aller dans les "outils de développement", et cliquer sur "Mode de navigateur". Par contre, dans certains cas, il peut y avoir des différences entre le mode de compatibilité et le vrai IE7 ou 8 intégré avec le système d'exploitation (cf l'article de jpvincent). Donc je conseille de faire un ultime test sur des machines virtuelles contenant le vrai IE7 et IE8 avant de publier le site.
5- tester sur les smartphones
- Android : installer le SDK d'Android (cf tutoriel d'alsacréation).
- Iphone : on peut installer sur Mac l'Iphone simulator de l'iOS SDK qui est le seul simulateur fidèle.
- Opera mobile : il y a le site Opera mini simulator, ou mieux, l'opera mobile emulator à installer sur l'ordinateur.
Et sans mac ou sans installer tous ces navigateurs ?
C'est quand même possible d'avoir des captures d'écran (mais ça ne permet pas de tester du code javascript par exemple) grâce à des sites internet :
A propos des tests sur tous les navigateurs, quelqu'un saurait pourquoi certains (comme Chrome ou Safari) coupent les tableaux trop larges par rapport à l'écran alors que les autres (Firefox, IE) les affichent bien comme il faut ? Ce serait bien qu'ils se mettent d'accord :-/
Un exemple ?
salut
d'accord avec toi sur la philosophie : la seule manière d'avoir un environnement de test correct, c'est d'avoir des machines virtuelles pour avoir plusieurs OS et des versions natives des navigateurs.
Par contre je rajouterais qu'il ne faut surtout pas utiliser le mode de compatibilité IE7 dans IE8, car il est trompeur et ne reflète pas exactement le moteur d'IE7, pour moi ça serait donc une machine virtuelle supplémentaire à installer (sur XP par exemple).
J'ai listé tout un tas de problèmes chez mon presta en une seule année lorsqu'on n'utilise pas les machines virtuelles : http://braincracking.org/2010/11/24/tester-fiablement-ses-navigateurs/
tu testes aussi sur les navigateurs majeurs à venir comme IE9 et FF4 ?
Salut JP,
J'ai lu ton très bon article sur les problèmes du mode de compatibilité. Effectivement c'est pas encore bien au point, mais au fur et à mesure des nouvelles bétas d'IE9 ils s'améliorent. Concrètement, pour faire tourner plusieurs machines virtuelles en même temps (3 en l'occurrence pour IE7, 8 et 9) il faut avoir un matériel couteux.
Donc je trouve que le mode de compatibilité est quand même bien pratique et d'après mes tests pas si mauvais dans la plupart des cas. Après, oui, je suis d'accord avec toi, au test final du site il faut avoir 3 windows sur 3 machines différentes.
Je met à jour mon article avec un lien vers le tien pour préciser les problèmes que tu as rencontré avec les modes de compatibilité.
Oui, je teste toujours sur IE9 puisque c'est aussi cette version qui me permet de tester avec le mode de compatibilité les 2 autres versions. Quand à FF4, t'as raison, je devrais, mais c'est déjà tellement lourd de tester sur tous ces navigateurs que je pars du principe qu'un site bien programmé qui marche avec FF3.6 marchera aussi bien sur FF4. Idem pour les futures versions de chrome et safari. Mais tu as raison, ça aiderai les éditeurs à débugger.
pour FF4, je le teste, mais c'est plus parce que je teste les fonctionalités HTML5, donc effectivement on peut peut être s'en passer. Cela dit, ils ont changé le parser HTML, ce qui induit des bugs pas encore découverts, et comme c'est (enfin) un navigateur majeur, je préconise de le tester à l'occasion.
Concernant les tests sur 3 machines : il faut les posséder, mais il est impossible d'exécuter 3 OS en parallèle. Ma méthode consiste à toujours avoir le browser minimum (IE6 XP) d'ouvert et de développer avec mon firefox et toute sa panoplie de plugins.
Aux moments clés (début de projet, choix technologiques, pas certains de certains effets, fin de projet), je lance mes teste sur tous les navigateurs. Un peu pénible aussi, mais ça reste assez exceptionnel
Oui, c'est pas mal aussi comme méthode. Je rajouterai juste que j'incite à bannir IE6 comme l'ont déjà fait pas mal de site à forte notoriété avec un dispositif du type ie6nomore
OSX est virtualisable sur PC !!
http://bit.ly/ihsdFM
OK, merci pour le lien. J'avais testé il y a quelques années, ça fonctionnait mais c'était tellement lent que c'était complètement inutilisable. J'ai pas testé ta solution, donc je peux pas dire. Par contre en pro c'est pas possible car mac n'autorise pas que son système d'exploitation soit virtualisé…
Bonjour,
Je suis sur mac et impossible d'utiliser la solution.
Est-ce que qq'1 a des infos à ce sujet?
Merci
Valérie
[hamac->http://www.boutique-tele.fr/hamac,fr,3,21.cfm
Si, virtualbox fonctionne sur mac pour virtualiser windows