{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/device-testing-is-not-enough/","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\": \"Device testing is not enough\",\n  \"cover\": \"/blogs/devicesizes/cover.svg\",\n  \"date\": \"2021-05-27\"\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, `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. \"Does it look good on my iPhone? Does it look good on my Samsung Galaxy Tab?\"`), mdx(\"p\", null, `But reality is different.`), mdx(\"h2\", {\n    \"id\": \"device-sizes-are-not-browser-sizes\"\n  }, `Device sizes are not browser sizes`), mdx(\"p\", null, `In the last 30 days, this website was shown on 485 unique devices, but `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `well over 3000 unique browser sizes`), `.`), mdx(\"p\", null, `The browser size is not the same as device size, `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `even on mobile and tablets`), `. But browser size is what your site is actually shown at.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `If you only test device sizes you miss the in-between sizes your real visitors use.`), ` On mobile, different browsers have different viewport heights. On tablet a browser might be shown at any size in split view. And on desktop, many people simply don't run their browser full screen all the time.`), mdx(\"h2\", {\n    \"id\": \"you-need-a-browser-size-wall\"\n  }, `You need a browser size wall`), mdx(\"p\", null, `Good responsive design doesn't care about devices, and neither do your website visitors. So whatever tool you use to test responsive designs should not force you to only use device sizes. Unfortunately, most only support devices.`), mdx(\"p\", null, `Device sizes are not browser sizes. Testing only devices makes no sense.`), mdx(\"p\", null, `To prove this to you, we built a tool that gives you an overview of all the browser sizes your real visitors use:`), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/responsive-website-test/\"\n  }), mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"src\": \"/og-custom/responsivewebsitetest.png\",\n    \"alt\": \"This is your browser size wall\"\n  })))), mdx(\"p\", null, `Connect with it to your Google Analytics and we'll show you an overview of the actual browser sizes used by your visitors in the last 30 days. You'll quickly see how many different sizes your site is being shown at, and how much variance there is even on mobile sizes.`), mdx(\"p\", null, `We're only showing you the top 100 most used browser sizes, since scrolling through hundreds, let alone thousands of them is is not great (believe us, we tried).`), mdx(\"p\", null, `Optimizing your site for just a few devices is a losing strategy, and doesn't fit how real people experience your website.`), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/responsive-website-test/\"\n  }), `Check out your browser size wall`)), mdx(\"h2\", {\n    \"id\": \"match-reality-by-using-polypane\"\n  }, `Match reality by using Polypane`), mdx(\"p\", null, `Checking just devices will have you missing all the in-between sizes that your real users use. You need a different model if you want to build sites that work for `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `all`), ` your users. You don't need devices, but `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `panes`), `.`), mdx(\"p\", null, `Panes in Polypane are freeform, and you can add however many you want. You can size them in many different ways:`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `1. Yes, you can select from any of our 25+ devices (with full emulation)`)), mdx(\"p\", null, `Our devices are divided into separate categories and are always up to date with full emulation and the ability to switch between device size and viewport size.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `2. Base them on on your @media query breakpoints`)), mdx(\"p\", null, `Polypane parses your CSS as the page loads and extracts all the breakpoints from your CSS media queries. With a single click you can get an overview of all the sizes the site has been styled for, or you can add them one by one.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `3. Built-in and downloadable pane workspaces based on CSS framework sizes`)), mdx(\"p\", null, `CSS frameworks like Bootstrap and Tailwind come with a set of built-in media queries. We have ready-made overviews for the 11 most used CSS frameworks.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `4. Drag to resize any pane on screen!`)), mdx(\"p\", null, `Panes in Polypane are freeform. If you need one to be a little big, grab the edge and resize it.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `But we have one more way:`), ` take the browser size wall one step further and create your own Polypane workspace from the sizes your actual visitors use the most.`), mdx(\"h3\", {\n    \"id\": \"create-your-own-browser-size-workspace\"\n  }, `Create your own browser size workspace`), mdx(\"p\", null, `After you checked your `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/responsive-website-test/\"\n  }), `browser size wall`), `, you'll want to get that info into Polypane. Use our create workspace tool to create a workspace based on the browser sizes used by your visitors.`), mdx(\"div\", {\n    style: {\n      marginTop: '2rem',\n      textAlign: 'center'\n    }\n  }, mdx(\"svg\", {\n    style: {\n      margin: \"0 auto\",\n      display: \"block\"\n    },\n    width: \"137\",\n    height: \"60\",\n    viewBox: \"0 0 137 60\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, mdx(\"defs\", null, mdx(\"linearGradient\", {\n    id: \"sqgradient\",\n    gradientTransform: \"rotate(45)\"\n  }, mdx(\"stop\", {\n    offset: \"0\",\n    stopColor: \"rgb(44, 130, 173)\",\n    stopOpacity: \"1\"\n  }), mdx(\"stop\", {\n    offset: \"1\",\n    stopColor: \"rgb(103, 178, 111)\",\n    stopOpacity: \"1\"\n  }))), mdx(\"rect\", {\n    width: \"53\",\n    height: \"60\",\n    rx: \"8\",\n    fill: \"url(#sqgradient)\"\n  }), mdx(\"rect\", {\n    x: \"60\",\n    width: \"43\",\n    height: \"50\",\n    rx: \"8\",\n    fill: \"url(#sqgradient)\"\n  }), mdx(\"rect\", {\n    x: \"110\",\n    width: \"27\",\n    height: \"37\",\n    rx: \"8\",\n    fill: \"url(#sqgradient)\"\n  })), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/create-workspace/\"\n  }), `Create your own browser size workspace`)), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `The best sizes to use are the sizes your own visitors use`))), mdx(\"h3\", {\n    \"id\": \"add-a-little-random-to-your-panes\"\n  }, `Add a little random to your panes`), mdx(\"p\", null, `Even when you've done all of that, you still won't get to the hundreds or even thousands of unique sizes and of course, you don't have to check them `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `all`), `. But we have one last neat trick up our sleeve.`), mdx(\"p\", null, `With `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `Shift ctrl n`), ` you can slightly tweak the size of all the panes on your screen. Do this a couple of times and you've checked effectively all variations.`), mdx(\"h3\", {\n    \"id\": \"whats-next-try-polypane\"\n  }, `What's next? Try Polypane.`), mdx(\"p\", null, `Device sizes are not enough, and you want a responsive design tool that doesn't force you to use only devices.`), mdx(\"p\", null, `With panes in Polypane, you can use your own CSS breakpoints, your visitors sizes, freeform sizes and yes, even devices. Test your site in all the hundreds or thousands of ways real people experience your site.`), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://dashboard.polypane.app/register/\"\n  }), `Start a free trial today`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":3,"tableOfContents":{"items":[{"url":"#device-sizes-are-not-browser-sizes","title":"Device sizes are not browser sizes"},{"url":"#you-need-a-browser-size-wall","title":"You need a browser size wall"},{"url":"#match-reality-by-using-polypane","title":"Match reality by using Polypane","items":[{"url":"#create-your-own-browser-size-workspace","title":"Create your own browser size workspace"},{"url":"#add-a-little-random-to-your-panes","title":"Add a little random to your panes"},{"url":"#whats-next-try-polypane","title":"What's next? Try Polypane."}]}]},"excerpt":"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…","frontmatter":{"title":"Device testing is not enough","cover":"/blogs/devicesizes/cover.svg","date":"2021-05-27","updated":null},"fields":{"slug":"/blog/device-testing-is-not-enough/","date":"2021-05-26T22:00:00.000Z","ogFileName":"device-testing-is-not-enough"}}},"pageContext":{"slug":"/blog/device-testing-is-not-enough/"}},"staticQueryHashes":["4164364741","425175329"]}