Test Your Website Is Responsive - Free Responsively App

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.

Browser Stack
BrowserStack lets you test different devices using device emulators
Google Dev Tools
Chrome lets you see the page at different sizes in the dev tools panel

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/
Responsively App Website

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.

Responsively First Opened

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.

Device Frame Menu

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.

Select Devices For Frames

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.

Responsively App Settings

The third button lets you add browser extensions. There is a warning that only developer tool extensions will work.

Install Browser Entensions

The last button gives you the option to emulate being offline or using a cell phone connection.

Connection Emulation

Along the top of the application window there are a number of app controls.

Responsively App Top Bar
  1. The address bar where you set the page URL for the frames
  2. Bookmark
  3. Delete storage
  4. Delete cookies
  5. Set as home page
  6. Switch color scheme
  7. Scroll down
  8. Scroll up
  9. Take a screenshot
  10. Tilt devices
  11. Mute all devices
  12. Inspect element
  13. Toggle touch mode
  14. Zoom

When you open a URL in the application, each of the frames loads that page, one after the other.

New Url Opens In All Frames

By default, the frames are linked. If you click a link or scroll in one, then the others do the same thing.

Frames Are Linked Scroll In One Scrolls The Others

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.

Browser Extension

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.

Visit the Responsively.App Website

Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. You will still pay the same amount so there is no extra cost to you. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”  

Similar Posts