About 30% of browser resolutions are below 1280px

If you have anything to do with web page design then you will find this important to you.

We’ve all looked at our screen resolution statistics from time-to-time. The highest percentage screen resolution is usually 1024×768 (XGA). Per Wikipedia “As of July 2002, 1024×768 eXtended Graphics Array was the most common display resolution”.   So, for nearly a decade it has been the most common resolution and it probably won’t be pushed from the statistics top spot for another 5 or more years. That’s what the screen resolution raw statistics show.

The key thing to understand here is that the statistics that you are seeing are pretty close to the RAW data. It needs to be further distilled into the most important web design aspect which is the resolution WIDTH. The second most important aspect is the height or where “the fold” line falls (which needs an article unto itself).

Before we can begin the distillation process of the resolution widths we need to jot down our own website statistics. I used a text editor and did a lot of copying and pasting to get the ordering correct. For the purpose of this article we’ll use the cumulative worldwide figures for the three months June to August 2011 as provided by StatCounter and as seen on Wikipedia. It took less than 20 minutes to distill the figures into something ordered and presentable. You probably won’t need to do this more than once every one or two years. So, it’s time well spent.

The most common computer display resolutions are as follows (notice that 1024×768 is at the top of the table):

Width Height % of Internet Users
1024 768 22.63
1366 768 15.63
1280 800 14.55
1280 1024 7.96
1440 900 6.92
1680 1050 3.75
1920 1080 3.70
1600 900 3.12
1360 768 2.65
1024 600 2.37
1152 864 1.91
1280 768 1.84
1280 720 1.66
800 600 1.44
1920 1200 1.04
1280 960 0.86
768 1024 0.80
1093 614 0.54
1024 640 0.28
1152 720 0.26
Other 6.08

Now we want to turn our focus to the “Width” and the “% of Internet Users” columns. Take each unique “Width” and group them together. Then order each group by “% of Internet Users” from high to low. Finally, sum the “% of Internet Users” for each unique “Width” group (as shown in the table below).

Based on the same numbers for screen resolutions, here are the percentages by just the screen widths (notice that 1280px is now at the top of the table):

Width % of Internet Users Numbers from resolution table
1280 26.87 14.55 + 7.96 + 1.84 + 1.66 + 0.86
1024 25.28 22.63 + 2.37 + 0.28
1366 15.63 15.63
1440 6.92 6.92
1920 4.74 3.70 + 1.04
1680 3.75 3.75
1600 3.12 3.12
1360 2.65 2.65
1152 2.17 1.91 + 0.26
800 1.44 1.44
768 0.80 0.80
1093 0.54 0.54
Other 6.08 6.08

Now all we need to do is group the “Width” data into resolutions that are greater than or equal to 1280px and the resolutions that are less than 1280px. Then order each group by resolution. I preferred to order the resolutions that were greater than or equal to 1280px from low to high and the resolutions less than 1280px from high to low (as shown in the table below).

Based on the screen width numbers from the previous table here are the final percentages for the target screen width of 1280px:

Width % of Internet Users Numbers from resolution table
>=1280 63.68 (1280 = 26.87), (1360 = 2.65), (1366 = 15.63), (1440 = 6.92), (1600 = 3.12), (1680 = 3.75), (1920 = 4.74)
<1280 30.23 (1152 = 2.17), (1093 = 0.54), (1024 = 25.28), (800 = 1.44), (768 = 0.80)
Other 6.08 6.08

There you have it. Now you have a good reason to start designing your web pages for screen resolutions greater than or equal to 1280px width. Leave a little play for the vertical scroll bar and a few extra pixels left and right margin and you end up with around 1250px width for your site layout. It’s enough extra room for a skyscraper ad. Better yet take your primary reading font size up to 16px. Your visitor’s eyes with thank you.

ResourcesWikipedia: Display resolution , StatCounter

Leave a Reply

Showing 1–5 of 5 comments

  1. Bob l'éponge 8 years ago

    But when I’m browsing the web on my MacBook the browser is usually in a window taking up about half of the screen width so I can’t see the right-hand side of your website without horizontal scrolling.

    By using your statistics and not taking into account users whose browser is not utilizing all available screen real estate, why would I want to design a website that ~30% of my user base will not be able to properly experience?

    Oh, btw, my iPhone 3GS is only 320px wide in landscape mode. Will you be creating an app for your blog?

    • StarLordKing 8 years ago In reply toBob l'éponge

      At half the screen width (of a 1280 x 800 screen) you’re saying that you normally re-size the window to about half the screen width — which is about a 640px width. And, that is not considering the space consumed by the vertical scrollbar. Understand that most websites are usually designed for either 800px or 1000px width. So, you end up using the horizontal scroll for nearly *ALL* websites anyway.

      This particular article was written conservatively. Study the tables some more while focusing on the resolutions that fall into the ~30%. Or, you could just wait for the follow-up article.

      A mobile version of this site may be available sometime before the end of 2011. No app.