Let’s start with the graphed data.
Writers are supposed to know their target audience. Designers are supposed to know their target audience. Programmers are supposed to know their target audience. Since web development is a combination of all three, surely that goes triply for those of us who are web developers: we must know our target audience.
Part of that involves knowing exactly how large a canvas we have to build our web pages on. Yes, in theory we should all be building sites with liquid layouts and minimum widths and so on. But as developers we make choices every day about how wide a range of browsers we’re going to support; nobody bothers making sites IE3-compatible unless they have a specific reason to. Similarly, we shouldn’t have to beat ourselves up for building web sites that don’t work with the tiniest, most outdated screens… or should we?
This is exactly the question I wanted to find out. Common wisdom today is that most users are using a 1024×768 or larger display, and you should therefore target that size. I am here to say this notion is incomplete, for three reasons:
- Screen resolutions no longer fit into neat categories like 640×480, 800×600, or 1024×768.
- Screen resolution is irrelevant; browser window size is the only thing that matters.
- Window size is highly variable; users often browse with windows that do not fill the screen.
I wanted to know what the real available screen size would be, so I added a small JavaScript tester to the top page of one of my web sites. After a few thousand hits I graphed the data, which you see above.
Reading the Graph
In all cases except the printed numbers, darker colors indicate logarithmically more requests with those values. Printed numbers (black) label screen sizes (green diamonds, red lines). Blue squares mark window sizes.
Observations
I was surprised by these results. I thought I would see a lot more consistency in the window sizes, but only two obvious trends appear:
- While a lot of users do appear to have their browser window filling the width of their screen, the actual browser window height is not consistent at all. In practical terms, this means identifying how much room you have “above the fold” is difficult.
- There seems to be a fairly hard floor at 480 pixels in height; I do not know why.
I also saw far more variations in actual screen resolution than I expected, as well as large numbers of wide screens. A few users visited with extraordinarily large screens. Here is the actual summary data for the different screen sizes:
| 800 | 840 | 1024 | 1152 | 1200 | 1274 | 1280 | 1360 | 1400 | 1440 | 1536 | 1600 | 1680 | 1920 | 2376 | 2560 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1600 | .14% | .18% | ||||||||||||||
| 1466 | .09% | |||||||||||||||
| 1280 | .09% | |||||||||||||||
| 1200 | 1.28% | 3.65% | ||||||||||||||
| 1080 | .18% | |||||||||||||||
| 1050 | .54% | 11.72% | ||||||||||||||
| 1024 | 16.28% | .05% | .14% | |||||||||||||
| 1000 | .05% | |||||||||||||||
| 960 | 1.76% | .05% | ||||||||||||||
| 958 | .05% | |||||||||||||||
| 900 | 10.42% | |||||||||||||||
| 870 | .05% | |||||||||||||||
| 864 | 2.66% | |||||||||||||||
| 854 | .23% | |||||||||||||||
| 819 | .09% | |||||||||||||||
| 800 | 18.71% | |||||||||||||||
| 768 | 27.19% | .05% | 1.49% | .14% | ||||||||||||
| 720 | .09% | .36% | ||||||||||||||
| 640 | .05% | |||||||||||||||
| 630 | .05% | |||||||||||||||
| 600 | 2.12% | .14% | ||||||||||||||
| 480 | .05% | |||||||||||||||
| Total | 100% | 97.84% | 97.79% | 70.24% | 67.40% | 67.27% | 67.22% | 28.40% | 28.27% | 27.73% | 17.31% | 17.27% | 15.96% | 4.24% | .41% | .32% |
Other Results
While collecting this data, I also picked up some other information.
As far as display bit depth goes, I was surprised by how many users have full-color displays. 97.6% of requests indicated 24-bit or 32-bit displays. 2.80% indicated 16-bit and .05% indicated 8-bit. I can’t say I’m sad that 8-bit displays are so scarce. Spot checks indicated the 16-bit displays were at a variety of screen sizes, and not just confined to the lower end of the scale.
Also interesting were the DPI reports. (This is only reported by Internet Explorer.) 96.97% indicated 96dpi as the screen resolution. 2.27% indicated 120dpi, and .15% each for 135dpi and 144dpi. Almost all browsers reported the screen DPI and the “logical” DPI (what the browser uses when scaling the page for the display) were the same, at 99.5%. However .5% indicated the display was being magnified by 25%.
