Comment installer et utiliser Responsively sur PC ?

Qu'est-ce que Responsively vous permet de faire ?

Responsively est un outil de développement web gratuit et open-source qui permet aux développeurs et aux designers de visualiser et de tester leurs créations sur plusieurs appareils simultanément. Il offre une visualisation en temps réel et des interactions synchronisées, simplifiant ainsi le processus de création d'applications et de sites web réactifs. Il aide à s'assurer qu'une conception s'affiche correctement sur diverses tailles d'écran, des smartphones aux ordinateurs de bureau.

Comment le télécharger ?

Rendez-vous sur la page dédiée à Responsively sur la logithèque

Comment l'installer et l'utiliser ?

Responsively est une application de bureau disponible pour Windows, macOS et Linux. L'installation est simple et rapide, vous permettant de commencer à tester vos projets web sur plusieurs appareils en quelques secondes.

Installation :

1. Téléchargement
2. Exécution du programme d'installation : Lancez le fichier d'installation téléchargé. Suivez les instructions à l'écran pour terminer le processus d'installation. Il est possible qu'on vous demande des permissions d'accès au réseau pendant l'installation.

Utilisation de l'interface utilisateur :

Une fois Responsively installé et lancé, vous découvrirez une interface utilisateur sombre et intuitive. L'application s'ouvre généralement avec une page d'accueil Google préchargée sur plusieurs appareils prédéfinis, tels qu'un iPhone, un Pixel, un iPad et un ordinateur portable.

• Ajouter des URL : Dans la barre d'adresse, vous pouvez saisir l'URL de la page web que vous souhaitez tester.
• Navigation : Des boutons de retour, d'avant, d'actualisation et un lien vers la page d'accueil sont disponibles, similaires à un navigateur web standard.
• Gestion des appareils :
  • Sélection des appareils : Sur le côté gauche de l'interface, vous pouvez changer les appareils affichés dans votre aperçu. Vous pouvez choisir parmi une vaste collection de profils d'appareils intégrés, et vous avez également la possibilité d'ajouter vos propres appareils personnalisés.
  • Suites d'appareils : Vous pouvez créer et sélectionner différentes "suites" d'appareils. Une suite est un ensemble d'appareils que vous pouvez visualiser côte à côte. Cela vous permet de tester rapidement votre site sur des combinaisons d'appareils couramment utilisées, comme une suite mobile (divers iPhones et téléphones Android) ou une suite tablette. Vous pouvez enregistrer vos combinaisons d'appareils préférées pour passer rapidement d'un ensemble de tests à un autre.
• Interactions synchronisées : L'une des fonctionnalités clés de Responsively est la synchronisation des interactions. Tout clic, défilement ou navigation que vous effectuez sur un appareil est répliqué en temps réel sur tous les autres appareils affichés. Cela permet de tester de manière transparente le comportement de votre site sur différentes tailles d'écran sans avoir à interagir avec chaque appareil individuellement.
• Outils de développement :
  • Inspecteur d'éléments unifié : Responsively offre un inspecteur d'éléments pour tous les appareils simultanément. Vous pouvez activer l'inspecteur (souvent avec Cmd/Ctrl + I) et survoler un élément pour voir ses détails sur tous les appareils à la fois.
  • Captures d'écran : Vous pouvez prendre des captures d'écran de la page entière de tous les appareils en un seul clic, ou capturer des images d'appareils individuels en utilisant une icône de caméra. Il est également possible de prendre une capture d'écran rapide de la zone visible.
  • Rotation de l'appareil : Vous pouvez facilement faire pivoter les appareils pour tester les modes portrait et paysage.
  • Outils de débogage : L'application intègre des outils de développement similaires à ceux des navigateurs standards pour le débogage et l'analyse des performances.
  • Règles et guides : Des règles avec des lignes déplaçables sont disponibles pour vous aider à vérifier les alignements et les mises en page.
  • Visualiseur de couleurs : Un outil pour simuler comment les utilisateurs ayant différentes déficiences de vision des couleurs percevraient votre site est également inclus.
• Autres utilitaires :
  • Gestion des cookies et du stockage : Vous pouvez gérer les cookies, le stockage local et le stockage de session.
  • Favoris : La possibilité d'ajouter des pages aux favoris est disponible pour un accès rapide.
  • Cache réseau : Vous pouvez effacer le cache réseau ou simuler différentes vitesses de réseau, ainsi que les états en ligne ou hors ligne.
  • Mode tactile : Une option pour basculer le mode tactile est disponible.
  • Zoom : Vous pouvez zoomer ou dézoomer sur chaque appareil.
• Personnalisation :
  • Thème : Vous pouvez basculer entre un thème clair et un thème sombre.
  • Apparence : Des options de personnalisation de la disposition de l'aperçu sont disponibles pour s'adapter à vos besoins.
• Extensions de navigateur : Responsively propose des extensions pour les navigateurs Chrome, Firefox et Edge. Ces extensions vous permettent d'envoyer facilement l'URL de votre navigateur actuel à l'application Responsively pour un aperçu instantané.
• Rechargement à chaud : Le rechargement à chaud est pris en charge pour les développeurs, ce qui signifie que les modifications apportées au code peuvent être reflétées automatiquement dans l'aperçu.

Télécharger Responsively gratuitement