Building with Polypane
Polypane has an extensive list of features that help find issues with responsive design, accessibility, search engine optimization, and much, much more.
What is Polypane?
Polypane is a web browser that is built for web development. Polypane was created by Kilian Valkhof.
Whenever you load up Polypane, you’ll notice that there are multiple panes for mobile, tablet, and desktop resolutions. These panes help you see your website in various screen resolutions all at the same time, helping you build great-looking designs at any screen size.
This is just the tip of the iceberg though, as Polypane can help with all facets of the design and development process.
My Favorite Features
Polypane has a lot of functionality. I discover new things it can do just about every time I open it up, probably because Kilian keeps adding useful features with every new version.
Workspaces
Workspaces allow you to set up panes for various types of devices, such as mobile, tablet, laptop, or desktop. Having a quick view of what a site will look like in all these different viewport sizes is incredibly handy and helps you spot potential issues a lot faster.
By default you are given a standard set of viewports to work with; however, there are plenty of other options available. You can also create your workspaces manually or by scanning your site to see what breakpoints are being targeted in your CSS.
Info Tab
I use the Info tab in the Polypane dev tools as a pre-launch checklist. Polypane will display site information for things like search engine optimization, document outlines, and accessibility concerns.
For search engine optimization, you can easily see all the meta information your page offers in one spot. This will give you a rundown of your page titles and descriptions, open graph and Twitter tags, icons, and even displays rich snippet and social previews.
The document outline section provides an overview of the structure of your page regarding headings, landmarks, links, images, and focus order. I use the outline section to ensure I’m delivering logical hierarchy and semantic web pages.
Accessibility is one of the most important pieces of developing a website in my opinion, so having a tool to help find these issues is crucial. Not only does Polypane find problems, but it also suggests potential ways to correct them using best practices.
Screenshot Tool
Polypane’s built-in screenshot tool is great as it allows you to quickly grab the full page, viewport, or specific elements on the page.
With the screenshot editor, you can annotate, add stickers, redact, crop, and resize the screenshot. Redacting sensitive information in screenshots is very important with certain projects I have worked on.
Debug Tools
Polypane includes a variety of debugging tools to help out with things such as layouts, accessibility, and content.
While I was writing this article I utilized the a11y.css tools to identify more ways to improve accessibility on this site!
Excellent Support
I met Kilian through the Frontend Horse developer community and have reached out to him a couple of times regarding Polypane.
The first time was due to an update to Polypane not working on my Macbook. Kilian had a patch out very quickly that got Polypane working for me.
Recently I reached out to him about a feature request, and within 10 minutes, he already implemented the suggestion, and it will be a part of an upcoming release.
Needless to say, Polypane is very well supported.
Final Review
Polypane is absolutely one of my favorite tools to develop projects with and helps ensure that I can develop high-quality and accessible websites and applications.
I recommend this to any web developers looking to improve their development process.