What is the 'most common' width and height that websites are being designed for these days?

Question

I'm working on a group project and trying to get my colleagues to submit a drawing regarding their vision for an online application; this application will be viewed through a PC. Although I suspect there is not an industry standard, I am certatin that there must be common approaches for sites with fixed-width layouts. I need to know the most common sense of proportions in the industry.

We are going to keep this prototype simple, and therefore will not be detecting browsers, screen widths etc. So, I figured I would ask this in a simple way with the hope of getting a simple answer:

What is the 'most common' width and height that webpages are being designed for most recently. It would be very helpful if I could site a source when I tell my coleagues why I chose a specific sense of proportions for them to base their drawings on.

Please note how I asked this question:

• I am not asking for the most common screen resolutions.
• I am not asking for the most common browsers.

I want to know what dimensions most websites are opting for in regard to fixed-size layouts. I know that people normally scroll and therefore height might not be part of a ~'standard'; in that case, I will settle for the most common width.

Solution 1

Like you said there is no standard height as that is extremely fluid so just use whatever helps you visualize your design best.

For width 960 pixels wide seems to be current "standard" for fixed width designs. It's common enough that a website has been dedicated to exploring layouts at that width.

(I'm assuming you don't want anyone ranting about using a fluid design?)

Solution 2

There really isn't a standard width you should be setting. The amount of people using a 1024x768 monitor has dropped drastically in the past few years, so a width of 960 has less importance. With the emergence of so many new devices (smart phones, tablets along with laptops and desktops), you should create a number of stylesheets for each case.

CSS media queries allow you to change styles based on the user's screen resolution. I tend to make sites with a general stylesheet that handles all of the visual styling, then separate ones for mobile, tablet, standard desktop/laptop and extra wide screens that structures the page.

Check out this page on W3.org for a few examples - http://www.w3.org/TR/css3-mediaqueries/

It is more work, but will allow the user to get the best possible experience no matter what they use to browser their site.

Solution 3

What @John Conde said. In addition to that you have to factor in who your target audience is. For example, if my website is a technology blog or gadget blog, chances are my target audience is bit more tech-savvy than the normal audience, so I can shoot for 1200+ px wide layout. Or if I were focusing a site/blog/forum for webmasters I would go a bit more wider.

At the end of the day figure out your mass demographics and follow what would ultimately work for them.

Two VERY important things to keep in mind...

1) If your design can work with a 900+ px then there is no reason to stretch it to 1200+ px even if your demographics can afford it..

2) Ensure that you have proper structure in place which can accommodate those uers who may not have your target resolution..

Solution 4

Don't try.

Responsive design is what you want. Make your site usable at 2500 x 1500 pixels, and at 250 x 600 pixels. There are a whole bunch of ways to do this modularly.

Some gotchas:

Text lines shouldn't be longer than 10-13 words (50-65 rem) Longer lines than this are difficult to track back to start on the next line. So even on a very wide display, your paragraphs have a max width. You can use the margins for illustrations, images, figures, and pull quotes, indenting into the text column some as the screen gets narrower.

Ideally you want to load lower resolution images for phone screens, as phones tend to be bandwidth limited. You also need to watch element spacing to accomodate blunt fingertips instead of electronic rodents.

All of this is doable in CSS.

View more solutions

Comments

[Paul Grigoruta]

I disagree with point #2. With a 1366px wide display, arguably the most common width on most laptops sold in the past couple years, you cannot fit two 900px windows next to each other and see both at the same time. If you have just a single 900px layout though, you're wasting 34% of your horizontal space with whitespace. In that case, 1200px would be an ideal width. So yes, there is a reason to stretch it.

[Adil]

@nhinkle: I don't think you actually read point # 2..what does your response have to do with fitting two 900px windows next to each other? Furthermore, please read the question properly to understand what John R is asking for. This isn't a discussion about extreme use cases such as you wanting to have 2 900px windows next to each other or in my case wanting a 1600px monitors(2 of them) to do a design. Rather it's about the vast majority of the users who are not you or me..

[Paul Grigoruta]

My apologies, I meant to reply to your 1st point, not your 2nd. I'm sorry if that caused any confusion. My point still stands though: the vast majority of users have displays which are wide enough that a 900px layout is wasting a lot of their space. I agree with most of what you said in your answer, but your 1st "thing to keep in mind" doesn't really hold true. If your demographics can afford 1200px, you should use those 1200 px, otherwise you're wasting 300 of their pixels.

[Adil]

@nhinkle: You are misreading my point #1. If my design can show the site easily within a 900px why would I stretch it to make it 1200px? Also, 13% of the users still have a screen resolution of 1024x768 Granted thats a small number but its large enough to discomfort them and loose sales, ad clicks, leads or whatever your business model is.... (data cited from: w3schools.com/browsers/browsers_display.asp)

[Paul Grigoruta]

I get your point. My point is that if your users by and large have wide enough screens to use a 1200px wide layout, you should. For example, stack exchange sites are optimized for about 1000px wide, but many users have requested an option to view post source and markdown preview side-by-side, which would use more horizontal space. w3schools is not a representative sample of web users, but that aside, this discussion was for sites where 1200 would be logical if it fit the design.