Which minimum browser or screen resolution should I target my web apps?

Question

When making the decision on the minimum requirements for a web application on client machines:

1. Browsers - Which browsers should one target at very minimum
2. Screen Resolution - Which screen resolution should one target at very minimum

To ensure the usability of the application is not compromised

Solution 1

W3Schools (for example) has some statistics on browser displays. As of January 2010:

Higher    1024x768    800x600    640x480    Unknown
76%       20%         1%         0%         3%

The Higher figure links to a new table. From the figures it looks like 1024x768 is the effective minimum screen resolution. However, you should remember that not everybody runs their browser in full screen mode.

There's also a Browser statistics page. The browsers are broken down by version (e.g Firefox). With browsers like Firefox and Chrome it does appear that the majority are using the latest (non beta) versions. I suspect that this is because they auto-update.

Other, more general, statistics sites are available and you should probably consult a range to get a better picture of browser usage and screen resolutions across the internet as a whole.

Solution 2

Instead of targeting a specific browser and resolution, I would start with the assumption that you want your site to usable by as wide a variety of users as possible. Try to make things adapt to different screen sizes and work in all browsers. That said, I think its safe to assume 1024x768 for desktop browsing.

Solution 3

A more global set of statistics indicate that 1024x768 is indeed the most popular resolution, however the distribution of users is very different. Also note that netbooks, they suppose, are helping 800x600 hang on.

In modern browsers you can target ranges with Media Queries. They're awesome. Assuming you don't care about IE – although IE9 promises support for them. Conditional comments can be used to send a lowest-common-denominator-resolution to IE, or JavaScript can be used to dynamically load stylesheets. Loading CSS through JavaScript dynamically is, in my opinion, an awful idea.

A web designer named Jon Hicks recently redesigned his website using them, go there and change the size of your browser window to see an example of how they work. There are layouts from 1- to 4-column, depending on your current maximum viewport width.

Media Queries allow you to not have to stress about things like "Will my site support the iPhone and iPad?" or "How can I target X device's screen size to maintain usability?". You just build designs for as many screen sizes as you want to support and the Media Queries will take care of the rest, depending on the user's browser when they get there.

Solution 4

You can base your decision of the recent statistic about the resolution usage. If you want generic number, you can find some from Net Applications and if you want precise data, you can use Google Analytic on your website for that.

Solution 5

Check the worldwide browser market share statistics

This question provides a comprehensive list of sources to look up worldwide browser market share.

Here are the top 3 2010 averages for StatOwl:

1024x768    26.75%
1280x800    18.69%
1280x1024   11.57%

Here are the top 3 2010 averages for Net Applications:

1024x768    24.27%
1280x800    17.98%
1280x1024   10.83% 

According to the data, your resolution minimum should be 1024x768 but it also depends on your demographic.

If your site is geared toward a more corporate audience stick to 800x600. A lot of corporate networks are still running really old hardware with Windows 2000. If that's the user base you're targeting, using the 'current norm' of screen resolutions may alienate your audience.

View more solutions

Comments

[Admin]

Voted to close as off-topic: see meta.webmasters.stackexchange.com/questions/144/…

[milesmeow]

This can be moved to the User Interface stackexchange.

[Lèse majesté]

It can be, but it probably ought not be. Screen resolution is technically UI-related, but it's also accessibility- and platform-support-related. This is a question that most webmasters are going to be interested in more from a business standpoint than a UI design standpoint.

[DisgruntledGoat]

You should note that w3schools, being a tech site, is NOT representative of the web at large (particularly the browser stats).

[mipadi]

@DisgruntledGoat - good point. I missed the bit about it being their data when I originally read the page.

[Lèse majesté]

Since I don't have the sample size on my own sites to do my own analysis, and I'm too lazy to look for accurate and unskewed data for screen resolutions, I just do a survey of the largest sites on the web--or the largest sites that share my demographic. I figure Google, Amazon, Yahoo, etc. probably spend plenty of resources on this type of usability research that there's no need to attempt to duplicate their efforts. Also, I would use separate portals/spreadsheets for mobile devices if that's a significant demographic for you.

[milesmeow]

I think you mean 1024x768?

[khelll]

The problem is these stats are often self selecting. W3Schools is a fixed width site ~1000 pixels wide. If I had an 800x600 display (or an 800x480 netbook) I wouldn't visit it either.

[Lèse majesté]

Which is why should look at sites which people can't afford to not visit.

[Chris]

I feel 800x600 is a bit low there, what about all the netbooks ?

[mipadi]

@Chris - don't forget this is just visits to W3Schools

[Evan Plaice]

@milesmeow oops, fixed it

[Bevan]

Probably the most important note in this answer: you should remember that not everybody runs their browser in full screen mode.

[Cromulent]

@Bevan Exactly. Running browsers in full screen mode is a Windows / Linux thing. Mac users almost never do.