Most common screen resolution(s) and best size for web design; A 100,000 visitor analysis
.
The most common screen resolution, screen size and best practices when it comes to size for web design are common topics of discussion among web designers. Opinions are divided on what size is best, but luckily there is plenty of cold, hard data to help you decide.
In days gone by, when screen technology was in its toddler stage, fewer screen sizes were available and larger (considered large at the time anyway…), higher resolution screens came with a hefty price tag attached, typically limiting their use to specialised fields.
640×480, 800×600 and 1024×768 screen resolutions where the only options and catering for smaller sizes made sense as they were widely used. While many still argue it’s best to cater for these smaller sizes, the data just isn’t there to support this decision now-a-days.
What follows is a breakdown of the last 100,000 visitors to www.andrewkeir.com and their screen resolutions. Note: For the less tech-savvy out there, the most common screen resolution is not to be confused with the most common screen size. While 2 screens may be the same inches, the screen ratio, available resolutions and actual resolution in use will differ.
On to the data. First off, we have the top 10 resolutions.
| Rank | Resolution | # of visitors | Percentage |
| 1 | 1280 x 800 | 17,952 | 17.93% |
| 2 | 1440 x 900 | 13,346 | 13.33% |
| 3 | 1680 x 1050 | 11,398 | 11.38% |
| 4 | 1024 x 768 | 9,425 | 9.41% |
| 5 | 1366 x 768 | 8,719 | 8.71% |
| 6 | 1280 x 1024 | 7,602 | 7.59% |
| 7 | 1920 x 1080 | 7,072 | 7.06% |
| 8 | 1920 x 1200 | 6,427 | 6.42% |
| 9 | 2560 x 1440 | 2,726 | 2.72% |
| 10 | 1600 x 900 | 2,394 | 2.39% |
To save you doing the math, 77,636 visitors had screen resolutions over 1024×768, with 9,425 of visitors using 1024×768 screen resolution. 87% of visitors accounted for with no sign of anything lower. On to ranks 10 – 20.
| Rank | Resolution | # of visitors | Percentage |
| 11 | 1152 x 864 | 1,132 | 1.13% |
| 12 | 1360 x 768 | 1,020 | 1.02% |
| 13 | 320 x 480 | 1,014 | 1.01% |
| 14 | 1280 x 768 | 939 | 0.94% |
| 15 | 1024 x 600 | 777 | 0.78% |
| 16 | 1600 x 1200 | 653 | 0.65% |
| 17 | 1280 x 720 | 577 | 0.58% |
| 18 | 1280 x 960 | 561 | 0.56% |
| 19 | 768 x 1024 | 467 | 0.47% |
| 20 | 800 x 600 | 353 | 0.35% |
As you can see, 800×600 barely scrapes in with a measly 353 visitors out of 100,000. Nearly 95,000 visitors accounted now. The remaining few percent of visitors were made up of a mix of tablets, mobile phones and other devices. Individually none had more than a hundred visits, if not a lot less, including 640×480.
So what is the minimum resolution you should cater for?
Designing a website no wider than 1024 still had as lot of merit, with nearly 10% of visitors running 1024×768. Having said that, you really can do a lot with a few hundred extra pixels.
If you do go wider, yours wont be the first website people running 1024×768 have seen that was too wide for their screen and the extra space can let you do more for the majority of your visitors.
Subscribe to the RSS feed or get updates via email.
I use a 17″ laptop extended with a 24″ BenqFW (1920 x 1080) so it’s widescreen. Developing on this setup I feel is perfect and here’s why: You get large sized laptop views which matches your average sized monitors. This laptop is a 1680×1050 (the number 3 resolution) this is perfect because it is just beyond your number one spot. For larger views on projects including widescreen video, CSS tricks and full width websites I feel need to be seen on a 1920.
I keep a close eye on the stats over at W3Schools, and whenever I’m looking to design a new site I check out current screen resolutions, and to be quite honest, I haven’t designed a site in anything less than 1280px wide for quite some time now, but I guess it can be argued that dependent on the demographics of potential visitors there is still room for designing in smaller resolutions.
If you’re designing a senior citizens community club website or something I can’t imagine they would appreciate a high resolution related design. I might be wrong but anyway…
You can access the browser stats and screen resolutions for the past 10 or so years at http://www.w3schools.com/browsers/browsers_display.asp
There’s something wrong in the stats… Monitors with a resolution of 1280×800 don’t exist. I think they are tablets.
Ben, Ewan,
Thank you for your input.
Nicola,
I’m afraid you’re mistaken. 1280×800 is for a 16:10 ratio wide screen monitor, other resolutions of the 16:10 ratio are 1440×900, 1680×1050 and 1920×1200. In fact the Samsung 2053BW monitors which I use support 1280×800, though I use it at it’s native 1680×1050 resolution.
The data is correct. I believe you’ll find 1280×800 is a very common resolution for laptop computers.
Regarding your last point, even if it was a resolution exclusive to tablets, if 18% of users visiting your site were using them, it would obviously be a resolution worth considering when designing your website.