20

What are the most commonly used pixel sizes (primarily widths) and what are there advantages and disadvantages?

How can I best find a happy medium to give a good experience to people with a wide variety of monitor sizes?

An answer with an explanation rather than just the size would be greatly appreciated.

Nachshon Schwartz
  • 15,289
  • 20
  • 59
  • 98
  • 17
    Why the downvotes? Why the close votes? This is a **valid question**, there’s a host of research about this topic out there. – Konrad Rudolph Jul 26 '11 at 15:35
  • 2
    1920x1080 that way it's in HD :P – marto Jul 26 '11 at 15:35
  • 5
    I think this is a completely valid question - no need to close. – Rion Williams Jul 26 '11 at 15:36
  • 2
    Some pointers in case the naysayers prevail: http://www.useit.com/alertbox/screen_resolution.html, summary: “Optimize Web pages for 1024×768, but use a liquid layout that stretches well for any resolution, from 800×600 to 1280×1024.” – Konrad Rudolph Jul 26 '11 at 15:36
  • Its very context sensitive (and is a UX problem, not a programming problem anyway). – Quentin Jul 26 '11 at 15:37
  • 2
    Probably it was just asked in the wrong way, or maybe it's a duplicate of a similar question... I think this question is both valid and costructive. – Jose Faeti Jul 26 '11 at 15:37
  • @Konrad — Half a decade old, the statistics have changed since then, and it predates the rise of mobile and tablets. – Quentin Jul 26 '11 at 15:38
  • @Quentin Web design is completely programming related, and has repeatedly been considered on topic here. I agree that UX.SE might be a better place to ask this but this isn’t a reason to close (and the closing reason was “not constructive” anyway, which is totally false). – Konrad Rudolph Jul 26 '11 at 15:38
  • @Konrad — Let's have a holy war! Percentage widths only! – Quentin Jul 26 '11 at 15:39
  • @Quentin Of course the statistics are outdated – that’s why I said “some pointers”. That said, useit.com is *the* eminent web usability expert site. – Konrad Rudolph Jul 26 '11 at 15:39
  • @Quentin you should check out global stats (in my answer). If you do a localized website for Switzerland maybe you could use a higher resolution, but event then all the iPad users would hate you :) – meo Jul 26 '11 at 16:05
  • 1024×768 is the best choice for websites that are not fluid. – buhbang Jul 26 '11 at 16:10
  • The subject of this question is absurd. Perhaps someone cares to fix it? – bmargulies Jul 26 '11 at 21:08

7 Answers7

20

the most grids use a width of 960px. (When the design has a fixed width). When you take a look at global statistics 1024 range resolutions are still the most common: http://gs.statcounter.com/#resolution-ww-monthly-201006-201106

Do not use 1000 width. (You have to count in the border width of the browser and the scrollbar, in certain browsers / OS they are larger then in others)

I don't think there is a ultimate resolution that's why you should check the statistics on the concerned webpage (if the page already exists), to decide what resolution is most appropriate. If you can't do this you can check stats for you target market on http://gs.statcounter.com/

Or even better use responsive webdesign: http://www.alistapart.com/articles/responsive-web-design/

Since max- and min-width attributes in CSS, you can target whatever resolution you want, if you have the time / budget for it of course.

meo
  • 30,872
  • 17
  • 87
  • 123
  • +++++++++++responsive web design. That should be the first consideration (if possible). – Nic Jul 26 '11 at 19:47
5

960px width is a good standard, as others have already elaborated on.

However, one should keep in mind that websites are viewed on a lot more than just desktops these days, so the answer could vary based on what the site is being styled for. For example, 960px would be a poor width for a mobile stylesheet.

One resource that could help you is www.resizemybrowser.com. (There is a similar tool built into Firebug.)

At the end of the day, I think 960px is a good standard, but really, "it depends". :)

Jeremy Wiggins
  • 7,239
  • 6
  • 41
  • 56
4

960 is a standard for fixed-width websites. It is to ensure that 1024x768 resolution will pick it up easily. As for height - it does not really matter.

Stan
  • 25,744
  • 53
  • 164
  • 242
2

In general, for a fixed-width website, that is meant to be read on a computer screen, nowadays, I'd say around 1000px (because there's no 800*600 resolution anymore and the least you can find is 1024*768).

You should really aim for an extensible design (generally harder to do though).

  • 1
    A study of big content providers I did a while backed showed that the preferred width was ~1000px. Heights normally extended below the fold. – Richard H Jul 26 '11 at 15:41
1

Out of experience, for the web i would say a width greater than 850 and less than 1000 px preferably in the 900's and a height of around 750 px, but bear in mind that the height would be variable in case of dynamic content. so the height could be set to 100% or auto. and best to align the website in the center, via the css property margin: 0 auto;

Rami Sarieddine
  • 5,396
  • 35
  • 41
1

The most common size is between 900-1000 pixels there are some good sources for screen size useage which most people tend to desgin for the largest group. mostly its assumed anyone with a 800 by 600 screen wont want to be doing much business. ie strapped for cash (big generalisation)

Treemonkey
  • 2,133
  • 11
  • 24
1

I won't consider only the desktop monitor resolutions. Nowadays you can browse websites on almost any device, and is fairly common for people to browse also with their mobile phones and tablet PC, so you really should consider them both.

This could result in a different site version for different devices, or a site layout that is ableto accomodate based on different sizes. This is something you have to consider when first thinking about the website you are planning to do, since not every website is suited to have a layout of this type.

An adaptable layout has the added benefits that it will be good even if new devices with custom (non standard) resolutions came out, you won't have to worry about checking it in those new devices because it will fit ok (if the layout was done right).

Anyway my standard minimun width is still 960px for desktop monitors, and for an adaptable layout I usually choose a max-width for really huge monitors (think about viewing a site which extends for the entire monitor width on a 2500x1600 monitor... gosh) of about 1200px, and a 100% width if the browser size is less than that, to allow the website to fit good everywhere.

Jose Faeti
  • 12,126
  • 5
  • 38
  • 52