A noter

C'est le 830e jour depuis le début de cette aventure !

Visualiser le rendu d’un site sur plusieurs navigateurs

Publié le 21 oct 08 à 07:37 | Catégorie : Développement Web | 15 commentaires

Malheureusement, même si vous développez un site Internet en respectant scrupuleusement les standards web, il vous faudra le tester avec différents navigateurs pour vous assurer que le rendu est bien identique à chaque fois. Car ces logiciels ne respectent pas forcément ces standards !

Bien sûr, il n’est pas nécessaire de supporter tous les navigateurs du marché. Il faut en revanche s’intéresser aux plus répandus, à savoir Internet Explorer, Firefox et Safari. Le navigateur de Microsoft est encore très largement majoritaire, mais cette répartition peut toutefois se révéler différente sur votre site suivant le public visé.

Et même au sein d’une même famille, il faut prendre en compte des différences entre certaines versions. Bien évidemment, le navigateur le plus décrié est probablement Internet Explorer 6. Heureusement, le nombre d’utilisateurs tend à décroître mais reste malgré tout encore significatif.

En ce qui me concerne, je développe sur un environnement Windows et je teste ensuite mes sites sur ces navigateurs :

Je n’ai pas encore intégré Firefox 3.0 à ma batterie de tests. En revanche, j’avais pris l’habitude de tester le rendu sur Opera et c’est pour cette raison qu’il apparaît ici (même si ce navigateur n’a jamais vraiment décollé, ce qui est bien dommage). Peut-être faudrait-il le remplacer par Chrome, qui semble avoir le même nombre d’utilisateurs ?

Concernant Internet Explorer, je vous recommande fortement l’utilisation d’IETester. Il s’agit d’un logiciel gratuit qui encapsule plusieurs versions du navigateur de Microsoft : 5.5, 6.0, 7.0 et 8.0 (beta). Il est facile à installer et est parfaitement stable, même si il reste encore quelques bugs :

IETester

Comme je n’ai pas encore de Mac (ça viendra sûrement un jour), j’utilise Safari sur Windows en espérant que le rendu sera identique. Mais heureusement, il existe des services en ligne pour visualiser le rendu sur n’importe quel navigateur. Browsershots est certainement le plus complet, puisqu’il supporte de nombreux logiciels et plateformes :

Browsershots

Browsrcamp ne propose en revanche que Safari sur Mac OS X, mais reste rapide et simple d’utilisation :

Browsrcamp

Il y a également Scapture qui ne produit des captures d’écran que sur Linux :

Scapture

Et IE NetRenderer qui ne s’intéresse qu’aux navigateurs de Microsoft :

IE NetRenderer

Du côté des outils payant, il y a BrowserCam que je n’ai pas testé et Litmus qui me semble très bien réalisé. Ce dernier propose un passe pour la journée à 24 dollars qui intègre en plus la possibilité de tester le rendu sur des clients de messageries (mais là, c’est encore une autre histoire) :

Litmus

Mais je suppose qu’il est quand même préférable d’avoir à sa disposition plusieurs machines avec des configurations différentes afin d’être plus réactif et d’éviter les allers-retours avec ces services. Du coup, il est peut-être intéressant de faire appel à la virtualisation pour monter des environnements différents sur un seul ordinateur. D’ailleurs, comment procédez-vous pour tester le rendu de vos sites Internet ?

A lire également

Vous pouvez continuer votre lecture sur des sujets similaires en consultant les articles suivants :

Les visiteurs qui ont vu cette page ont consulté ensuite :

A savoir

La rédaction de cet article a nécessité 1 heure et 34 minutes. Si vous le souhaitez, vous pouvez être prévenu de la parution de nouveaux articles en vous abonnant par RSS ou par email.

15 commentaires à propos de “Visualiser le rendu d’un site sur plusieurs navigateurs” :

  1. Bonjour,

    Personnellement, je procède à peu près cmme toi, à cela près que je teste également sur Firefox 3 (qui est soit dit en passant facilement installable en parallèle avec la version 2).

    Pour la partia Mac, c’est par un échange de bon procédé avec un ami graphiste qui me fait des copies d’écran sous Mac.

    J’ai également un vieux portable que j’ai passé sous linux afin de tester différents navigateurs.

    Damien le 21 octobre 2008 à 08:10 (#1)

  2. j’ai eu un pb de mise en plage la semaine dernière avec une copine qui à un mac, un vrai et mon Safari sur PC.
    Donc à prendre avec des pincettes pour la validation.

    phil le 21 octobre 2008 à 08:31 (#2)

  3. > Phil
    Oui, en effet, les rendus sur Safari Win et Safari Mac ne sont pas les mêmes !

    Damien le 21 octobre 2008 à 08:45 (#3)

  4. Salut,

    Le plus simple est encore d’avoir un… Mac !
    Moi je développe sur Mac, et via bootcamp je lance Windows ou Linux ce qui me permet de couvrir l’intégralité du marché des navigateurs…

    De façon générale il est facile je trouve d’uniformiser les CSS et le javascript entre firefox et Safari. Par contre c’est une autre affaire avec IE. C’est pourquoi je développe sur firefox (ce qui me garanti à peu changement près une compatibilité avec la plupart des navigateurs) puis je fais un transfère vers IE, quitte souvent à avoir du code spécifique. J’utilise aussi IETester qui est indispensable, les comportements entre différentes version d’IE pouvant être différents !

    bonne journée

    r

    r le 21 octobre 2008 à 09:55 (#4)

  5. Je teste sur IE7 / Firefox 3 ( j’aurais du rester sur la version 2 ) et Opéra ( que j’adore aussi ).

    Pour info mes stats sur un site qui a 2000 visites / jour en moyenne et qui s’adresse au “grand public” :
    MSIE 78.1 % ( IE 7 : 43.7% IE 6 : 32.1% … )
    Firefox 19.8 %
    Opera 0.9 %
    Safari 0.6 %
    Mozilla 0.1 %
    Le reste ce sont des PDA et des trucs exotiques.
    Surprise ; Google Chrome n’y est pas !! ( comme quoi il y a un gouffre entre l’univers des Geeks, les “journaleux” et la réalité du terrain ).
    J’utilise la virtualisation, pour d’autres besoin, avec Virtual PC ( mais on m’a dit beaucoup de bien de VirtualBox ).
    Pour ma part je pense qu’il faut tester suffisamment mais qu’il ne faut pas que celà prenne trop de temps car sinon celà se fera au détriment du reste.
    Il y a un compromis à trouver ( quitte à accepter 0.2% de “dégats collatéraux” ).
    En résumé je pense qu’il faut tester sur IE / Firefox et sur un PDA ( pour l’avenir ) ou alors il faut payer une boite pour aller + loin et gagner du temps !

    Domi le 21 octobre 2008 à 09:55 (#5)

  6. Salut,

    Je laisse mon premier commentaire mais je te lis depuis quelques semaines (le temps de remonter les archives :D - je suis un peu dans la meme situation que toi.)

    Pour revenir à l’article, moi je me concentre plus sur les moteurs de rendus des navigateurs:
    - Gecko
    - Webkit
    - IE (microsoft’s sauce)

    Théoriquement (il faudrait vérifier), Safari Win + Chrome Win ont les mêmes rendus, comme Safari Mac + Chrome Mac (Webkit). Idem pour les Firefox, sauf que le 3 (sous mac) mets en place les items de formulaires MacStyle (un peu de padding en plus que la normale)

    Opéra c’est Gecko non ? -sais pas-

    Pour ma part j’arrête de supporter IE6. Je mettrai un message à l’entrée du site ou autre mais il faut arrêter de supporter des vieilleries !! Si personne ne s’y met dans 30 ans les gens seront encore sous IE6: c’est mal pour eux, hyper mauvais pour nous et y’a dejà presque deux versions de retard :(

    Julien le 21 octobre 2008 à 11:05 (#6)

  7. Si y’a vraiment un navigateur qui fait #### c’est IE6 !! (qui est très utilisé … au grand malheur de bcp de développeur j’imagine .. :))

    Et s’il y a des bugs c’est bien sur IE6 .. (surtout quand on va mettre les doigts dans de l’ajax :s)

    Pour Google Chrome je préfère ne pas m’en occuper pour le moment. D’une part, il est très peu utilisé et d’autre part il interprète mal pleins d’éléments. J’avais essayé de l’utiliser au quotidien mais c’était pas vraiment ça .. (par contre pour un internaute “normal” il est très plaisant)

    François le 21 octobre 2008 à 15:13 (#7)

  8. “il est quand même préférable d’avoir à sa disposition plusieurs machines avec des configurations différentes” => pas nécessairement, tu peux installer des virtual machine sur un seul ordinateur.

    katsoura le 21 octobre 2008 à 20:12 (#8)

  9. Pas tout à fait Katsoura. Il me semble (à ma connaissance) que tu ne peux pas monter un environnement Mac OS sur une machine virtuelle. Alors que l’inverse est vrai, comme le souligne R (il faut donc posséder un Mac).

    Stéphane le 22 octobre 2008 à 07:34 (#9)

  10. Pour ma part, j’ai Firefox 3, IE7, Opera 9, Safari pour Windows et Chrome installé sur mon PC. J’ai mis la version portable de Firefox 2. J’ai une machine virtuelle Windows XP pour IE6 et surprise ;), j’ai une machine virtuelle MAC OS qui tourne sous Windows. C’est pas simple, mais c’est possible !

    Thomas le 26 octobre 2008 à 15:52 (#10)

  11. Personne ne connait multiple ie : http://tredosoft.com/Multiple_IE ?
    9a marche pas mal, le seul défaut étant que son installation désactive les scripts empêchant ie de demander la confirmation de chargement de flash.
    Mais c’est très pratique : on travaille sa page sur firefox et on peut en un CTRL-TAB passer dun navigateur à l’autre.
    Je ne suis pas très convaincu par ie tester qui m’a plus ralenti qu’autre chose je dois dire.

    Mael le 27 octobre 2008 à 19:46 (#11)

  12. Il y a aussi l’excellent package de Labs XooFoo qui contient : Firefox 1.5.0.7, Firefox 2.0.0.17, Firefox 3.0.3, Firefox 3.1 bêta 2 (updated), Internet Explorer 5.5 sp2, Internet Explorer 6, Internet Explorer 7, Netscape 7, Netscape 9.0.0.6, Opera 8.54, Opera 9.27, Opera 9.62 (updated), Safari 3.1.2, Chrome Google 0.2.149.30, Maxthon 2.1.4

    Je crois que c’est suffisant non ;=) ? Il est en téléchargement ici :
    http://labs.xoofoo.org/modules.....storyid=76

    Bon tests !
    Au passage il y a souvent des différences entre Windows et Linux même avec une même version de Firefox, à surveiller aussi bien que l’on ne soit que sur une configuration marginale (encore que…)

    Philippe le 10 novembre 2008 à 14:46 (#12)

  13. Super Xoofoo !
    Merci Philippe !

    Mael le 10 novembre 2008 à 14:54 (#13)

  14. C’est la totale Philippe ;). Au passage, j’ai discuté cette semaine avec un des principaux contributeurs de webkit à Paris Web 2008 et il m’a bien confirmé qu’il y existe des différences de rendu et de comportement entre Safari pour Windows et pour Mac. Donc il faut que j’achète un Mac :).

    Stéphane le 16 novembre 2008 à 20:26 (#14)

  15. Cela tient souvent aux polices de caractères qui ne sont pas les mêmes selon les plateforme.

    Pas de police MS true Font sous Linux par défaut. Donc ce sont des polices approchantes avec un rendu qui peu être mis à mal. J’imagine qu’avec un Mac c’est le même problème.

    Pour utiliser Ubuntu + FF 3 au quotidien je n’ai quasiment jamais de soucis. Il ne faut donc pas non plus trop chercher la petite bête. Le respect des normes doit déjà être un bon pré requis.

    Philippe le 16 novembre 2008 à 21:47 (#15)

Ajouter un commentaire

Les informations obligatoires sont indiquées par une étoile rouge *.


Articles Récents

Les derniers articles publiés

A Propos

Pas facile de franchir le pas et d'abandonner un poste de consultant. Mais depuis octobre 2006, je me consacre entièrement à la conception d'un nouveau service Internet et au montage d'une société.

Ce blog raconte le parcours d'un entrepreneur dans la net économie et aborde de nombreux aspects pratiques, juridiques et financiers liés au développement d'un business sur Internet.

Lire la suite…