Testez facilement le design de votre site dans différents navigateurs

"Le diable se cache dans les détails"…
Cette devise pourrait être celle des webdesigners quand on connait la difficulté que posent parfois les derniers réglages de mise en page d’un site si l’on veut qu’il soit parfaitement conforme et que son affichage soit identique quelque soit le navigateur.

Browsers

"Le diable se cache dans les détails"…
Cette devise pourrait être celle des webdesigners quand on connait la difficulté que posent parfois les derniers réglages de mise en page d’un site si l’on veut qu’il soit parfaitement conforme et que son affichage soit identique quelque soit le navigateur.

Browsers

On pourrait d’ailleurs appliquer la règle des 80-20 dans ce domaine : 80% du temps sont consacrés à peaufiner 20% des derniers détails d’une page.
Heureusement, quand on ne dispose pas d’une batterie d’ordinateurs et de navigateurs de tests, il existe des solutions alternatives pour tester ses pages dans la plupart des navigateurs sur la plupart des systèmes d’exploitation du marché.
J’avais déjà évoqué ces solutions, ici et ici, et je les ai abondamment utilisées.
J’en reparle qujourd’hui car d’une part un petit rappel sur ce genre d’outils ne me paraît pas inutile, et d’autre part parce-que les services mentionnés ont évolué :

  • Bowsershots est particulièrement puissant et exhaustif puisqu’il vous propose gratuitement de tester vos pages dans pas moins de 3 systèmes d’exploitation (Windows, mac, Linux) et 18 navigateurs ou version de navigateurs différents. Vous pouvez de plus choisir entre 6 tailles d’écran, 4 profondeurs de couleurs, 5 versions de Javascript (ou avec Javascript désactivé !), Java activé ou pas, et 3 versions de Flash, activé ou pas également ! Seule petite contrainte : vore requête est mise en file d’attente et vous devrez patienter entre une demi-heure et quelques heures pour obtenir vos captures d’écran.
  • BrowsrCamp quant à lui propose des prestations similaires mais exclusivement dédiées à Safari sur Apple, et le rendu est immédiat.
  • Enfin, IE Net Renderer vous propose de tester vos pages dans Internet Explorer 5.5, 6.0 et 7.0, avec une fonction originale de comparaison du rendu de plusieurs vesions en surimpression sur une même capture.

A ranger direct dans la trousse à outils, même si là ça sent le week-end…


31 commentaires

  1. Juste une qustion, pourquoi un grand blogguer comme toi fais de lien avec comme mot illustratif "ici" ? Est-ce bon pour les moteurs de recherche ?

    Sinon, tu vins de m’apprendre que je dois encore aller bidouiller mon template pour que mon blog s’affiche mieux sur Internet explorer (sur mozilla, il s’affiche mieux).

    Pour ce qui est des autres navigateurs, il faut avouer que j ne les ai jamais utilisé (même vu). Donc, ce n’est pas aujourd’hui que je vais tester.

  2. Mais cela ne permet pas de tester les réactions au clic si on fait un peu d’Ajax par exemple.
    C’est sûr que pour le visuel, ça peut gagner du temps (quoi que, en une heure, on a bien le temps de rebooter quelques fois pour changer d’OS…)
    pour les IE, j’utilise multiple IE mêlé avec Custom Button pour mon Firefox et je teste les sites sous Firefox bien sûr, IE7, IE6 et IE5.5 quelques fois, pour le fun…
    http://www.nyrodev.info/index.ph...

  3. Ces outils sont très utiles, mais bien entendu, le serveur de votre site doit être impérativement sur un serveur public, ce qui ne pose généralement aucun problème pour la majorité des cas. Par contre, pour un site de grande envergure, avec des outils de contrôle des sources (CVS) et des serveurs de tests privés, il n’y a pas manière à décrocher des captures d’écrans. Même chose si on tests sur Apache en localhost (ou autres trucs similaires).

    IETab est intéressant, quoiqu’il semble utiliser le moteur de IE qu’on a DÉJÀ dans son ordinateur. Donc, si nous avons IE7, impossible de tester en IE6 avec cette méthode. C’est un peu frustrant étant donnée que les deux versions du navigateur de Microsoft ont un comportement HTML/CSS très différent.

    Espéront une version "software" de tout ça un jour.

  4. J’utilise depuis des années browsercam (browsercam.com) qui présente l’avantage d’offrir les terminaux mobiles et de la pleine page, tous les navigateurs possibles et imaginables d’IE4 et Netscape 4.76 à aujourd’hui avec et sans Flash… À priori le meilleur service du genre.

    Évidemment c’est payant, mais on peut se créer un compte gratuit pour 24 heures et 200 captures, et elles sont immédiates.

  5. Personnellement j’utilise multi IE (cité précédement) et surtout j’utilise une petite feuille CSS reset.css qui remet à zéro tout les paramètres différents selon les navigateurs (marge, padding, liste, etc.)
    Depuis que j’utilise cette reset.css mes sites ont la même "tête" partout.

    Le reset ici > meyerweb.com/eric/thought…

    Vous la mettez sur le serveur puis vous rajoutez un petit @import: url(reset.css) et le tour est joué.

    Attention ça marche bien quand c’est utilisé pour un site tout neuf et dès le départ, c’est un peu plus complexe à mettre en oeuvre pour un site dont le CSS a été bidouillé pour permettre l’affiache multi-navigateur (hacks, margin conditionnel, etc.)

  6. Parce qu’en appliquant des attributs par le selecteur *, on les attribue aussi à tous les autres éléments de la page, y compris des formulaires, des inputs, des images, tout. Ce qui peut poser problème et créer des erreurs plus que ça n’est sensé en réparer. En règle générale on se contente d’attribuer margin:0; et padding:0; à tous les éléments, et pour le reste on fait dans le détails, car chaque élément est unique et lui attribuer une valeur générale n’est pas conseillé.

    Le reset d’Eric Meyer, n’est pas réellement utile pour les afficionados. Parce que d’expérience, ils savent comment réagissent IE, Safari, Firefox, ou Opéra : et de fait, aujourd’hui, les css contiennent des reset "naturels", non par pas réinitialisation des valeurs par défaut mais simplement par définition des valeurs finales. A quoi bon remettre à zéro des valeurs qu’on redéfinit plus tard dans la CSS. Ca ne fait qu’alourdir la page, avec des valeurs en doublons.

    (Je suis un peu anti reset depuis que certains prennent ça pour un critère de qualité, comme si ce fameux reset faisait partie des standards à utiliser)

  7. C’est intéressant de remettre certaines valeurs par défaut car, dans le cas du margin par exemple, mettre margin-left: 10px; n’aura pas du tout le même résultat sur IE, FF, etc.
    Si tu as placé un petit @import: url(reset.css) en tête de ta feuille de style ta marge de 10px sera effectivement une marge de 10px quel que soit le navigateur car la valeur inititiale sur laquelle elle s’applique sera la même quel que soit le navigateur.

    Après j’avais déjà des sites identiques sur tous les navigateurs avant d’utiliser la technique du reset, mais à quel prix…

Commenter

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Presse-Citron 2005 - 2018 | A propos | Contact | Site hébergé par Cognix Systems | Informations sur les cookies