69

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?

Improve this question
6
  • See this question on the Webmasters site - webmasters.stackexchange.com/questions/2494/…
    – ChrisF
    May 10, 2011 at 11:44
  • 16
    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.
    – Monica Cellio
    Jan 10, 2012 at 15:58
  • 3
    Also, see this question regarding fixed-width vs fluid layout.
    – ghoti
    Jan 10, 2012 at 18:53
  • 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.
    – Kris
    Jan 31, 2012 at 11:00
  • 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.
    – kontur
    Dec 5, 2012 at 10:49

14 Answers 14

Reset to default
58

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).

Improve this answer
4
  • 8
    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.
    – ghoti
    Jan 10, 2012 at 19:03
  • For data on the distribution of screen resolution among Android and iOS smartphones and tablets, see the 'Resolution' section toward the end of 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.
    – jqp
    May 16, 2012 at 13:38
  • Just as an update, 1366x768 has overtaken 1024x768 by quite a bit since this answer was posted.
    – Broots Waymb
    Jul 26, 2016 at 14:10
  • @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!
    – JonW ♦
    Jul 26, 2016 at 14:36
20

Keep in mind that laptops and desktops are no longer the only web-enabled devices. The iPad has a resolution of 1024x768, the iPhone 4 has a resolution of 960x640, assuming you use them in landscape mode.

Improve this answer
2
  • 4
    Afaik the iPhone 4 renders pages as if it would have the old 480*320 resolution. Pages on my 4 aren't half as large as on a 3GS. The extra resolution is only used for font/image rendering is what I'm getting at.
    – Kris9000
    Jan 11, 2012 at 13:41
  • Absolutely valid point. 960 pixsel screen width stays relevant even with desktop screen sizes increasing, because many handheld devices can show this size also. Let alone the fact that websites just are unreadable when they very wide (1600+).
    – kontur
    Dec 5, 2012 at 10:45
16

The choice of minimum screen resolution all comes down to how many users you are willing to exclude.

If you do not have a history of resolution data for your specific users, one option is to use public, global usage statistics as a guideline. Using one such source of global data, I created the following graph to help convey the state of desktop screen widths at a glance.

enter image description here

Improve this answer
1
  • Reader beware that this link is really out-of-date.
    – Ricardo
    Nov 24, 2021 at 19:53
12

"but nowadays it must be something much higher"

Every answer in here seems to ignore the entire mobile world.

Sure, desktop screens are getting bigger. But everyone is also using mobile devices. So much of the web is now being accessed on phones and tablets.

Adaptive design is really the path to take.

Improve this answer
1
  • 2
    YES. This is the key point. Fluid web design is vital because so many people are accessing web sites from phones and tablets these days. The resolution trend is fragmentation, not expansion.
    – AlexC
    Jan 31, 2013 at 10:44
6

Why don't you design adaptively for 'whatever you have available'?

With javascript you can find out the browser window size and make some stylesheet changes. for instance, if you have a graphically rich, big image background with a 960 px column, the background image is not needed for those running 1024-768, so you don't have to load it. You can also modify your font size to make best use of the on-screen real estate available.

Improve this answer
4

Most popular resolution in 2011 is 1280x800. 18.09% of users on the internet uses it.

Here is top 10 resolutions for 2011: http://www.superiorwebsys.com/blog/93/Most_Common_Screen_Resolutions_in_2011/

Improve this answer
2
  • 1
    +1 for the reference, but with 1024x768 close behind and being the lower of the two top resolutions this should perhaps have higher consideration despite slightly lower percentage.
    – Roger Attrill
    Jan 11, 2012 at 13:11
  • 1024 will be around for a while + new mobile devices. So I would recommend designing sites for this resolution, if you are not planning in doing stretchable design.
    – Michael
    Jan 11, 2012 at 18:16
2

I agree with Jon that one should be careful to use the full screen resolution as a base when designing web apps. He is also right when he states that the wide screen variant of 768 is very common these days.

I recently experienced, however, some very good reasons to decrease my own screen resolution policy. TVs and multimedia laptops now uses the HD standard as their resolution. That means that it is a good chance that several users to have 1280×720 as their resolution. Targeting 768 as height might be a little bit to much for many users.

See also: http://en.wikipedia.org/wiki/Screen_resolution

Improve this answer
2

Yes, try to consider a Flexible Layout. If you plan to use every pixel available, then covering the full screen is the best solution, with the need to use of javascript. You should go through the Responsive Web Design from ALA and have a look at the example. When viewing this example, try to resize your browser and see how the content reacts. This way your website can look great on any screen, may it be desktop, laptop, tablet of phone.

Improve this answer
1
  • please note if you go down the path of using every single pixel available it can make your text harder to read by your readers.
    – Chad
    Jul 27, 2014 at 23:34
2

If you want to be safe with desk/laptop screens using a static layout, keep using a minimum of 1024x768. But the better option is design a fluid (flexible) layout.

Improve this answer
2

A few things to consider:

  1. Who is this app for? If it's internal facing (ie corporate environment), talk to IT and see what resolution employees screens are set at. Especially look at the employees that would be working in the app the most.
  2. If it's a public facing app, think about what data you have about your users' resolutions. If you're redesigning, check the analytics on the current site and get a sense of what resolutions your users are running. You might notice a pattern here (ie people tend to have very high resolutions since they are power users, etc), but chances are it'll be all over the place.
  3. Think about the data you're presenting. If it's a lot of grids, maybe a fluid layout is best. Then the user can stretch their screen to show more of the data they need.

Designing for 1024 is a safe route for the web, but it's lazy if you aren't trying to learn more about your users before making a decision.

Improve this answer
2

Microsoft recently posted their telemetry data in this area for Windows 7 users:

Windows 7 screen resolutions chart

You can see that (at least for users who are still on the upgrade cycle), there's a huge amount of users running 16:9 and 16:10 screens instead of 4:3 (and the plurality of them run at 1366×768).

Improve this answer
1
  • 2
    Seems that even internally Microsoft is ignoring the mobile landscape. ;)
    – DA01
    Nov 30, 2012 at 1:23
1

I have been targeting 1280 X 1024, with a layout the will be adaptive if mobile constraints are a factor.

Otherwise, I usually defer to analytics, and try to be mindful of the top resolutions for the given site.

Improve this answer
0

The 1024*768 should still remain as a common sense. Otherwise it really depends on your audience. If you make a website or app for designers for example, you should optimize for much higher resolution like 1680*1050.

You should test it or ask from your desired audience, but 1024*768 is still a must!

In an ideal world there would be different (CSS) styles for different resolutions and devices. :)

Improve this answer
3
  • "If you make a website or app for designers for example, you should optimize for much higher resolution like 1680*1050." Most 'designers' have iPhones.
    – DA01
    Jan 10, 2012 at 22:50
  • @DA01 - Thus, the different CSS for different devices.
    – corvec
    Jan 30, 2012 at 22:32
  • That helps, but I was mainly addressing the 'optimized for'. Ideally you 'optimize for' all devices.
    – DA01
    Jan 31, 2012 at 6:03
0

Common Projector Resolutions:

  • XGA = 1024 x 768 pixels
  • WXGA = 1280 x 800 pixels
  • HD = 1920 x 1080 pixels
  • 4K = 4096 x 2160 resolution
Improve this answer
2
  • 1
    Could you expand on this? And what do you mean by projector resolutions?
    – Mayo
    Jul 26, 2016 at 13:09
  • example: if you have a PT-EX600U LCD projector, when you plugged in that to your computer then your screen resolution will change to: 1028 x 768 pixels.
    – Bashir Noori
    Jul 28, 2016 at 4:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.