Testez facilement la responsivité de votre site avec Viewport Resizer

Publié le 05 novembre 2012 par Digitives @digitives
Viewport Resizer est un bookmarklet gratuit conçu par un développeur front-end allemand, Malte Wassermann, dans le but de tester la responsivité de n'importe quel site internet, c'est-à-dire l'adaptation automatique de son affichage à différentes résolutions d'écrans. Avec son design ergonomique et discret qui s'insère élégamment dans la fenêtre du navigateur, c'est un outil particulièrement pratique pour les professionnels du web qui sont aujourd'hui très fréquemment appelés à créer des sites au design responsif.

Le bookmarklet est proposé en 3 versions de base :
  • La version standard qui propose 5 tailles d'écran (320x480, 320x568 pour l'iPhone 5, 600x800, 768x1024, 1280x800)
  • La version avancée et ses 8 tailles d'écran (dont une taille mobile de 240x240)
  • La version Apple (iPhone, iPod Touch, iPhone 5, iPad)

Viewport Resizer vous offre non seulement la possibilité de simuler le test de votre site sur une grande variété de smartphones (27 types de smartphones sont proposés pour les principaux constructeurs : Apple, Blackberry, HTC, LG, Motorola Mobility, Nokia, Samsung, Sharp et Sony Ericsson) et de tablettes (dont le Kindle et le Kindle Fire HD, l'iPad, la Galaxy Tab et l'XPeria Tablet S) mais aussi sur des tailles d'écran d'ordinateurs plus importants jusqu'à l'Apple Cinema Display et son écran 27 pouces.

Responsivité du site Digitives estimée sur une tablette type iPad 2 ou 3


Il est également possible de définir l'orientation du terminal mobile pour tester votre site dans les 2 positions. L'outil vous offre également la possibilité de personnaliser votre propre bookmarklet avec les résolutions d'écrans qui vous intéressent plus particulièrement, et de tester n'importe quelle taille d'écran à tout moment, simplement en indiquant les dimensions souhaitées.
Les + :
  • Sa simplicité d'utilisation : il vous suffit d'ouvrir le bookmarklet dans la page de votre choix puis de cliquer sur l'icône correspondant à la taille d'écran que vous souhaitez tester.
  • En permettant de tester le site directement dans la fenêtre de votre navigateur, il vous permet d'utiliser vos autres extensions, comme les outils pour développeurs, ce qui est très pratique pour tester des corrections directement pendant le test.
  • Contrairement à d'autres outils du même type, Viewport Resizer ne modifie pas la taille de votre fenêtre de navigation, cela vous permet de pouvoir continuer à travailler normalement si vous avez plusieurs onglets ouverts.

Les - :
  • L'extension ne force pas toujours la version mobile de certains sites. Elle ne remplace pas un vrai test sur terminaux mobiles, mais elle permet néanmoins de bien débroussailler le terrain.
  • La possibilité d'imprimer la simulation est pratique (fonctionnalité disponible sur Chrome et Safari), mais sa mise en oeuvre n'est pas très pratique puisqu'elle s'appuie sur la css d'impression du site au lieu de permettre d'imprimer un aperçu basé sur la version web.
Stéphanie M.