Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
See this question on the Webmasters site - webmasters.stackexchange.com/questions/2494/… –  ChrisF May 10 '11 at 11:44
9  
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 '12 at 15:58
3  
Also, see this question regarding fixed-width vs fluid layout. –  ghoti Jan 10 '12 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 '12 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 '12 at 10:49

13 Answers 13

up vote 47 down vote accepted

That really depends on where you are in the world. Worldwide 1024x768 is still the most common, however 1366x768 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. There are few known measurements for this statistic, aside from the Google Browsersize information.

share|improve this answer
5  
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 '12 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 '12 at 13:38

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.

share|improve this answer
3  
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 '12 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 '12 at 10:45

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

share|improve this answer

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

share|improve this answer
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 '13 at 10:44

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.

share|improve this answer

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/

share|improve this answer
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 '12 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 P. Jan 11 '12 at 18:16

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

share|improve this answer

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.

share|improve this answer
    
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 2 days ago

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

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

share|improve this answer
    
"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 '12 at 22:50
    
@DA01 - Thus, the different CSS for different devices. –  corvec Jan 30 '12 at 22:32
    
That helps, but I was mainly addressing the 'optimized for'. Ideally you 'optimize for' all devices. –  DA01 Jan 31 '12 at 6:03

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

share|improve this answer
2  
Seems that even internally Microsoft is ignoring the mobile landscape. ;) –  DA01 Nov 30 '12 at 1:23

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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