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 |
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!
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.
Thanks, really useful!
but what about mobile devices regarding these stats about screen size?
very useful. needed this! thanks!
Really useful thanks
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!
Very useful for my new site design.
Thanks
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.
Cool thanks. I found the information I was searching for in your article.
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.
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.
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?
glad this was picked by google, just what I was looking for.
Good info; thanks.
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!
This is really useful. Thanks
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.
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.)
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?
Thank you – awesome stuff!
Third the comment to at least design for side-by-side windows. Not many people normally use their browser full-screen, it’s always in a window, usually not more than 2/3rds to 3/4ths the screen size. So don’t think that maximum full-screen monitor resolutions actually reflect what you should design to.
What size should I make for my website? | PXSTUDIO – blog
[...] 768px. However if you need more extra room it will flow outside your fixed pixel setting. • Click here to check the list of widths of what other websites are [...]
It’d be good to get an update on the figures as I’m currently looking to redesign my website. Would the best fit still be 1024 x 768?
thanks for this update. I usually make 960, but every time I had a new project I was reluctant restricting it to this size. seeing the most big sites using around 980, I would prefer using this. and I think the reason they are not choosing 1024 is that there are still many monitors in many parts of the world where the resolution is less. 980 should be a good thing.
thanks again for the analysis and data.
Thanks. I think 980 will become our standard.
Really amazing. Thanks a lot. I’d keep that in mind for my next project.
Seconding the concerns of mobile devices. But still good stats.
With a 960px width on most current computers (even computers that are 5 years old) is that the footprint of the webpage is so small and you have to scroll down. If your building your website for conversion, Wider, like 1260px allows for more content to be visible, and gives a better use of a large majority of the space, and with fluid css design you can always go down in width.
Keep in mind the there is no more scroll bars on Lion and the upcoming Mountain lion
It’s actually a cool and useful piece of info. I am satisfied that you simply shared this useful information with us. Please stay us informed like this. Thanks for sharing.
thanks alot i really got what i wanted
thank you very much for this helpful info
Good stuff. Wondering if you can cover some lower resolution stats too.
Just get web ruler and measure every website, image, whatever you need
I’m using Firefox add-on called Measure it
My webpage that I’m working on just now is 900px (width) but it does not appear as wide as this webpage, can anyone help me with this. I have double checked and it is 900px (width), I’m using NVU to create my webpage. When I increase it to 1000px (width) it appears more like this page but I know that this isn’t the solution.
thanks