Common screen resolution?

  • I'm developing a web application which is quite information heavy. This means that every pixel available in the screen for display helps a lot, to avoid the UI looking too cluttered and to display relevant data.

    I was wondering: which is the "common" screen resolution? Years ago it was something like 1024×768, but nowadays it must be something much higher. I can't rely on what I use as I'm a developer and I probably have bigger screens and resolution than the average Joe user.

    So, where can I find the currently recommended resolution for webapps?

    You shouldn't be using screen resolution to guide your decisions; you need to know the sizes of browser windows. Especially as monitors get huge you *cannot* assume that people will take a browser full-screen; that would be too big to read most sites.

    Thinking in terms of screen-resolution, like it is some static parameter, sounds anachronistic. @MonicaCellio got the point right. Real-estate allocation for an application is dynamic and is in the hands of the user.

    Note: With responsive design on the rise, many people have come to realize that it is also important to consider what is a good maximum **column** width, and that the readablity of text often can be ensured by approaching the width of content specific to font size, i.e. *35-40em* for a solid text width.

    The 'virtual' resolution of PCs and mobile devices isn't the same as the hardware resolution due to scaling settings in the device OS. To see this lookup the "viewport" size of your mobile phone and then check its hardware resolution. They are likely different. Its the virtual res you should be working to.

  • JonW

    JonW Correct answer

    10 years ago

    That really depends on where you are in the world. Worldwide 1366x768 is still the most common, however 1920x1080 is the only resolution that is actually increasing in take-up (presumably because this seems to be the standard widescreen for modern laptops).

    The website StatCounter.com should help give you some further knowledge on this.

    HOWEVER, bear in mind that just because certain resolutions are more common than others this it doesn't actually take into account how wide the user has their browser window. Unfortunately, there are few known measurements for this statistic (Google analytics used to provide this, but have ceased supporting it).

    Also, the world-wide averages for this sort of data may (will) not be the same as those of your user base. *Until you sample your ACTUAL users, you don't know what they're using.* Therefore your best bet is to design your layout to work at multiple (and varying) resolutions.

    For data on the distribution of screen resolution among Android and iOS smartphones and tablets, see the 'Resolution' section toward the end of http://opensignalmaps.com/reports/fragmentation.php. Conveniently here, screen resolution is more likely to approximate viewport/browser window dimensions on smartphones and tablets than on laptops and desktops. Inconveniently for Android, the platform's fragmentation is reflected pretty starkly in the wide distribution of screen resolutions. This would probably make fluid layout for mobile devices a good idea.

    Just as an update, 1366x768 has overtaken 1024x768 by quite a bit since this answer was posted.

    @DangerZone Good point. Sadly StatCounter doesn't offer links to 'current' as they always require suffixing a date range (hence several edits on this answer over the years!). Ive amended the answer with up-to-date stats. I guess I'll have to do the same in a year or so too!

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM