Responsively l’App gratuite pour tester le responsive design

Responsively l’App gratuite pour tester le responsive design
7 mn de lecture

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.

Responsively App navigateur pour tester le responsive d'un site en local

💡 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.

responsively app vue par défaut du test responsive en local

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.

responsively app device manager

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…

Responsively App test responsive en local avec les Chrome DevTools intégré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.

responsively app outils disponibles

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. 😉

Soumettre un commentaire 💬

guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires