Webmarketing

Google Resizer, un outil gratuit pour tester un site responsive !

google resizer

Google a dévoilé un nouvel outil permettant de simplement tester la capacité responsive d’un site internet sous différentes résolutions.

Google vient de lancer Google Resizer, un tout nouvel outil en ligne gratuit permettant à n’importe quel internaute, sans avoir à se connecter, de tester l’affichage de n’importe quel site internet sur toutes les résolutions d’écrans PC, tablettes et mobiles.

Pour tester les sites adaptables aux différents écrans, il y avait jusqu’à présent 2 possibilités principales :

  • en passant par la fonctionnalité « inspecter l’élément » très connue des développeurs (accessible via un clic droit => « Inspecter » sur Google Chrome ou via un CTRL + SHIFT + M puis CTRL + SHIFT + I),
  • en disposant de nombreux terminaux avec des résolutions différentes pour pouvoir correctement tester en live.

Désormais, avec la mise en ligne du nouvel outil Google Resizer, n’importe quel internaute pourra tester l’adaptabilité d’un site internet en fonction des différentes définitions d’écrans (PC, smartphone et tablette).

Google Resizer permet de tester n’importe quelle page d’un site internet, il est ainsi possible de tester la page d’accueil mais aussi n’importe quelle page profonde.

Cet nouvel outil Resizer vient en complément, sans le remplacer, de l’outil de test de compatibilité mobile lancé il y a déjà quelque temps par Google.

Comment utiliser Google Resizer ?

Pour commencer, voici l’URL d’accès de l’outil : http://design.google.com/resizer/

Après avoir entré l’URL du site ou de la page à tester dans la barre supérieure de Google Resizer, l’outil chargera automatiquement le site internet sous plusieurs résolutions (PC portable, tablette tactile au format paysage et smartphone) :

google resizer leptidigital

Cet affichage est interactif, il est ainsi possible de scroller sur les différents terminaux pour avoir un aperçu rapide de l’adaptabilité du site internet testé.

Pour tester le site dans le détail, l’outil propose ensuite deux icônes distincts en haut à droite. Le premier icône permet de tester un site avec les principales résolutions d’écrans des ordinateurs, le second est dédié aux terminaux mobiles (smartphones et tablettes).

barre google resizer

Une fois le premier icône ou le second cliqué, une barre horizontale permet de sélectionner la résolution à tester. Un simple clic sur « 1280 », « 960 » ou « 840 » par exemple modifiera l’aperçu du site internet à la résolution sélectionnée.

L’outil Google Resizer en action :

google resizer gif

Rien de mieux qu’un petit Gif animé pour vous présenter la fonctionnalité de manière plus interactive.

En résumé, ce nouvel outil Google Resizer est une version allégée et simplifiée de l’outil similaire accessible depuis la fonctionnalité « Inspecter l’élément » sur Google Chrome. L’outil Resizer ne permet par exemple pas de sélectionner un modèle de smartphone en particulier pour tester la fonctionnalité responsive d’un site, ce que permet l’autre fonctionnalité accessible via « inspecter l’élément ».

L’alternative à Google Resizer :

Pour ceux qui souhaitent accéder à l’autre fonctionnalité que je mentionne dans cet article, voici la procédure à suivre :

  • Rendez-vous sur n’importe quelle page à tester avec Google Chrome
  • Faites un clic droit => « inspecter » (ou CTRL + SHIFT + I)
  • Cliquez ensuite sur le petit icône de téléphone en haut à droite pour basculer sur l’outil de test de compatibilité mobile / tablette intégré à Chrome (ou faites un CTRL + SHIFT + M)
  • Sélectionnez en haut à gauche le terminal à tester puis faites un F5 pour rafraîchir la page et avoir un aperçu du rendu de la page sur ce terminal
  • Pour plus de confort d’utilisation, passer en mode plein écran en appuyant sur la touche F11 de votre clavier

Voici ce à quoi l’outil ressemble une fois la procédure suivie et l’affichage configuré pour tester LEPTIDIGITAL sur un iPhone 6 :

outil test responsive chrome

Une fonctionnalité similaire existe également sur Mozilla Firefox, elle aussi accessible via un clic droit puis « Inspecter l’élément ». L’outil Mozilla est accessible pour sa part sur la droite de la console s’affichant une fois la manipulation précédente réalisée, via un icone carré placé à côté de l’icône de roue dentée :

outil test responsive mozilla

Google Resizer, un outil gratuit pour tester un site responsive !
5 - 1 vote

Commenter

Répondre

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

Up