First impressions of Polypane

In Feburary at GlasgowJS Doro Hinrichs presented a talk on accessibility. In the Q&A afterwards people were discussing various tools that could be used to audit accessibility and several people chatted about Polypane app. I thought I’d give it a try to see how it could fit into my dev workflow.

An overview of Polypane

Polypane is a browser application built for developers to view, debug and polish their websites. It allows you to configure multiple panes at different viewport sizes, viewing and controlling them simultaneously. Click or scroll in one pane and it will be mirrored across the other panes. It also features a suite of additional tools for a11y testing, layout debugging and social media previews.

Initial impressions

In order to test the features of Polypane I used it to make some improvements to my personal website. My website is a permanent work-in-progress, so there are always tweaks to be made!

The first thing I did was to fix a wrapping error for my links footer on mobile. I had added additional links without setting the flex wrapping property. Polypane detected this and showed me an error in the mobile pane.

I then used Polypane to improve the sizing and layout of my homepage image. It wasn’t broken, but it benefited from a small amount of polish. Being able to see the effect of my changes across different viewports as I made those changes was great. I could quickly experiment with different sizes and tweaks.

I moved on to the month notes and journal pages, tweaking the padding and sizing at mobile sizes. Again, nothing that was broken, but certainly a quality improvement.

I briefly used some of the accessibility overlays to check the roles on my page. I had labelled the main navigation, but I hadn’t labelled my footer navigation. This was an good catch, and makes my page easier to navigate using screen readers.

Is it worth it?

Polypane is priced at under £10 per month, with two months free if subscribing annually. It comes with a 14 day free trial period.

I am unsure as to how often I will use this in my workflow. It was useful when fitting together layout components onto the screen, but perhaps less useful for developing components themselves. My site certainly benefitted from a small polish, and I am sure there is more than I can do. I think it would be very useful if your focus was on regularly building responsive websites, for example, web design freelancers would surely find this an excellent tool.

If we compare the monthly fee to a developer wage then you don’t need to be saving much time to make the tool worth it. Even if you simply add it to the end of a development cycle for testing, reviewing and tweaking.

If you want to try it then you can get a trial at polypane.app. I’d love to hear from other Scottish Technology Club community members as to how they are using the app.