Statistics on CSS Breakpoint usage

Fri, Dec 4th 2015

This article sums up some research and statistics I did on the top 10k websites ranked by alexa about Responsive Webdesign (RWD). It focuses on CSS Breakpoint usage statistics which turn out to be pretty interesting. I hope you like it too!

How many websites are responsive?

As guypo pointed out, the RWD ratio is pretty low (around 11% at the time of his post). However I choosed to use a different criteria on how to consider a website to be responsive. Namely the meta tag viewport was evaluated against containing "width=device-width " interpreting this as a first attempt to be mobile friendly (even if this is not really required as HTML is responsive per default). The share of websites following this definition is about 25%, which is notably higher than the results by guypo. Either a lot changed in the last 12 months or the definitions are too different to compare the results.

The following RWD / CSS breakpoint related stats are based on the 2127 websites out of the 10000 most visited websites ranked by alexa which are considered to be responsive and have at least one media-query.

px, em or rem?

The following stat shows which units are found in media-queries, counting every site once for each unit it is using. Some use more than one unit. The vast majority seems to like "px".

How many breakpoints?

As every media-querie implies some kind of layout change, I counted how many different breakpoints (in px) are employed. The results are pretty surprising to me, considering that all these breakpoints have to be "maintained" somehow. To make this easier to grab I grouped the results in clusters. The 40+ group contains websites with up to 170 breakpoints!

min, max or both?

Which types of media-query have been used? As it turns out, the Mobile First Strategy is not very widespread yet.

Breakpoint positions

To get an overview of which breakpionts (in px) are actually targeted I grouped the breakpoints for every 60px. Breakpoints defined in em or rem are translated into px, assuming 1em/1rem roughly equals 16px. There is a share of sites targeting also 2040+px width, which have been dropped for readability. Interestingly there are even some sites using media-queries for widths from 2040px - 160000px (yes, 160k). Every website counts for each breakpoint it defines at least once.

Which data has been used for these stats?

The most visited 10k websites ranked by alexa have been processed. As this article is focussing on media-query related breakpoints, all of these websites not setting the meta tag "viewport" to "width=device-width" and not defining any media-query have been dropped. This media-query definition source have been taken into account: