{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-3-2-accessibility-and-viewport-sizing/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"Polypane 3.2: Accessibility and viewport sizing\",\n  \"cover\": \"/img/mail/icon.svg\",\n  \"date\": \"2020-06-12\",\n  \"type\": [\"announcement\"]\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `We're introducing two big features in Polypane 3.2: The `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `accessibility panel`), ` and `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `viewport sizing`), `. Beyond that we added a whole lot of smaller features and improvements, with nearly 40 items in our release notes.`), mdx(PolypaneIntro, {\n    mdxType: \"PolypaneIntro\"\n  }), mdx(\"h2\", {\n    \"id\": \"accessibility-panel\"\n  }, `Accessibility panel`), mdx(\"p\", null, `Polypane has long had features to help build more accessible sites, like our contrast checker, outline panel and over a dozen different simulators to test your site for varous visual and other impairments.`), mdx(\"p\", null, `In Polypane 3.2 we added an accessibility panel that does automated testing of your page. We spend a lot of time on making it as actionable as possible and really help you understand what the issues are, where they are and how you can solve them.`), mdx(\"p\", null, `Issues are ordered by severity, so you just start at the top and work your way down. When you hover over the elements in the accessibility panel, the panes scroll to highlight the element. When you click on the inspect element icon the element will be selected in the Elements panel, where you can usually fix the issue.`), mdx(\"p\", null, `The workflow is really enjoyable and we hope it makes you check and fix accessibility issues more often. See how we fix two (minor) issues in record time on our own homepage:`), mdx(\"img\", {\n    \"src\": \"/blogs/polypane-3-2/a11y.gif\",\n    \"className\": \"imgshadow\",\n    \"alt\": \"Video showing two accessibility bugs being fixed in Polypane\"\n  }), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, `Of course, you want to get to zero issues and if you do, Polypane has a little surprise waiting for you 🎉️`)), mdx(\"h2\", {\n    \"id\": \"real-viewport-sizes\"\n  }, `Real viewport sizes`), mdx(\"p\", null, `Responsive design is best when it's based on your content. Device sizes change but if you make a responsive design that works well with your content it will keep looking great.`), mdx(\"p\", null, `That being said, Polypane has always had a set of default devices with full emulation. The dimensions we used for these devices were the full screen sizes, perfect for developing SPA's or other fullscreen experiences. From Polypane 3.2 on, we'll default our devices to the real viewport size, which is the part of your screen that actually shows your site in the default browser.`), mdx(\"img\", {\n    src: \"/blogs/polypane-3-2/viewport.png\",\n    className: \"imgshadow\",\n    alt: \"A viewport and non-viewport pane in Polypane\"\n  }), mdx(\"p\", null, `We gathered the data for all our devices and made sure we have the real viewport sizes for both portrait and landscape modes. Switching between viewport and no-viewport can be done in the device preset list and rotating devices will automatically use the correct viewport sizes for the device you've selected.`), mdx(\"h2\", {\n    \"id\": \"elements-panel-improvements\"\n  }, `Elements panel improvements`), mdx(\"p\", null, `We've been overwhelmed by the feedback you've given on the elements panel. We're glad to hear we made something that has been so useful to you and are constantly working on making it better. In this release, we've made it faster and more stable.`), mdx(\"p\", null, `We've added options to quickly hide the selected element (which comes in handy more often than you'd think) and to collapse the box model so that the style panel has more room. Polypane now shows the line height of an element and if the list of classes is very long, it will make it scrollable so the rest of the panel is still usable`), mdx(\"p\", null, `But the biggest update it the new popup when you inspect an element. You're probably familiar with it from other browser developer tools, but we think our version is quite a bit more useful. It shows an overview of the element, including the actual font information and the contrast ratio (for every element).`), mdx(\"img\", {\n    src: \"/blogs/polypane-3-2/popup.png\",\n    className: \"imgshadow\",\n    alt: \"A viewport and non-viewport pane in Polypane\"\n  }), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, `We think we have a pretty good set of info right now, but we'd love to hear from you what you want to see added in this popup!`)), mdx(\"h3\", {\n    \"id\": \"overlay-updates\"\n  }, `Overlay updates`), mdx(\"p\", null, `All the overlays now have an `, mdx(Info, {\n    width: 16,\n    height: 16,\n    mdxType: \"Info\"\n  }), ` icon that you can hover to get information on what the overlay does. For the simulators we show how many people are affected by it.`), mdx(\"p\", null, `When you have an overlay selected we add a \"clear overlay\" button at the top of the overlay popup so you can quickly remove the overlay again.`), mdx(\"p\", null, `Lastly, out color contrast overlay has seen some cool improvements in the past few releases, and we're adding a new one in 3.2. Now when you hover over the suggested color, we'll update the element with that color so you can immediatelly see how the suggested color will work in your design.`), mdx(\"video\", {\n    src: \"/blogs/polypane-3-2/contrastupdate.mp4\",\n    className: \"imgshadow\",\n    controls: true\n  }), mdx(\"h3\", {\n    \"id\": \"reload-css\"\n  }, `Reload CSS`), mdx(\"p\", null, `Polypane's live reloading is a super powerful and low-effort way to get live and hot reloading set up regardless of which web server you use. It will update CSS and images in place for you with zero configuration. But sometimes you don't need live reloading, you just want to edit a single CSS file and see the changes.`), mdx(\"p\", null, `With our new reload css function, you can press `, mdx(\"kbd\", null, `alt + R`), ` or right-click the reload button and Polypane will reload just the CSS without refresing the page. It's a small feature but should be helpful!`), mdx(\"h3\", {\n    \"id\": \"random-pane-sizes-changes\"\n  }, `Random pane sizes changes`), mdx(\"p\", null, `For a long time Polypane had the `, mdx(\"kbd\", null, `Shift cmd n`), ` shortcut. In the focus layout, it would resize the pane to random dimensions and in horizontal and vertical layouts it would add a new pane with random dimensions`), mdx(\"p\", null, `We've now updated the shortcut to resize all visible panes, regardless of layout. This is a great way to stress-test your responsive design and find screen sizes you might have overlooked. `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `It's also a lot of fun!`)), mdx(\"h3\", {\n    \"id\": \"https-viewer\"\n  }, `HTTP(S) Viewer`), mdx(\"p\", null, `Polypane now announces itself to the operating system as a HTML file viewer that supports HTTP and HTTPS. This means it will show up in lists of browsers that various tools might show you.`), mdx(\"p\", null, `Two such tools, `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://tumult.com/whisk/\"\n  }), `Whisk`), ` and `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://tumult.com/hype/\"\n  }), `Hype`), `, both by the awesome folks at `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://tumult.com/\"\n  }), `Tumult`), `, have added us to the whitelist in their tools so opening anything from them in Polypane is now super easy. Check out this video by Hype to show you how it works together with Polypane: `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://blog.tumult.com/2020/06/15/preview-all-your-responsive-layouts-at-once-with-hypes-new-polypane-integration/\"\n  }), `Hype and Polypane`)), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, `If you use an app and would like it to support Polypane, let us know and we'll reach out to them.`)), mdx(\"h3\", {\n    \"id\": \"ui-updates\"\n  }, `UI updates`), mdx(\"p\", null, `We have a few smaller UI changes and improvements that will make using Polypane a little easier. This is part of an ongoing process to make the Polypane UI more friendly.`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Polypane now starts about 1 second faster, and interactions between different panels are now about 300ms faster.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `The scroll sync icon in the header now shows a \"`, mdx(Close, {\n    width: 10,\n    height: 10,\n    strokeWidth: \"16%\",\n    mdxType: \"Close\"\n  }), `\" if it's disabled.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `You can now permanently disable the cache across browser sessions.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `We give a warning for pages that have CSRF tokens or SSO login. Logging in on those pages only works in the side panel or when isolated panes are on.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Documentation from the help menu is now opened in the side pane for easy access.`)), mdx(\"h2\", {\n    \"id\": \"full-changelog\"\n  }, `Full changelog`), mdx(\"p\", null, `There's more new features, improvements and fixes in this release so read through the full changelog below. All new features are fully documented in our `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/\"\n  }), `docs`), ` too.`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Accessibility panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Real viewport sizes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Reload CSS option`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Elements panel: new element tooltip`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Elements panel: visibility toggle`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Elements panel: toggle box model visibility`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Color contrast previews new color on hover`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Right-click options for reload`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Polypane now registers as http/https protocol viewer to support Tumult Whisk and other tools`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Random size shortcut`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Preact devtools`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Overlays to warn for pages with CRSF or SSO`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Simplified getting started page`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Startup speed improved by ~1s`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta panel now warns for `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `user-scalable=no`), ` in viewport`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: Shows line-height in overview`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: Long list of classes are now scrollable`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `window.__polypane`), ` object now also has the zoom value`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Overlays popover has a \"clear overlay\" button at the top`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` All overlays now have additional information`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Disable cache can now be set to permanent in the menu`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Scroll sync icon now has a \"`, mdx(Close, {\n    width: 10,\n    height: 10,\n    strokeWidth: \"16%\",\n    mdxType: \"Close\"\n  }), `\" when it's off`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements & Live CSS panels: selecting an element no longer triggers a click`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Modes have been renamed to Layouts`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Vertical layout has less horizontal padding`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` LiveCSS uses the same selection mechanism as Elements panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Documentation and help is now opened in the side browser`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Click handling performance improvements`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Faster style detection`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` First launch has zoomed out panes so more are visible`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Emulation is now re-applied when devtools are opened`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Workaround for stale devtools after opening a pane`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Panes in Vertical layout no longer overlap when they are higher than the viewport`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Editing attributes with a textnode selected now edit the element's attributes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Side panels should no longer disappear`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Polypane can no longer get into a reloading loop`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Workspace import menu is cleared after importing`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Hide menu bar is now removed on Linux`)), mdx(\"h2\", {\n    \"id\": \"getting-polypane-32\"\n  }, `Getting Polypane 3.2`), mdx(\"p\", null, `Polypane will automatically update on Mac and Windows. Linux users need to download the new version from\n`, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/download/\"\n  }), `the download page`), ` and if you're on Mac and Windows but don't want to wait on the update popup, you can find\nyour download there as well.`), mdx(\"p\", null, `If you don't have Polypane yet there is a free 14 day trial available. `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/pricing/\"\n  }), `Get it here`), `.`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":6,"tableOfContents":{"items":[{"url":"#accessibility-panel","title":"Accessibility panel"},{"url":"#real-viewport-sizes","title":"Real viewport sizes"},{"url":"#elements-panel-improvements","title":"Elements panel improvements","items":[{"url":"#overlay-updates","title":"Overlay updates"},{"url":"#reload-css","title":"Reload CSS"},{"url":"#random-pane-sizes-changes","title":"Random pane sizes changes"},{"url":"#https-viewer","title":"HTTP(S) Viewer"},{"url":"#ui-updates","title":"UI updates"}]},{"url":"#full-changelog","title":"Full changelog"},{"url":"#getting-polypane-32","title":"Getting Polypane 3.2"}]},"excerpt":"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…","frontmatter":{"title":"Polypane 3.2: Accessibility and viewport sizing","cover":"/img/mail/icon.svg","date":"2020-06-12","updated":null},"fields":{"slug":"/blog/polypane-3-2-accessibility-and-viewport-sizing/","date":"2020-06-11T22:00:00.000Z","ogFileName":"polypane-3-2-accessibility-and-viewport-sizing"}}},"pageContext":{"slug":"/blog/polypane-3-2-accessibility-and-viewport-sizing/"}},"staticQueryHashes":["4164364741","425175329"]}