Optimal Screen Resolution for Web Design (2010 Update)
Back in the May 2008, I wrote a post that analyzed what the best screen resolution size was for designing a website. I thought it would be a good idea to see how screen resolutions have changed in a year and a half. You can see the results from 2008, along with updated statistics from late 2009.
May 2008 Results
Websites Analyzed: 6
Total Visits: 185,637
Date Range: January, 2008 – May, 2008
| Resolution | Visits | % |
| 1024 x 768 | 82,351 | 44.36% |
| 1280 x 1024 | 29,989 | 16.51% |
| 1280 x 800 | 28,790 | 15.51% |
| 800 x 600 | 10,858 | 5.85% |
| 1440 x 900 | 10,242 | 5.52% |
| Other | 23,407 | 12.61% |
January 2010 Results
Websites Analyzed: 4
Total Visits: 167,096
Date Range: October 2009 – December 2009
| Resolution | Visits | % |
| Larger than 1440 x 900 | 40,128 | 26.60% |
| 1024 x 768 | 38,229 | 25.34% |
| 1280 x 800 | 31,577 | 22.51% |
| 1280 x 1024 | 22,824 | 15.13% |
| 1440 x 900 | 8,304 | 7.52% |
| Smaller than 1024 x 768 | 3,210 | 2.90% |
Updated browser information from W3Schools
| Date | Higher | 1024×768 | 800×600 | 640×480 | Unknown |
|---|---|---|---|---|---|
| January 2009 | 57% | 36% | 4% | 0% | 3% |
| January 2008 | 38% | 48% | 8% | 0% | 6% |
| January 2007 | 26% | 54% | 14% | 0% | 6% |
| January 2006 | 17% | 57% | 20% | 0% | 6% |
| January 2005 | 12% | 53% | 30% | 0% | 5% |
| January 2004 | 10% | 47% | 37% | 1% | 5% |
| January 2003 | 6% | 40% | 47% | 2% | 5% |
| January 2002 | 6% | 34% | 52% | 3% | 5% |
| January 2001 | 5% | 29% | 55% | 6% | 5% |
| January 2000 | 4% | 25% | 56% | 11% | 4% |
As we can see, computer screens are getting bigger and bigger. The 800×600 resolution is almost non-existent now compared to 5-10 years ago when it was the dominant resolution. For web designers this is important data to analyze since it will effect how sites are being built. The sites that we design are created for at least a 1024 x 768 browser, and actually 1280 x 800 and bigger are starting to become the norm.
More from StayOnSearch
- Optimal Screen Resolution for Web Design
- My Thoughts on the Newest Google Algorithm Update [w/ Results]
- Google Offering Free Airport Wifi For The Holidays
- Appropriate Web Design to Maximize Conversions
StayOnSearch Recommends
- My 16 tips for becoming a blogger worth following (Anthony Kirlew)
- How to choose the right web design software | Ledfrog.com (Brandon Hann)
- Writing Perfect Title Tags for Your Web Pages | Ledfrog.com (Brandon Hann)
About the Author 
17 comments
[...] for Web Design Posted by Mark Thompson in Design/DevelopmentMay 30th, 2008 | View commentsCommentsUPDATE: 2010 Screen Resolution StatisticsScreen resolutions have changed a lot over the past 8 years. Computer monitors have migrated to [...]
Optimal Screen Resolution for Web Design (2010 Update)…
……
[...] Design a Site for Optimal Screen Resolution [...]
Thanks for your updation
My concern is more with the way people access a page than filling the real estate. Having done some experimental playing around with 1220 and 1400 wide pages, it becomes a question of what to put in the space without making it so distracting. And people will not read sentences that stretch 900 pixels wide – or even 700 pixels wide. grad school personal statement
Since browsing with mobile devices seems to be upcoming, I would expect that their smaller screen sizes will soon start showing up in statistics as well.
Hi Mark! I'm curious as to your thoughts on designing twitter backgrounds…looks like your twitter acct is designed for a 1280 x 800, but I'm reading that custom backgrounds should still be done at 1024 x 768.
That is actually a great question. I am not 100% sure, since I really am not a web designer. I know when I was working with the web designer who did my Twitter background, we had to upload the image then set the background color to match the image color.I would probably just do a Google search for "Screen Resolution for Twitter Backgrounds" or something similar to that. I would love to hear what you find out
Sorry I couldn't be of more help.
My programmers designed for 1024×768 – my site is simple and my rule is "no scrolls" -
even with that – I now have scrolls
They did not anticipate a tool bar or a start bar across the bottom.
How stupid is that? Any advice or data on how many pixels of a typ screen are lost top and bottom for this "normal" stuff?
I'm a designer and so I think about these numbers all the time. The question about what amount of screen is left over once one accounts for the browsers tool bars is a good one, and frustratingly, is different depending on the browser.
All results are for a 1280 x 800 screen. Mac users do not have a bottom bar, so subtract 22 px for the OS top bar. Windows has a 22px top bar and a variable bottom bar, but XP users can expect at least another 30px for the bottom taskbar. Vista users need to account for a 40px taskbar (subtract another 10px from the numbers below):
IE8: About 1000 x 630 (topbar with tabs is 120px tall)
IE7: About 1000 x 630 (topbar with tabs is 118px tall)
IE6: About 1000 x 700 (top bar is 80px tall – no tabs allowed)
FF4: About 1000 x 670 (topbar with tabs and bookmarks is 110 px tall)
Safari: About 1000 x 680 (topbar with tabs is 94 px tall)
Chrome: About 1000 x 700 (topbar with tabs is 72 px tall)
So, with sites that you do not want to scroll, a safe size is 620 tall… 600 tall is probably safest.
In order to get it to fit nicely on the iPhone, consider fitting the dimensions into the 320 x 240 (or 3:4) aspect ratio.
Very useful information. Making an universal resolution in very important to any website. So that what ever the resolution of the monitor of the user, the website will still look good. Darwin Web Design
Very useful post, does anyone know of how to test a website on different screen resolutions? As i only have a 13" Macbook, Somehting like Adobe Browser Labs – but for screen resolutions would b perfect?
My recent post Currently working on a new psd web design for a london company
You can try http://browsershots.org/ or https://browserlab.adobe.com/. Both are really good resources!
[...] Design a Site for Optimal Screen Resolution [...]
Since there's a huge trend right now of all new upcoming tablet pc's and wether they are going to replace all laptops in future; I've already seen in multiple statistics that the 1024 x 768 specs remain the safest bets (also for ipad2)
I'm a Design Director myself, and I stick with the 960 px css grid. With scalable backgrounds., so colors and images stretch/enlarge with greater screens. At least it looks great on the ipad2 as well.
Very useful information. Making an universal resolution in very important to any website. So that what ever the resolution of the monitor of the user, the website will still look good. Darwin Web Design
Optimal Screen Resolution for Web Design (2010 Update) post is very help full.Thanks for shearing it.it's really useful………
My recent post Facebook Makes Photos Bigger & Faster