Quand vous préparez un site, vous devez avoir à l'esprit que celui-ci sera affiché sur des écrans de différentes tailles. Il faut donc en tenir compte dès le début de votre projet lors de la préparation de la maquette graphique. La tâche se révèle de plus en plus compliquée de nos jours avec la multiplication des supports visuels tels que les smartphones, les tablettes, les ultrabooks, ...
On fait face à l'évolution de 2 tendances opposées, d'une part nous avons des écrans de plus en plus petits avec de petites résolutions allant jusqu'à 320x480 pour l'iPhone 3GS, d'autre part les écrans pour PC de bureau de plus en plus grands 22, 24, voire 30 pouces avec des résolutions allant jusqu'à 2560x1600!

Il est donc important de pouvoir tester votre réalisation sur ces différents formats mais il est difficile d'avoir accès à toutes ces configurations matérielles. Comment faire?
Heureusement, il existe des sites et des solutions logicielles qui vous permettront de tester l'affichage de votre site avec différentes résolutions.

Screenfly by Quirktools

quirktools-tablette-preview

Screenfly est un outil en ligne permettant de tester l'affichage d'un site déjà en ligne. Il est très simple d'utilisation. On peut choisir parmi 4 types d'écran : Desktop, tablette, mobile ou télévision. Pour chaque type d'écran, on a le choix d'une résolution correspondant à un produit du marché. Le site s'affiche dans une boite style fancybox.

quirktools-mobile

Ci-dessus, on peut voir le même site affiché dans 2 configurations différentes sur smartphone et sur tablette. C'est intéressant, notamment pour tester les sites "responsive", qui s'adaptent à la résolution de l'écran.

Testez vos propres sites en vous rendant sur le site quirktools. Il suffit juste d'entrer l'adresse URL de votre site dans le champ qui s'affiche sur la page.

Resolution Test pour Chrome

Il s'agit d'une extension pour le navigateur Chrome. Pour ceux qui ont Chrome, vous pouvez accéder à la page de téléchargement de l'extension Resolution Test. Lorsque vous activez cette extension, vous verrez apparaitre une icone à droite de la barre d'adresse.

resolution-test-preview

En cliquant sur le bouton Resolution test, une boite se déplie avec une liste de résolutions les plus fréquentes. Il suffit de cliquer sur une résolution cible pour que Chrome change de taille et s'adapte à la résolution choisie. Le principal inconvénient est la difficulté de tester les résolutions plus grandes que celle de son propre écran. Dans ce cas, Chrome va déborder de l'écran et il ne sera pas possible de naviguer dans la page car il n'y aura pas d'ascenceurs.

En savoir plus sur les résolutions d'écran

Parler de résolution d'écran est un abus de langage, on devrait plutôt parler de défiinition d'écran. Je vous invite à lire un article très intéressant sur le blog Le bloc-notes ; ergonomie & UX faisant le point sur le parc des résolutions actuelles et un autre sur la différence entre résolution et définition (toujours sur le même site).

J'espère que ces quelques infos pourront vous aider.