What is the current pixel width standard for a website's content area?

Question

I know that previously it was 960 pixels, but lately I have had clients wanting me to push the envelope further and prompted me to do some research on the matter.

Answer 1

Although responsive designs are great, I don't think they are the answer you are looking for. I think the root of the problem comes from the width of paragraph text and the fact that you never want to horizontal scroll.

To me, the perfect paragraph is maximum of 600px wide, better around 540px. Add a sidebar of related content and you naturally end up around the 960px mark for the whole thing. Responsive designs can then shrink the paragraph width and hide the sidebar appropriately.

Ultimately the Web is narrow and people will scroll down and look down while browsing. Adding horizontal content may appear to fit more content on your client's crazy sized Apple monitor, but that doesn't mean the real world will actually see it.

Answer 2

There is no standard. People are accessing the web through a wider range of devices and screen widths than ever before. Smart phones, tablets, mini tablets, notebooks, laptops, desktops, massive desktops etc etc.

You can't pick a width and expect that to do for everyone.

That is why responsive is the answer. It enables you to design for everyone.

There are a range of techniques used to design responsively. I usually design with a flexible grid, with changes to the layout at 2-3 breakpoints - so you could i guess consider those "standard" in order to have some starting points

Bootstrap sets these as:

Phone - 480px Tablet - 767px desktop - 979px Large display - 1200px

Its probably worth looking into using em's and % rather than pixels.

http://www.alistapart.com/articles/the-infinite-grid/ http://www.alistapart.com/articles/responsive-web-design/

Answer 3

Responsive is great for smaller screen sizes, and to cope with phone and tablet displays. But I'm unconvinced that going wider than 960 (or so) is desperately important.

For example, the setup I use is a 27inch display, +my laptop's panel, and I still find wide layouts irritating. There are a number of reasons for that.

1. I didn't buy a big display, just to display a single website. I bought it so I could view/work on two (or more) things side by side. That's the point of big displays, it makes you more productive by letting you switch between things much faster. I think this is pretty normal for people with large displays.

2. Most websites aren't that wide. I use tabs in the browser, so typically I just cmd-T to open a new tab, put in a search or URL and I'm done. If a site is unusually wide I now have to resize the browser too. Given I have other windows on screen I basically have to rearrange my workspace which is annoying. This may just be my personal style, so it may not generalise though.

3. If the actual content is too wide then line lengths get long, which makes reading difficult. 30-40ems seems like a good width for text, which isn't going to be more than around 650px at standard font-sizes. (If you're going for larger fonts, which I recommend for legibility, then tend towards 30ems, rather than 40). That still gives you width for side nav, or auxiliary content. Long line lengths are well known to be less readable.

Of course, you could still build a responsive design for wider displays, but I'm not convinced it'll get seen very often. And I'd absolutely make sure you have a design point at 960px or so.

In summary, the case for going wider than 960 isn't compelling, if I were the client I'd spend my money elsewhere.

Answer 4

The Right Answer is Responsive Design as mentioned earlier. Take a look at some.

http://framelessgrid.com/

http://twitter.github.com/bootstrap/

http://www.getskeleton.com/

Responsive design works because it scales with the available screen size. So, when designing a website or web app you can be sure it will display appropriately when using phones, tablets, laptops, and desktops.

It is still important to see what the ecosystem looks like in the past. If you have Google Analytics take a look at the last year's worth of visitors and sort by screen size. This should tell you more about the dimensions of your users screens and how a change in dimensions is going to effect them.

Answer 5

A key consideration is: who are your users, and what screen resolution are they likely to have?

Check out the chart in a recent Nielsen Alertbox entitled "Computer Screens are Getting Bigger:" http://www.useit.com/alertbox/screen_resolution.html

If your target users are "everyone everywhere in the world," you are best sticking with 960. If your users work at US corporations on tasks they will likely be doing at their desks, it is safe to work much wider. On a recent project we determined that our users would be working at a minimum 1440x900 even when working at home on their laptops, and assumed a browser window width of 1280. If your clients want to push this envelope, perhaps they have made a similar judgment. --Jim

Answer 6

Responsive is great, but it's time consuming. I'd say stick with 960 (though I'm a fan of the 970 grid) and explain the reasoning. If you explain the upsides, then perhaps they'll realize that it makes sense.

Or, convince them they need responsive, do the extra work and charge the extra billable hours (also, charge a higher hourly fee, since it's more complex work) :D

Answer 7

The correct response to your client is to examine your site's analytics. You can then respond:

Choice A) XX Pixels. X% of your users will find the site unusable.
Choice B) YY pixels. Y% of your users will find the site unusable.