"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.
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…
Voir tous les articles de Eric
...
31 commentaires pour "Testez facilement le design de votre site dans différents navigateurs"
1
Rodney SANKINKA le 23 novembre 2007 à 17:40
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
Eric le 23 novembre 2007 à 17:48
"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
Benoit Sanier le 23 novembre 2007 à 17:52
Il y a scapture aussi, moins connu et du coup beaucoup plus rapide :
http://www.scapture.com/
4
JF le 23 novembre 2007 à 17:52
Rappelons également le plugin IE Tab pour Firefox qui permet, en un clic, de passer de Firefox à l’interface d’Internet Explorer.
Dispo sur le site de Mozilla : addons.mozilla.org/fr/fir…
5
Benoit Sanier le 23 novembre 2007 à 17:52
Ps: C’est spécial version linux
6
henri le 23 novembre 2007 à 17:54
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
7
Eric le 23 novembre 2007 à 18:19
J’ai encore bcp à apprendre en SEO apparemment
8
Rodney SANKINKA le 23 novembre 2007 à 18:48
Hé oui Eric, on dirait, mais t’en fais pas, ça arrive à tout le monde
9
Nyro le 23 novembre 2007 à 19:18
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...
10
Cam le 23 novembre 2007 à 19:26
+1 pour Bowsershots.
11
yOyO le 23 novembre 2007 à 19:30
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.
12
Drak le 23 novembre 2007 à 19:53
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.
13
Frédéric de Villamil le 23 novembre 2007 à 20:07
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.
14
Nyro le 23 novembre 2007 à 20:14
@Drak : regarde mon commentaire un peu plus haut, pour tester avec toutes les versions de IE
15
Mathias, un SéRéComien mulhousien le 23 novembre 2007 à 21:31
Un bon petit listing comme je les aime
Tout autre choses : la section "Derniers articles" de cette page affiche "***Flux Error***"
16
Tony le 23 novembre 2007 à 22:09
Merci pour tous ces liens !!! ca aide beaucoup !
corsesaison2006.blogspot….
17
serrum le 23 novembre 2007 à 22:26
Fuzz est mort?
18
Vincent V le 24 novembre 2007 à 08:45
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.)
19
Cédric le 24 novembre 2007 à 11:04
Génial l’idée du reset.css.
Va falloir que je teste ça.
20
dhoko le 24 novembre 2007 à 18:19
Merci, comme sa on peut voir ce que sa donne sur tout les navigateurs… Sur 21, j’en avais que 6…
21
Nyro le 24 novembre 2007 à 20:30
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 ?
22
Vincent V le 24 novembre 2007 à 23:18
@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.
23
Benoit Sanier le 25 novembre 2007 à 12:50
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)
24
Vincent V le 25 novembre 2007 à 13:09
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…
25
uado le 26 novembre 2007 à 14:19
Bonjour,
Comme Nyro, j’utilise aussi Multiple IE. Ca a l’air de fonctionner correctement : http://www.01net.com/telecharger...
Bonne journée !!
26
Goudie le 28 novembre 2007 à 18:51
T’aurai pas oublié un logo dans l’image ? Juste un ?
27
LuciferX le 4 août 2008 à 12:35
Salut à tous, juste pour compléter ce billet en proposant une alternative pour ceux qui utilisent Multiple IE.
Sachez qu’il existe également le logiciel IETester qui permet de calculer le rendu avec les versions 5.5, 6, 7 et 8 beta de Internet Explorer:
http://www.libellules.ch/dotcl.....rowsers/p1
28
danyhenri le 24 février 2009 à 11:09
Très pratique pour tester le design et le rendu de son site.
29
Quentin le 1 mars 2009 à 23:09
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 !
30
franck le 21 mai 2009 à 15:49
quentin -> epiphany
31
économiser le 8 mars 2010 à 16:42
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