{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/responsive-css-breakpoints-for-the-top-50-websites-2019/","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\": \"Responsive CSS breakpoints for the top 50 websites 2019\",\n  \"cover\": \"\",\n  \"date\": \"2019-05-27\",\n  \"type\": [\"reference\"]\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, `With Polypane, it's simple to see a website in all the responsive widths it's designed for. Polypane intelligently\nparses the CSS and finds all the media query declarations. We looked at the top 50 websites worldwide (according to Alexa)\nto see how they deal with Responsive design.`), mdx(\"h2\", {\n    \"id\": \"top-50-websites-and-responsive-design\"\n  }, `Top 50 websites and responsive design`), mdx(\"p\", null, `Out of the 50 websites, `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `12 websites defined no media queries at all`), `, almost one in 4! For the most part these sites were targeted at\nChina and Asia in general. It could be that they use browser sniffing instead to show a mobile version for smaller screens,\nor they have the data that people use their mobile apps instead of the web.`), mdx(\"p\", null, `In the data below, I chose to discard the 12 websites without media queries. Here's some quick stats:`), mdx(\"h2\", {\n    \"id\": \"media-queries\"\n  }, `Media Queries`), mdx(\"div\", {\n    className: \"kpilist\"\n  }, mdx(\"div\", {\n    className: \"kpi\"\n  }, mdx(\"span\", null, \"406\"), \" Total\"), mdx(\"div\", {\n    className: \"kpi\"\n  }, mdx(\"span\", null, \"10.7\"), \" Average\"), mdx(\"div\", {\n    className: \"kpi\"\n  }, mdx(\"span\", null, \"9\"), \" Median\"), mdx(\"div\", {\n    className: \"kpi\"\n  }, mdx(\"span\", null, \"3\"), \" Mode\"), mdx(\"div\", {\n    className: \"kpi\"\n  }, mdx(\"span\", null, \"29\"), \" Most for a single site \", mdx(\"i\", null, \"(twitter.com, netflix.com, livejasmin.com)\")), mdx(\"div\", {\n    className: \"kpi\"\n  }, mdx(\"span\", null, \"1\"), \" Least for a single site \", mdx(\"i\", null, \"(tmall.com, Bilibili.com)\"))), mdx(\"p\", null, `The number of media queries in itself doesn't really say anything about how responsive a website really is, but it's a good\nproxy. So we can say that the most responsive popular websites are twitter.com, netflix.com and livejasmin.com.`), mdx(\"h2\", {\n    \"id\": \"widths\"\n  }, `Widths`), mdx(\"p\", null, `There is quite a large range of widths that media queries have been defined for. The smallest is a max-width of 119\npixels, on aliexpress.com, and the largest is a min-width of 2560 pixels on bing.com. That means the total range of the\ntop 50 websites in the world is 2441 pixels wide.`), mdx(\"h3\", {\n    \"id\": \"ranges\"\n  }, `Ranges`), mdx(\"p\", null, `In order to see `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `how`), ` responsive websites really are, we can also use their total `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `range`), ` (the difference between their\nwidest width and smallest width) of the media queries as a proxy. The higher the range, the more widths a website supports.`), mdx(\"p\", null, `The website with the widest range of media query widths is Twitter.com with a range of 1975 pixels (a minumum of 325 to\na maximum of 2300 pixels). Runners-up are Livejasmin.com with 1850 pixels, Microsoft.com with 1459 pixels and Bing.com\nwith 1440 pixels.`), mdx(\"p\", null, `We already filtered out the websites without any media queries, but if you look at the websites with the least amount of\nrange something else appears, there are a further 4 sites that have a range of zero, meaning that their smallest and largest\nbreakpoint are the same; they have just one media query or one width defined in them.`), mdx(\"p\", null, `If we discard those, we can also see which of the responsive websites are the least responsive: tmall.com has a range of\njust 150 pixels, followed by linkedin.com with 207 pixels, taobao.com with a range of 210 pixels and imdb.com with a\nrange of 435 pixels. For all these sites it seems that they use different methods to target mobile devices.`), mdx(\"p\", null, `Some quick stats again:`), mdx(\"div\", {\n    className: \"kpilist\"\n  }, mdx(\"div\", {\n    className: \"kpi\"\n  }, mdx(\"span\", null, \"1975px\"), \" Total range\"), mdx(\"div\", {\n    className: \"kpi\"\n  }, mdx(\"span\", null, \"859px\"), \" Average\"), mdx(\"div\", {\n    className: \"kpi\"\n  }, mdx(\"span\", null, \"867px\"), \" Median\"), mdx(\"div\", {\n    className: \"kpi\"\n  }, mdx(\"span\", null, \"822px\"), \" Mode (3 times)\"), mdx(\"div\", {\n    className: \"kpi\"\n  }, mdx(\"span\", null, \"1975\"), \" widest for a single site \", mdx(\"i\", null, \"(twitter.com)\")), mdx(\"div\", {\n    className: \"kpi\"\n  }, mdx(\"span\", null, \"150\"), \" Least for a single site \", mdx(\"i\", null, \"(tmall.com)\"))), mdx(\"p\", null, `If we compare the stats we can surmise that the websites with the most media queries also tend to have the widest range,\nand that the most popular websites on average have media queries for a range of about 800 to 900 pixels.`), mdx(\"h2\", {\n    \"id\": \"start-and-end-widths\"\n  }, `Start and end widths`), mdx(\"p\", null, `With just the range it is hard to judge what a site is optimised for. A range of 800 pixels starting at 300px is much different\nfrom one starting at 1024 pixels, for example.`), mdx(\"p\", null, `The most used width to start with is 320 pixels wide, used 6 times (7 if you count the one that starts at 319px). This\nmight not surprise you, as it's commonly seen as the minimum width due to the iPhone SE and smaller android phones having\nthis width. The average starting point is much larger though, 580 pixels. This is due to some outliers in the media\nqueries. For example, bilibili.com's starts at 1400pixels wide.`), mdx(\"p\", null, `The mean is 'just' 440 pixels wide. If you built your website mobile first then 440\npixels might indeed be the first width where you want to add new styling. (This website's first media query is 480px).`), mdx(\"p\", null, `On the other end of the spectrum, the average widest media query is 1439 pixels, with a mean of 1400. 1440px is a common\n(wide) desktop width, especially for designers, so this might be a natural stop in the width most websites need. In the\nfuture, when ultra-wide monitors become more prominent, we might see even wider media queries.`), mdx(\"h2\", {\n    \"id\": \"conclusion\"\n  }, `Conclusion`), mdx(\"p\", null, `As you can see there is a lot of variety in the way the top 50 websites choose to work with responsive design. The best\nadvice to take away from this is to make sure that the media queries and responsive widths that you choose work well for\nyour site. Start mobile first, and work your way up. When you develop your own site, you might find yourself ending up with the same values as the average of these\nor something wildly different, and both can be valid outcomes.`), mdx(\"p\", null, `Are you wondering how your site compares? `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://polypane.app/pricing/\"\n  }), `Get Polypane`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":3,"tableOfContents":{"items":[{"url":"#top-50-websites-and-responsive-design","title":"Top 50 websites and responsive design"},{"url":"#media-queries","title":"Media Queries"},{"url":"#widths","title":"Widths","items":[{"url":"#ranges","title":"Ranges"}]},{"url":"#start-and-end-widths","title":"Start and end widths"},{"url":"#conclusion","title":"Conclusion"}]},"excerpt":"With Polypane, it's simple to see a website in all the responsive widths it's designed for. Polypane intelligently\nparses the CSS and finds all the media query…","frontmatter":{"title":"Responsive CSS breakpoints for the top 50 websites 2019","cover":"","date":"2019-05-27","updated":null},"fields":{"slug":"/blog/responsive-css-breakpoints-for-the-top-50-websites-2019/","date":"2019-05-26T22:00:00.000Z","ogFileName":"responsive-css-breakpoints-for-the-top-50-websites-2019"}}},"pageContext":{"slug":"/blog/responsive-css-breakpoints-for-the-top-50-websites-2019/"}},"staticQueryHashes":["4164364741","425175329"]}