Responsively l’App gratuite pour tester le responsive design

Tester le responsive design d’un site sur votre ordinateur avec une app gratuite et open source, vous en rêvez ?

Responsively App est la solution ! Je dirai même qu’il s’agit d’un outil de développement incontournable tant pour les développeurs web que pour les créateurs de sites lambda.

Alors, découvrez cette pépite qui inclut les outils de développement de Chrome, les DevTools et permet de surcroit d’afficher le site dans plusieurs appareils simultanément !

Responsively App une application de bureau open source et gratuite

Tout d’abord, il faut savoir que Responsively App n’est pas un outil en ligne, mais une application de bureau. En bref, il s’agit d’un navigateur modifié gratuit et open source disponible pour les plateformes Mac, Windows et Linux.

Pour l’aspect technique, l’application a été construite avec Electron et utilise Chromium comme moteur de rendu.

Contrairement aux simulateurs mobiles des navigateurs comme Chrome ou autres, Responsively App affiche le site dans différentes tailles d’écran en même temps. Ainsi, vous obtenez un aperçu complet du site dans différents appareils sans avoir à redimensionner votre navigateur. Et ça, c’est vraiment un gain de temps appréciable.

Tester le responsive design d’un site sur votre PC avec Responsively App

Pour l’utiliser, en premier lieu, téléchargez la version de l’application qui vous convient et installez-la.

💡 Lorsque je l’ai installée sur Windows, j’ai eu un avertissement de sécurité. Vous l’aurez peut-être aussi. N’en tenez pas compte, il n’y a aucun virus ni cheval de Troie dans l’app.

Une fois l’application installée, cliquez sur le raccourci apparu sur votre ordinateur et entrez une URL à tester. Cela peut être l’URL d’un site en local ou bien d’un site déjà en ligne.

Votre site s’affiche alors dans plusieurs appareils par défaut et côte à côte.

Vous pouvez alors personnaliser l’affichage en ajoutant d’autres appareils ou en créant de nouvelles combinaisons d’appareils (Preview Suits).

Pour ce faire, cliquez sur l’icône dédiée dans la barre supérieure à droite, puis sur “Manage Suites”. Cela ouvrira une nouvelle fenêtre. À présent, choisissez parmi les 68 appareils proposés par Responsively ceux qui vous intéressent ou enregistrez les vôtres.

Une fonctionnalité intéressante de Responsively est que les interactions se font en miroir. Ainsi, chaque clic, défilement ou navigation que vous effectuez sur un appareil sera répliqué sur tous les appareils en temps réel.

Mais, le nec plus ultra de Responsively est la possibilité d’utiliser les Chrome DevTools directement dans l’App. Vous pourrez donc inspecter les éléments et surtout faire des tests de code pour remédier aux problèmes de responsive rencontrés…

Les fonctionnalités de Responsively App

Responsively App propose des personnalisations communes via les outils de la barre supérieure.

Après, pour chaque vue d’appareils, vous disposez également d’outils qui agissent de manière indépendante.

Les outils communs de la barre supérieure de Responsively App

Tout d’abord, sous “View” (en gris sur l’image) se trouvent l’actualisation de l’URL (Reload et Reload Ignoring Cache). Vous y trouverez aussi l’utilitaire de passage en plein écran (Toggle Full Screen).

Puis, en passant par les trois points à droite (orange sur l’image), vous pouvez :

• Zoomer ou dézommer
• Passer de l’affichage des appareils côte à côte en affichage en maçonnerie (Preview Layout)
• Passer du mode clair au mode sombre (UI Theme)
• Activer le dock DevTools (si vous ne le faites pas, les DevTools s’afficheront dans une fenêtre séparée)
• Désactiver la validation SSL si vous rencontrez des problèmes avec le HTTPS local
• Vider l’historique
• Indiquer un chemin pour l’enregistrement des captures d’écran (Settings)

Pour finir, les autres fonctionnalités communes (en bleu sur l’image) sont :

• Passer tous les appareils du mode portrait au mode paysage et vice-versa (Rotate Devices)
• Utiliser les DevTools pour inspecter les éléments (Inspect Element)
• Prendre une capture d’écran de toutes les vues (Screenshot All webViews)
• Passer les appareils en mode sombre (Device Theme Color Toggle)
• Voir les raccourcis clavier (View Shortcuts)

Les outils indépendants de Responsively App pour chaque vue d’appareil

Au-dessus de chaque appareil se trouvent des utilitaires qui fonctionnent de manière individuelle (en rose sur l’image) :

• Faire une capture d’écran du site dans cet appareil (Quick Screenshot)
• Faire une capture d’écran de la page entière du site dans cet appareil (Full Page Screenshot)
• Désactiver l’interaction pour cet appareil (Disable Event Mirroring)
• Ouvrir les DevTools (Open Devtools)
• Faire pivoter l’appareil (Rotate this Device)
• Passer l’appareil en affichage individuel (Enable Individual Layout)

Tester le responsive design d’un site Web avec une app, des extensions ou des outils en ligne ?

Pour conclure, je trouve que Responsively App est un outil magique pour tester le responsive design d’un site Web. De plus, il est vraiment très facile de l’utiliser.

Le fait que l’on puisse voir les appareils simultanément et qui plus est, accéder aux Chrome DevTools directement dans l’App permet de gagner un temps fou.

Évidemment, comme l’outil est gratuit et développé par une communauté, vous pouvez éventuellement y rencontrer des bugs mineurs. Si jamais cela arrive, n’hésitez pas à créer une demande sur GitHub.

Mais peut-être, préférez-vous tester des extensions de navigateurs ou des outils en ligne ? Si c’est le cas, alors, n’hésitez pas à parcourir mon article sur les outils gratuits pour tester le responsive design d’un site Web.😉

Et avant de me quitter, dites-moi quand même ce que vous pensez de Responsively App. 😉