Optimal Screen Resolution for Web Design (2010 Update)

Posted by Mark Thompson - January 7, 2010 - Design/Development - 16 Comments

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.

About the Author

Mark Thompson

Mark is the creator of StayOnSearch and president of Search Creatively, a full-service Internet Marketing Company located in Raleigh, North Carolina. He also contributes to many industry related blogs including Search Engine Journal and is active on Facebook and Twitter. Follow Mark on Twitter
13 comments
Rasika
Rasika

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

دردشة مصرية
دردشة مصرية

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

Tjerja Geerts
Tjerja Geerts

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. :)

david
david

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

Rommel
Rommel

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

Keith
Keith

My programmers designed for 1024x768 - 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?

Mark Thompson
Mark Thompson

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.

Ahintoffig
Ahintoffig

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.

katinka
katinka

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.

rapo007
rapo007

Thanks for your updation

J. Hogue
J. Hogue

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.

sonu
sonu

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

Trackbacks

  1. […] 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 […]

  2. Optimal Screen Resolution for Web Design (2010 Update)…

    ……