In the following article we are going to take a look at the Responsively App. This is a free development tool that we can find available for Gnu / Linux, Microsoft Windows and macOS. The application is a modified browser that uses Electron, and that will show a web application on several devices at the same time, and in a single window allowing user interaction.
As I was saying, this is a modified browser built with Electron which can be of help in responsive web development. This app was first published in early 2020 and is already quite popular with web developers. Many consider it a must-have development tool for all front-end developers, as it can greatly facilitate work.
General characteristics of Responsively APP
- Interactions made by the user will be duplicated on all devices. An action (like clicking, scrolling, etc.) that we carry out in one of the devices will be replicated in all the others in real time. This option can be disabled on one or all the devices that we have enabled.
- Our it will allow to establish the disposition of the devices, according to what we need.
- We will find over 30 built-in device profiles, with the option to add custom devices. These include the special response mode device for freely resizing a screen.
- The program will give us the possibility to inspect any item on any device using just one click.
- We can take a full page screenshot of all devices or a specific device.
- It can auto reload on all devices in real time every HTML / CSS / JS save.
- The application also iIncludes a live CSS editor, and design mode, which allows users to edit HTML directly without development tools. It also has network speed emulation options, zoom, disabling SSL validation and support for various protocols, among many other things.
- As well we will find network proxy support, light and dark themes.
- The program will offer us a series of keyboard shortcuts to facilitate the work.
- We can also use optional browser extensions (for Chrome, Firefox and Edge), which are used to easily send links from the web browser to the Responsively App, and to preview the page instantly.
These are just some of the features of this program. They can consult all of them in detail from the project website.
Download the Responsively App
This application can be found available to use in Ubuntu as an AppImage file. This file we can find it available for your download on the project website. In addition to downloading from the web browser, we can also open a terminal (Ctrl + Alt + T) and run wget in the following way to download the latest version published today:
wget https://github.com/responsively-org/responsively-app/releases/download/v0.18.0/ResponsivelyApp-0.18.0.AppImage
To use the AppImage file that we just downloaded, just right-click on this file, choose Properties, and under Permissions, look for the option that indicates that we allow to run the file as a program. Another possibility to give it the necessary permissions, will be to open a terminal (Ctrl + Alt + T) and go to the folder where we have it saved and to write the command:
sudo chmod a+x ResponsivelyApp-0.18.0.AppImage
After doing this, to start the program you just need to double click on the .AppImage file. It can also be started by running in a terminal:
./ResponsivelyApp-0.18.0.AppImage
If you would like to install the extensions for the web browser, with which you can easily send links from your browser to the application and get an instant previewAll you have to do is go to the project's download page and scroll down to the bottom of the web. There we will find the extensions for Firefox, Chrome or Edge.
As indicated from the project's GitHub repositoryIf any user has problems using the application, they can open a problem and report it in the following link. For more information about this project, users can go to the project website.