Passer au contenu

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…

📍 Pour ne manquer aucune actualité de Presse-citron, suivez-nous sur Google Actualités et WhatsApp.

Opera One - Navigateur web boosté à l’IA
Opera One - Navigateur web boosté à l’IA
Par : Opera
31 commentaires
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. "Juste une qustion, pourquoi un grand blogguer comme toi fais de lien avec comme mot illustratif "ici" ?"
    Euh, je ne comprends pas la question. Tu voudrais que je mette quoi ?

  3. en fait ce qu’il veut dire c’est que coller le lien sur l’anchor "ici" n’apporte rien au site vis à vis des moteurs de recherche. Mais je fais pareil que toi Eric…

    Dis moi il y a du monde à 17h52 sur ton blog 😉

  4. 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...

  5. Merci pour ces adresses qui s’avere tres pratiques pour tester le design de son site sous different OS/Browser.
    Je vient de "finir" la refonte de mon photoblog (yoanblog.free.fr), et donc ton article mais d’une grande aide pour tester le rendu!

    Merci.

  6. 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.

  7. 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.

  8. Un bon petit listing comme je les aime 🙂

    Tout autre choses : la section "Derniers articles" de cette page affiche "***Flux Error***"

  9. 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.)

  10. J’avais déjà vu l’idée du reset.
    Mais au lieu de lister tous les éléments un à un dans les premières lignes, pourquoi ne pas utiliser directement le joker * qui affectera absolument tous les éléments, quels qu’ils soient ?

  11. @Nyro > Bonne question j’avoue avoir appliqué bêtement la méthode.

    J’ai testé, ça a marché, je garde…

    Mais j’imagine qu’il doit y avoir une raison. L’effet du reset sur d’autre balise doit avoir un effet négatif.

  12. 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)

  13. 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…

  14. Petite question à la c*n:

    Quel est le navigateur qui est en 6ème position dans l’image avec les logos de browsers ?

    D’avance merci !

  15. excellent tous ces sites pour tester les navigateurs! c’est un truc qui permet d’économiser pas mal de temps surtout pour les webmasters, merci pour l’astuce

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *