Tester un site sur plusieurs navigateurs : Browserlab et Shadow

| 2 commentaires

Pour un webdesigner, ou un développeur, s'assurer qu'un site est affiché correctement sur toutes les plateformes est le B-A.BA.
Partagez si vous aimez! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone

Si vous voulez valider l’affichage de votre site sur les navigateurs et systèmes d’exploitation du marché, sans avoir à tout télécharger, Adobe peut vous aider.


Alors attention, entendons nous bien, il n’est pas réellement possible de tester l’ensemble d’un site en simulant différents systèmes d’exploitation et navigateurs. La meilleure solution est de tout avoir chez soi (ou avoir assez d’amis) pour tester un rendu en réel.

Mais parfois, il peut être intéressant de vérifier le rendu visuel d’une page donnée dans différents navigateurs. Adobe a donc conçu Browserlab, qui devrait dans ce cas vous aider.

Adobe BrowserLab est un service en ligne garantissant l’affichage de votre contenu web tel que vous l’avez créé. Prévisualisez précisément vos pages web avec différents navigateurs et systèmes d’exploitation, testez les liens et utilisez des outils de diagnostic pour optimiser vos sites web.

Une fois connecté avec votre identifiant Adobe, vous accédez à la page de test.

Configurer les navigateurs souhaités

Si vous cliquez sur Navigateurs Disponibles, vous accédez à l’ensemble des navigateurs pris en charge par Browserlab.

Choix des navigateurs Adobe Browserlab

Choix des navigateurs dans Adobe Browserlab

Une fois votre ensemble configuré, vous pouvez tester votre site. Cliquez juste sur Tester.

Tester votre site sur les navigateurs choisis

Il vous suffit de renseigner l’URL à tester, et à attendre… Dans les options de rendu, vous pouvez choisir:

  • le nombre de secondes d’attente avant la capture d’écran (faut bien que tout soit chargé)
  • le type d’affichage
    • simple (un navigateur par écran)
    • double (écran partagé pour comparer deux navigateurs)
    • pelure d’oignon (superposition)

Et roule ma poule (ça prend un peu de temps).

browserlab test affichage site

En mode « Affichage double » … problème de CSS sur IE 6.0 :)

En mode « Pelure d’oignon », ça fait un peu mal à la tronche.

Seul point négatif… le rendu n’est pas ‘live’, c’est à dire qu’il ne s’agit que de captures d’écrans du site renseigné. En revanche, vous pouvez suivre le lien de votre choix en faisant CTRL+clic sur celui-ci, mais en gros le principe est de refaire une copie d’écran de la page de destination.

Quoi qu’il en soit, ceci est quand même bien utile et vous permet de ne pas avoir à acheter un Mac pour tester vos liens dessus. Je vous ai donc permis d’économiser quelques centaines d’euros. Heureux?

Et pour les mobiles ?

Bon, là, je vous en parle, mais je n’ai pas testé. Adobe a sorti Shadow, un outil permettant de visualiser des sites sur vos mobiles et tablettes.

Ce produit est à installer sur votre machine, votre navigateur, et votre mobile (et oui). L’idée est que vous pouvez ensuite naviguer simultanément sur votre ordinateur et sur votre mobile, et surtout, appliquer des améliorations au code sur votre ordinateur, tranquillement, pour les voit apparaitre en live sur le mobile.

Le mieux pour vous est de mater la vidéo en cliquant sur l’image ci-dessous, ça vous parlera tout de suite plus.

Vidéo de présentation de Adobe Shadow

Alors, bien ou quoi ?

Quelques livres sur le sujet
Partagez si vous aimez! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone

Auteur : Mathieu

Passionné et professionnel du web depuis 10 ans, je rédige Le Geek Pauvre depuis 2007. Le but de mon blog est de partager avec vous des outils gratuits, vous permettant de remplacer ou d'améliorer des logiciels ou services payants. En 2012, j'ai reçu la distinction de meilleur blog high-tech aux Golden Blog Awards.

2 Commentaires

  1. Merci pour l’info mais Browserlab a été arrété par Adobe en… mars 2013.
    http://blogs.adobe.com/browserlab/2013/03/13/browserlab-is-shutting-down-on-march-13-2013/

    D’ailleurs ton lien renvoi vers une page d’erreur.

  2. Tu as Browserstack qui fait très bien le boulot ;)

Laisser un commentaire

Champs Requis *.