Blog
Tips for responsive design & developer tools
Polypane 6.3: Tunnel vision simulator, webmanifest support, updated UI
In Polypane 6.3 we added new debug tools and improved the meta panel and outline panel. And we moved the reload button. Tunnel vision simulator The new tunnel vision simulator will let you experience websites as if you…
Detecting media query support in CSS and JavaScript
Recently I needed a way to detect support for a media query in CSS and JavaScript. To detect if a browser supports a certain CSS feature, you can use @supports () { ... } , but that doesn't work for media queries. In…
Polypane 6.2: HTML validation, robots.txt support, RTL emulation and more
In Polypane 6.2 we focused on improving the app performance and consistency, particularly around updating, pane resizing, tab handling and dark mode. We still added a fair few new features, including some that many of…
Creating websites with prefers-reduced-data
Even though more and more people get access to the internet every day, not all of them have fast gigabit connections or unlimited data. Using the media query prefers-reduced-data we can keep our sites accessible to…
Fixing contrast issues, on your own site and elsewhere
Insufficient text contrast is the most common accessibility issue on websites today. According to the WebAIM Million report for 2021 , 86.4% of home pages world wide have low contrast text. What's worse, this number has…
A11y tooling in Polypane (video)
On May 25th Kilian Valkhof (the creator of Polypane) joined the Twitch channel of Stephanie Eckles to walk through most of the accessibility options in Polypane. Check out the recording below: If you prefer reading…
Responsive design ground rules (updated for 2021)
Creating a responsive design can be intimidating. There are many moving parts, things might lay out in ways you didn't expect and keeping all various viewports in mind when laying out a design can be daunting. With these…
Find and fix accessibility issues with Polypane
At Polypane, accessibility is one of the three core areas we focus on, along with performance and responsive design. If you're not familiar with Polypane, it's a web browser specifically for web developers. It has all…
The complete guide to CSS media queries
Media queries are what make modern responsive design possible. With them you can set different styling based on things like a users screen size, device capabilities or user preferences. But how do they work, which ones…
Polypane 6.1: Readability, Content Chaos and rewritten event sync engine
Polypane 6.1 adds two new debug tools and a much more performant, completely rewritten interaction syncing engine along with numerous smaller improvements and bug fixes. What's Polypane? Polypane is a web browser for…
The perfect responsive menu (2021)
On a desktop, websites have the space to show the full menu or navbar. On a mobile device that space isn't there and you want to hide the menu behind a toggle (like a hamburger icon), then show it when people click that…
Device testing is not enough
When you get started with responsive design, you wouldn't be wrong to think it's all about devices. Questions like "which size to use for mobile" quickly come up, and most testing is done on developers' own devices…
Polypane 6: Peek, Webvitals, new simulators & Chromium 91
Polypane 6 is now available! It's another packed release with new features, simulators, performance improvements and a new version of Chromium powering it all. Read on to learn about all the cool new things we have for…
Don't you forget about me: overlooked breakpoints in responsive design.
We get it, there's infinite breakpoints you need to test on and only so much hours in a day, so some breakpoints just get a little more attention than others. You focus most of your time on the devices you have. At…
How to find broken links with Polypane
Broken links, or "dead links", on your website are links that go to a URL that doesn't work. Sometimes this is because the site you're linking to has gone offline or has a server error, sometimes it's because there is a…
Polypane 5.1: Web components support
Polypane 5.1 introduces support for web components across the application, many improvements to the Outline panel and Contrast checker. There an updates to the Chromium version, Google fonts list and accessibility…
Checking webpage quality in 5 minutes with Polypane
In this article we'll check the quality of a web page in about 5 minutes, from meta info to accessibility. Polypane has many features that make it easy to see different parts of your site, inspect them for issues and it…
Polypane 5: Console popups, performance and focus overview
Polypane 5 is out with new ways to see your console messages, new performance settings and a new focus order overview. It has a new Chromium version (89), many performance improvements, updated UI elements and new debug…
How Maurits Meester combines front-end development with beer
Maurits is a freelance front-end developer and co-founder of Brouwerij Victorie , a brewery in Amsterdam with a gorgeous website. We spoke with him about beer (naturally), e-commerce and Henri's, a Sass design toolbelt…
Faking container queries with CSS Grid
Container queries are an (hopefully) upcoming feature in CSS that will let you create responsive designs that respond to the dimensions of their container (like a div or other HTML element) rather than the dimensions of…
Debug your visual hierarchy with the squint test
"The squint test" is a method to get a feel for the visual hierarchy of your page and the name is quite literally what you're supposed to do. When you squint your eyes and move away from your screen a little you distort…
How Sergio Mattei made the next Makerlog 6x faster with Polypane
Sergio is the creator of Makerlog , a web app that lets Makers log their progress [including me - Kilian] and he is building the next version using Polypane. We interviewed him about his challenges and how Polypane…
Polypane 4: Unified Console, DOM tree in elements panel
A new unified Polypane console, a treeview in the elements panel, prefers-reduced-data and locale emulation, docked devtools for isolated panes, new and updated social media previews and debug tools, Chromium 87 and…
Polypane demo with Shawn @swyx Wang
Last Tuesday together with Shawn @swyx Wang we held a livestream to give a tour of Polypane. We used Shawn's website to go through most of the features Polypane has to offer and shared thoughts on modern web…
Strategies for dealing with horizontal overflows
One of the most time consuming issues when it comes to web development is debugging horizontal scrollbars . They're easy to overlook (and on most Macs, they don't even show up) and if users accidentally scroll, it's…
Beautiful CSS 3D Transform Examples
3D transforms and perspective can be a great trick to add depth and texture to any website but they're tricky to get right. They can easily look skewed, too flat or distorted if you don't use a fitting perspective or…
Polypane 3.3: Grids and guides, horizontal overflow detection and updated UI
Add grids and guides to your site, detect which elements cause horizontal overflows, new overlays, a refreshed UI and noticable performance improvements. with over 50 changes there's quite a lot to find in the new…
How Earnworthy uses Polypane to audit landing pages and land 25% more customers
We interviewed Nicholas Scalice, the founder of Earnworthy and creator of the GrowthMarketer.co newsletter about how he uses Polypane to be able to provide quick landing page consultations while focusing on both…
Polypane ❤ Tumult Hype. New integration
Tumult Hype lets you create beautiful, responsive HTML5 animations and web content. When you preview your design by clicking the 'preview' button in Hype and selecting Polypane, it will automatically open the viewports…
How Code& increased their efficiency by 500% maintaining and improving websites like Freshwater SLSC
We interviewed Dale Grant, the owner of Code& on their workflow and how Polypane fits into it. As a development-focused agency they use WordPress for a wide variety of clients and projects. Can you introduce us to Code…
CSS breakpoints used by popular CSS frameworks
When using a CSS framework it often doesn't matter what devices people use. These frameworks come with their own set of CSS breakpoints with components that work well with those breakpoints. Instead of configuring…
How Tailwind Made uses Polypane
The following article was written by Vivian of Tailwind Made on how they use Polypane in their development process and is part of a series of case studies by Polypane users. We’re Tailwind Made , a web shop that…
Polypane 3.2: Accessibility and viewport sizing
We're introducing two big features in Polypane 3.2: The accessibility panel and viewport sizing . Beyond that we added a whole lot of smaller features and improvements, with nearly 40 items in our release notes…
Polypane 3.1: New elements panel
Polypane 3.1 is now available and with over 30 new and improved features it's our biggest release ever. With Polypane 3.1 we're introducing the Polypane elements panel: A completely new elements panel written for…
8 ways to increase your productivity as a web developer (in 2021)
Making websites takes time. There are a lot of parts you have to think about if you want to create a good, solid website and sometimes it might feel like there just isn't a way to go through the work faster. Whether you…
Color contrast checker that makes suggestions for better colors
For the past week or so I've been helping out with Coronastatus , an online platform that's now live in 20+ countries where people can self-report their health status in relation to the COVID-19 pandemic. One of the…
Polypane 3: browser tabs and dark mode emulation
Polypane 3 is now available and comes with two big new features: Media Feature emulation and Browser tabs , as well as an upgrade to Chromium 80. To allow for browser tabs we also updated the rest of the UI to match…
Polypane is now part of the GitHub Student Developer Pack
We are super proud to announce that Polypane is now part of the GitHub Student Developer Pack . Eligible students get free access to Polypane for a year and can sign up starting today by authenticating with GitHub here…
CSS specificity calculator
If an element is targeted by multiple selectors, browser use the specificity of the selector to determine which styling to apply. Each selector has a specificity that is determined by what you use in that selector…
4 CSS layouts without using media queries
Do you always need media queries to make a website responsive? With flexbox and grid you can make responsive layouts without having to define fixed breakpoints with media queries. Adam Argyle recently showed us a tweet…
Polypane 2.1: Edit all your panes at the same time
With Polypane, we want to give you better insights into your site and make the entire developer/designer workflow faster. With Polypane 2.1, we've made some huge improvements for both of those goals. What's new? Quick…
Responsive Design Glossary
With responsive design come a lot of new terms and concepts and there wasn't really a single place that listed them all with explanations in plain English. So we created one. No super long articles that bury the…
Polypane 2: device emulation, new modes and simulators
Polypane 2 is out! In Polypane 2 we're introducing a bunch of often-asked for features, like full device emulation, filtering and a vertical view mode but also some completely new functionality that just might change how…
Polypane 1.3: Full page mode and screenshot improvements
Polypane 1.3 adds a full page mode, screenshot improvements and shortcuts for the quick switcher, as well as laying the groundwork for the upcoming Polypane 2. What's new in this release? Full mode Show a site in the…
Give your eyes some rest with dark mode in Polypane
Whether you like your entire OS to be in dark mode or not, sometimes it's just nice to dim an application and gives your eyes a little rest. That's exactly what dark mode in Polypane, one of our most requested features…
Polypane 1.2: Dark mode, Full page screenshots, Live reloading and more
There is a new version of Polypane available! It brings dark mode, live reloading, full page screenshots and a ton more great features. Read on for the details. To check out the latest version, start your trial . What's…
Polypane 1.1 release notes
Update 1th aug 2019: Polypane 1.1.1 is now available with the following bugfixes: Fix : zoom-to-fit on Windows (it got broken in 1.1, sorry!) Improvement : better breakpoint detection for certain sites Improvement…
Responsive CSS breakpoints for the top 50 websites 2019
With Polypane, it's simple to see a website in all the responsive widths it's designed for. Polypane intelligently parses the CSS and finds all the media query declarations. We looked at the top 50 websites worldwide…
Why you need a development browser
You're probably looking at this site in Google Chrome or Firefox. That's fine, that's exactly what they're for: browsing the web, and being really, really good at browsing the web. They're built for that. They're built…
Roadmap, and why Polypane is a subscription
Hi, I'm Kilian. I'm the solo developer of Polypane. Let me tell you about why Polypane is a subscription, and what that means for the roadmap. Polypane is a subscription so that I can focus on adding new features…