How widespread are today's responsive designs among the world's most visited websites? What are the most common site widths and font sizes? In codeitdown, we conducted a small case study that pretends to answer these and some other important design questions.
We collected data for the templates of 78 of the top 100 sites in the Alexa ranking. This ranking is based on visit counts by the Alexa tool bar and by a code similar to that of Google Analytics in the case of the paid service.
Why just 78? The initial idea was to inspect all the sites in Alexa's Top 100. However, 17 of those sites are targeted to China, with exclusive services and content. Accesing these sites imposed an additional difficulty and it was decided to leave them out. Five other sites were out of service or not responding at the time of gathering data. This leaves the total of 78 sites.
On the other hand, sites that target specific regions or countries but are accesible worldwide were analyzed. Four russian, three japanesse, and three UK sites are part of the top 100, among others from India, Brasil, Spain, Italy, Taiwan, Mexico, Canada, Turkey, Australia and Poland. The rest are all international sites.
What we Measured
We first checked if the site's main template complied with responsiveness, understood as adapting to different viewport sizes (using CSS media queries usually). We classified sites as responsive or fixed-width. For fixed width sites, we measured the pixel width of the body. We seperately measured the max-width for responsive sites in order to get more light on the array of devices being targeted. Such widths were classified in ranges for the purpose of presenting the data.
Font size data was also gathered for every site. We looked for the body copy computed pixel font size, or the predominant size in sites without an article format. A lot of sites have font size change with viewport size. These were classified in a separate category as having a "responsive" font size.
Enough! Let's get to the fun stuff.
Responsiveness and Width
The above graph shows that only 11% of Alexa's Top 100 sites still use fixed widths. The rest has opted for a responsive approach with a max-width. This was expected due to the thriving of responsive design and its ease of impletation.
40% of responsive websites have a max-width between 900 and 1000 pixels, while 26% go above 1800px, as the following graph shows:
It was unexpected to find a large number of websites with max-widths below 1000px because the most common computer display resolution today is 1366px.
More than half of fixed-width sites are between 900px and 1000px wide. They seem to be targetting the traditional 1024px wide displays which have ~960px viewports. As said, this is no longer the most common display resolution (1366px now).
As already mentioned, we also measured the main font size of the content. Font sizes that change with the viewport through media queries are most common. Fixed font sizes are between 13px and 14px normally, with lower and higher values being less common. Responsive font sizes were almost always implemented through the use of media queries only, not the vw and vh viewport units. These units impose an additional difficulty as explained in CSS Responsive Font Size.
- Responsive designs are the rule, not the exception. Most famous websites have incorporated media queries and they are certainly more common among new sites.
- Most famous websites with have their width limited to less than 1100px, whether responsive or fixed.
- One third of responsive websites have maximum widths of more than 1600px.
- Almost no websites have fixed widths of more than 1400px.
- Few fixed width websites are less than 700px wide.
- 13px and 14px are the most common font sizes. Few sites use 12px or less, which was quite common five years ago. Still few go above 15px.
- The use of font sizes that change with the viewport (through media queries) is not extended, but it's expected to increase during the next years.