Site responsive : prévisualiser votre site Web sur des appareils de différentes tailles

Chaque concepteur Web doit s’assurer que le site Web est compatible avec toutes les tailles d’écran. Il est connu que chaque appareil comme l’ordinateur portable, le téléphone mobile et la tablette a ses propres spécifications d’écran par défaut. Ainsi, le concepteur Web doit prendre en compte toutes les tailles d’appareils lors de la conception d’un site Web, sinon le site Web pourrait échouer et sembler maladroit sur les appareils incompatibles.

Compte tenu du problème, il est toujours important de vérifier et de s’assurer que le site Web fonctionne correctement sur tous les appareils. Pour résoudre ce problème, Google a introduit l’un des outils d’émulation d’écran en ligne qui aident non seulement les concepteurs mais également les propriétaires de sites à vérifier la compatibilité des tailles. L’outil est nommé Resizer qui est gratuit pour tous et votre site sera prévisualisé sur toutes sortes d’appareils.

Il est important de noter que cela ne fonctionne que pour les sites Web déjà développés et déployés. Il prévisualise uniquement les sites Web qui sont hébergés  sur un serveur Web. S’il y a un problème avec le chargement de la page, il signale une erreur.

Voyons comment ce Resizer de Google aide à prévisualiser notre site sur tous les appareils.

Voici la séquence étape par étape

1. Tout d’abord, allez sur la page Web design.google.com/resizer
2. Maintenant, il vous amènera à la page où le champ de recherche et trois icônes (ordinateur portable, tablette, téléphone portable) sont affichés
3. Assurez-vous de saisir l’adresse de votre site Web. Par exemple, dans cet article, j’ai saisi https://astuces-informatique.com
4. Maintenant, cliquez sur l’icône Ordinateur portable pour voir l’aperçu sur les appareils de la taille d’un ordinateur portable
5. Cliquez sur l’icône Tablette pour prévisualiser le site Web sur la taille d’écran de la tablette
6. Enfin, cliquez sur l’icône du téléphone mobile pour prévisualiser le site

À chaque étape de la prévisualisation, assurez-vous que les composants et les éléments du site Web ne sont pas égarés. Si quelque chose est mal placé, envoyez le test pour résoudre le problème.

Avez-vous utilisé une alternative similaire à Google Resizer ?