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 (according to Alexa) to see how they deal with Responsive design.
Top 50 websites and responsive design
Out of the 50 websites, 12 websites defined no media queries at all, almost one in 4! For the most part these sites were targeted at China and Asia in general. It could be that they use browser sniffing instead to show a mobile version for smaller screens, or they have the data that people use their mobile apps instead of the web.
In the data below, I chose to discard the 12 websites without media queries. Here's some quick stats:
Media Queries
The number of media queries in itself doesn't really say anything about how responsive a website really is, but it's a good proxy. So we can say that the most responsive popular websites are twitter.com, netflix.com and livejasmin.com.
Widths
There is quite a large range of widths that media queries have been defined for. The smallest is a max-width of 119 pixels, on aliexpress.com, and the largest is a min-width of 2560 pixels on bing.com. That means the total range of the top 50 websites in the world is 2441 pixels wide.
Ranges
In order to see how responsive websites really are, we can also use their total range (the difference between their widest width and smallest width) of the media queries as a proxy. The higher the range, the more widths a website supports.
The website with the widest range of media query widths is Twitter.com with a range of 1975 pixels (a minumum of 325 to a maximum of 2300 pixels). Runners-up are Livejasmin.com with 1850 pixels, Microsoft.com with 1459 pixels and Bing.com with 1440 pixels.
We already filtered out the websites without any media queries, but if you look at the websites with the least amount of range something else appears, there are a further 4 sites that have a range of zero, meaning that their smallest and largest breakpoint are the same; they have just one media query or one width defined in them.
If we discard those, we can also see which of the responsive websites are the least responsive: tmall.com has a range of just 150 pixels, followed by linkedin.com with 207 pixels, taobao.com with a range of 210 pixels and imdb.com with a range of 435 pixels. For all these sites it seems that they use different methods to target mobile devices.
Some quick stats again:
If we compare the stats we can surmise that the websites with the most media queries also tend to have the widest range, and that the most popular websites on average have media queries for a range of about 800 to 900 pixels.
Start and end widths
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 from one starting at 1024 pixels, for example.
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 might not surprise you, as it's commonly seen as the minimum width due to the iPhone SE and smaller android phones having this width. The average starting point is much larger though, 580 pixels. This is due to some outliers in the media queries. For example, bilibili.com's starts at 1400pixels wide.
The mean is 'just' 440 pixels wide. If you built your website mobile first then 440 pixels might indeed be the first width where you want to add new styling. (This website's first media query is 480px).
On the other end of the spectrum, the average widest media query is 1439 pixels, with a mean of 1400. 1440px is a common (wide) desktop width, especially for designers, so this might be a natural stop in the width most websites need. In the future, when ultra-wide monitors become more prominent, we might see even wider media queries.
Conclusion
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 advice to take away from this is to make sure that the media queries and responsive widths that you choose work well for your 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 or something wildly different, and both can be valid outcomes.
Are you wondering how your site compares? Get Polypane
