Designing a site involves optimizing the quality of the assets, such as images, videos, and other content that can be embedded into the site.
In our experience, many users find it challenging to get the preferred clarity or fit (frame) for their content, like an image, video, or HTML package, within the tile or section because of the wrong dimensions and/or proportions. Sometimes, the clarity (resolution) is sacrificed just to compensate for rendering the content the right or preferred frame, and vice versa.
In this case, quality is influenced not just by the dimension of the content (height, width, resolution) but also by the proportion of these dimensions. Where should it be made proportionate to? The content should be proportionate to the device or screen resolution on which the site will be rendered!
That said, it makes the most sense to refer to the commonly used screen resolutions in the current market, though the content can always be optimized for any preferred or target screen resolution, for a better viewing experience.
To better assist you in keeping your content up-to-date with the market, we will summarize related statistics at least every 6 months and publish them in this article.
Desktop screen resolution statistics
The top desktop screen resolution as of May 2021 market is 1366x768 at 23.42% share.
From the same chart, we can gather the following:
78.17% of the screen width is between 1280px and 1920px
67.56% of the screen width is between 1360px and 1920px
77.60% of the screen height is between 768px and 1080px
Mobile screen resolution statistics
The top mobile screen resolution as of May 2021 market is 360x640 at 24% share.
The statistics are from a third-party fact sheet published by Statcounter Global Stats.
Use resolution data to improve your mobile layouts. The guide to designing for mobile in Zoomforth covers the practical steps.