6 outils gratuits pour tester votre site responsive

Le responsive design est aujourd'hui un impératif pour optimiser l'accessibilité de votre site web à l’heure où les mobiles deviennent les 1ers outils de navigation web ! 50% du trafic mondial s’effectue sur un smartphone, contre 45 % pour un ordinateur de bureau et 5 % pour la tablette.

N’oublions pas non plus dans cette équation le référencement naturel. En effet, le nouvel algorithme du moteur de recherche, sobrement nommé "Index Mobile-First" et actuellement en cours de déploiement, privilégie les sites optimisés pour la navigation mobile.

Avoir un site responsive est aussi un élément pour améliorer l’expérience utilisateur à l’heure où les mobiles deviennent les 1ers outils de navigation web ! 50% du trafic mondial s’effectue sur un smartphone, contre 45 % pour un ordinateur de bureau et 5 % pour la tablette.

Plusieurs outils gratuits ont été développés pour vous permettre de tester le responsive design de votre site web. Vous pouvez ainsi vérifier que votre interface est optimisée pour l’expérience utilisateur ou dresser la liste des améliorations à entreprendre rapidement !

Voici les 6 outils préférés des experts en webdesign et ergonomie web de l’agence et une petite astuce pour la route !

XRespond : le laboratoire virtuel de devices

XRespond est en tête de notre top 5 car il est certainement un des outils les plus complets pour vérifier le rendu de votre site responsive !

Vous pouvez ajouter ou supprimer autant de tailles d’écran que vous souhaitez pour en obtenir un aperçu.

L’avis des experts en webdesign et ergonomie web de l’agence Yumens : Il est possible d’avoir un aperçu de votre site web responsive soit en sélectionnant le nom d’un appareil (iPhone4S, Samsung Galaxy 8, MacBook, etc.) soit en précisant les dimensions. C’est sûrement un des outils les plus complets.

Responsive Design Checker : un outil gratuit, rapide et complet

Responsive Design Checker vous donne un accès total à l’espace de test. Vous pouvez générer n’importe quelle taille d’écran et même vérifier votre ratio d’écran.

La barre de navigation latérale vous donne accès à des dimensions prédéfinies correspondant à certains modèles très répandus de devices (Iphone, Kindle, Samsung Galaxy, etc.).

L’avis des experts en webdesign et ergonomie web de l’agence Yumens : Cet outil pour vérifier le responsive design est très pratique car il est l’un des rares à vous donner un aperçu d’écran très large (jusqu’à 24 pouces). De plus, l’interface est très agréable à utiliser.

Livre blanc : "L'expérience utilisateur sur 5 grands sites de voyage"

MattKersley.com : quand un webdesigner développe son propre test responsive

Le développeur et webdesigneur anglais Matt Kersley a conçu sa propre interface pour tester le responsive design de votre site.

Son test gratuit est d’une extrême simplicité : rendez-vous sur mattkersley.com. Saisissez l’URL de votre site web à tester et découvrez immédiatement le rendu sur 5 formats de devices. Vous pouvez filtrer pour n’avoir que la largeur du site ou pour avoir également la hauteur de vos pages. 5 largeurs d’écran sont à votre disposition : 240, 320, 480, 768 et 1024 pixels.

L’avis des experts en webdesign et ergonomie web de l’agence Yumens : il s’agit d’un des rares outils gratuit pour obtenir un aperçu du site en responsive design qui propose un format en 240 pixels de large par défaut ! Malheureusement, cet outil ne permet pas de naviguer dans les aperçus, il faut saisir chaque URL que vous souhaitez tester pour avoir un rendu en responsive design des différentes pages.

Google Mobile Test : avoir un site responsive design, testé et approuvé par Google

Il s’agit d’un des outils gratuits les plus accessibles et le plus simple d’utilisation pour tester votre site responsive.

Il vous suffit de rentrer l’URL de votre site sur le Mobile-Friendly Test de Google et de patienter pendant que la plateforme analyse votre interface et vous donne le résultat.

L’avis des experts en webdesign et ergonomie web de l’agence Yumens : Il ne s’agit pas d’un outil dédié pour les designers. Par exemple, il ne permet pas de cibler des bugs de développement ou d’avoir un aperçu du site en responsive. Mais le mobile-test friendly permet de connaître quel paramètre de votre site web est une lacune pour votre responsive design. C’est un moyen sûr de tester votre site, même s’il est incomplet pour un expert en webdesign.

Am I responsive ? pour un aperçu de votre site sur 4 devices en même temps

Dans la même lignée du Mobile-Friendly Test, le site ami.responsivedesign.is ne vous permet pas d’analyser votre site au pixel près. Mais il vous permet d’avoir un rapide aperçu de ce dernier sur les 4 types d’écran : smartphone, tablette, ordinateur portable et desktop.

L’avis des experts en webdesign et ergonomie web de l’agence Yumens : Il ne s’agit pas d’un outil pour travailler la conception d’un site web. Mais il vous permet de présenter votre travail rapidement par exemple. Avec une simple capture d’écran, vous pouvez tester votre interface sur 4 devices en même temps.

Il a un petit avantage : vous pouvez tester des adresses hébergées en local !

Sizzy : le coup de coeur de nos experts

Sizzy vous permet également de visualiser le rendu de vos pages web. On apprécie particulièrement le mode de sélection des previews : par OS (Android ou iOS), ou par device (mobile ou tablette). Son petit plus : la ligne de flottaison est plus précise puisqu’on peut même choisir d’afficher le clavier ou non !

L’avis des experts en webdesign et ergonomie web de l’agence Yumens : les tailles proposées couvrent à peu près toutes celles disponibles à ce jour, cela va des anciennes versions de l’iPhone, depuis le 4 sans oublier l’iPad Air et le Nexus 6P

C’est le coup de cœur de l’équipe depuis le mois de juin !

L’astuce de l’agence Yumens

Enfin, nos experts vous partagent une petite astuce qu’ils utilisent dans leur travail : la touche F12 dans le navigateur Chrome. Elle vous permet de dévoiler la DevTools, une boîte à outils conçue pour les webdesigners. Entre autres fonctionnalités, vous pourrez visualiser votre page web (et y naviguer) comme si vous étiez sur un mobile ou une tablette.

Nos experts en webdesign et ergonomie web sont à votre disposition pour vous aider à améliorer votre site web responsive, à mettre en place des stratégie d’ergonomie ou encore à optimiser votre tunnel de conversion. D’ailleurs, ils ont conçu un livre blanc dédié à l’expérience utilisateur des sites de voyage. N’hésitez pas à le consulter !