You have two options when it comes to deciding what width to make your website. You can have it expand the whole width of the viewers browser. Or you can have it set at a fixed size. Even if you have your page expanding the whole width of the browser, you’ll have to decide on a minimum width for your display to set to.
Personally, I cater towards a screen size of 1024 x 768. The web page you are viewing now has a fixed width of 900 pixels. Here is a list of widths of what other websites are using:
| Name | Website | Width |
|---|---|---|
| facebook.com | 980px | |
| Yahoo | yahoo.com | 990px |
| MSN | msn.com | 970px |
| New York Times | nytimes.com | 970px |
| Wikipedia | wikipedia.com | 100% |
| Web Krunk | webkrunk.com | 985px |
| WalMart | walmart.com | 720px |
| NFL | nfl.com | 985px |
| Best Buy | bestbuy.com | 790px |
| Apple | apple.com | 985px |
Here are some statistics on screen size usage from w3schools.com
| Date | Higher | 1024×768 | 800×600 | 640×480 | Unknown |
|---|---|---|---|---|---|
| January 2010 | 76% | 20% | 1% | 0% | 3% |
| 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% |
More specific screen resolution statistics from w3schools.com.
| January 2010 | |
|---|---|
| Resolution | % of Total |
| 1280×1024 | 18.2 % |
| 1280×800 | 17.3 % |
| 1440×900 | 10.5 % |
| 1680×1050 | 10.0 % |
| 1920×1200 | 4.6 % |
| 1366×768 | 3.6 % |
| 1920×1080 | 2.3 % |
| 1152×864 | 2.1 % |
| 1600×1200 | 1.4 % |
| 1280×768 | 1.2 % |
| Other | 4.8 % |
WOW. Super interesting stuff. I will keep this in mind for my next project. Thanks for the stats!
Comment by Angie Wennerlind — April 9, 2010 @ 7:33 pm
Great! I’m glad someone actually put together an analysis of website widths. Everytime I work on a new site, I always try and guess at the “standard” website width of the time. Thanks.
Comment by Eric — April 10, 2010 @ 5:15 pm
Thanks, really useful!
Comment by scrubber — April 11, 2010 @ 7:17 am
but what about mobile devices regarding these stats about screen size?
Comment by Dan — June 18, 2010 @ 7:56 pm
very useful. needed this! thanks!
Comment by web development — June 21, 2010 @ 8:14 pm
Really useful thanks
Comment by Julian — August 16, 2010 @ 6:56 pm
Exactly what I was looking for. Thank you very much! I always need to know what the screen size usage is for my next project!
Comment by Stephanie — September 9, 2010 @ 5:17 pm
Very useful for my new site design.
Thanks
Comment by Richard — September 24, 2010 @ 9:39 am
Also, keep in mind that if your screen is 1024 x 768, the actual height in your browser won’t be the full 768. Depending on how many toolbars and plug-ins you’ve installed and what browser you’re using, you’ll maybe have 580-600 pixels available on the screen if the width is 1024. That’s if you’re looking to make a scroll-free site, anyway.
Comment by Tony — October 1, 2010 @ 4:28 pm
Cool thanks. I found the information I was searching for in your article.
Comment by Patrick — October 3, 2010 @ 4:12 pm
Good info! One thing to keep in mind about the statistics from w3schools. I would imagine the average demographic is a tech savvy designer / developer / web developer. So they would probably tend to be a little higher on the resolution.
Comment by M3NTA7 — October 17, 2010 @ 10:19 am
You do need to keep in mind what your average audience will be for the content you are publishing – whether they are more or less likely to have up to date equipment.
Comment by Philip — December 2, 2010 @ 12:58 am
It would be great to see these stats with the breakdown in increasing numbers of mobile web users. Those displays tend to be smaller, but are on a steep incline on usage. We’ve seen desktop computers grow over the years, but now the growth is strongly in mobile web. What size displays are most commonly used in the mobile arena?
Comment by Greg — December 17, 2010 @ 8:56 am
glad this was picked by google, just what I was looking for.
Comment by stevef — December 29, 2010 @ 2:28 pm
Good info; thanks.
Comment by Willis Drummond — January 27, 2011 @ 8:16 am
This is extremely useful. considering we use iMacs for our work, the screens are always wide, but clients don’t necessarily have the same resolution and widescreens. So keeping in mind what the stats show really helps. Keep this updated. Will be back!
Comment by Jena — April 29, 2011 @ 8:54 am
This is really useful. Thanks
Comment by Hassan — May 29, 2011 @ 8:46 pm
I personally like around 850-900px because it allows me to perfectly have two screens open at the same time (1920×1080 with standard browser margins). I find that facebook/others with almost 1000px can get a bit annoying.
Comment by K — June 10, 2011 @ 6:43 am
To echo the above… please consider designing for side-by-side windows on a 1080p display (1920×1080) without a horizontal scroll bar. (Don’t forget to account for the borders and vertical scroll bar.)
Comment by TrueHeart — July 24, 2011 @ 8:26 pm
My .css files can have numbers such as 980 px coded or it can have percentages. If I chose a percentage, say 90% would that take care of the browser, monitor, and display settings better than a fixed number?
Comment by GeorgeW3 — October 20, 2011 @ 9:46 pm
Thank you – awesome stuff!
Comment by Iain — January 21, 2012 @ 2:57 am