What Width Should I Make my Website?

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:

[table]

Name ** Website** Width

Facebook ** 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

[/table]

More specific screen resolution statistics from w3schools.com.

January 2010

[table]

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 %

[/table]

37 thoughts on “What Width Should I Make my Website?

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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?

  6. 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!

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

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

  9. 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?

  10. 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.

  11. 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.

  12. 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.

  13. 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

  14. Jamie, this website has changed since the post (it has been published in 2010!!!)
    The width of this website is actually 1170px.

    So what about it now?
    What’s the width standard in 2013?

    One designer told me that we should keep 960px, but i’m looking for more infos about it…

  15. As a software engineer that only dabbles in web development on the side, I am somewhat reluctant to go for hard-coded page widths. It seems much too specific to give one constant number to something that will be displayed across such a variety of devices and resolutions.

    I would personally tend more towards a fluid design that rescales in width with the browser window, up to a certain limit (on the higher side, definitely >1000px). The reason for restricting with in the first place is, after all, that text gets too difficult to read if lines become too long. With a fluid design you have both this, and the advantage of adaptability to smaller viewports (or side-by-side windows on 1920x* displays). But the fact that even the most popular websites seem to go for fixed-width designs makes me wonder whether there are serious problems with that in practice.

    Also, it’s worth nothing that having a design adaptable for smaller resolutions is not enough for good mobile support anyway: resized picture, an entirely different layout, shortening of pages, different navigation, reduction or elimination of JavaScript dependency etc. are all very worthwhile changes to implement for a mobile site. Not all of this is possible to solve dynamically and get rid of the desktop/mobile distinction entirely, so it might not even save any work to make such a widely useful design. Again, that the largest sites (Google, Facebook, Youtube…) continue to offer completely separate mobile layouts is a good indicator that not a lot is possible here.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>