Introduction
With WordPress we are used to working desktop first and then later, checking things on different screen sizes. All of our tools work that way. As a result, we sometimes forget to check different screen sizes and even if we remember, doing so is a bit of a hassle.
In the past I’ve used paid solutions or relied on browser dev tools. The paid solutions are great, but expensive, while the dev tools are OK, but a bit clumsy.
Video Version
Responsively.App Website
I recently started using a free open-source solution, the Responsivley App. It is simple to use and allows you to quickly test website responsiveness. I want to share it with you and do a quick walk-through because I think you may find it useful. Responsively is available from the website:
https://responsively.app/
There are versions of Responsively for Mac, Windows, and Linux. The app is built using Electron, a container used for housing JavaScript apps. It uses an embedded version of Chrome for the page displays. I didn’t see any tutorial or documentation, but it is pretty straightforward. There is a link on the website for adding a browser extension, which we’ll look at further on.
After you download it, just install like any other program. When I installed it I had to give it permission to access the network.
App Walk-Through
Note, that this is a desktop application, not a browser extension. When it starts up you see four frames with Google.com loaded. Each frame represents a different device. The default starting ones include iPhoneX, Pixel 2, iPad, and Generic Laptop.
Each device size has its own frame. On top there is the device name and dimensions and below that are the frame controls. From the frame controls you can open the dev tools for that frame, take a screenshot or a full page screenshot, rotate the device (if applicable) and disable event mirroring to the other frames. There are also the options to mute the frame or take it to full screen.
The left bar holds the settings options. The first button allows you to pick the device profiles to include in the frames to the right and how they are laid out.
The second button is for the user preferences. Among other options, this has the ability to disable SSL validation, which might prevent a frame from loading.
The third button lets you add browser extensions. There is a warning that only developer tool extensions will work.
The last button gives you the option to emulate being offline or using a cell phone connection.
Along the top of the application window there are a number of app controls.
- The address bar where you set the page URL for the frames
- Bookmark
- Delete storage
- Delete cookies
- Set as home page
- Switch color scheme
- Scroll down
- Scroll up
- Take a screenshot
- Tilt devices
- Mute all devices
- Inspect element
- Toggle touch mode
- Zoom
When you open a URL in the application, each of the frames loads that page, one after the other.
By default, the frames are linked. If you click a link or scroll in one, then the others do the same thing.
The Responsively.app comes with the option to install a browser extension. They are available for Chrome, Firefox, and Edge. You install them from the browser extension store. When they are installed you can open the page in your browser in the Responsively application. When you do that it open the page in a new instance of the app, even if the app is already open.
Summary and Conclusions
Up until now, there has not been a free and easy way to test responsiveness across device sizes. I’m so happy that the open-source community has developed this solution. I have two computer screens and have Responsively open on the second screen so I can test the page I’m working on to see if adjustments by screen size are needed.
The application is not perfect and remember that it is only emulating the sizes of different devices. There may still be differences between how actual browsers render a page. Safari on iOS is the most notable culprit. However, for most design scenarios, Responsively is a good tool we can turn to when creating for the web.
