What would be the best layout width when traffic monitor sizes are mostly 1280 x 1024?

Question

I am arguing with my client, that 960 pixels layout width will be okay for the site. He keeps suggestion that the layout width should be larger. He gave me these Statistics

In % descending order:

1680 x 1050     24%
1280 x 1024     21.13%
1440 x 900      12.68%

1920 x 1200     9.86%
1024 x 768      9.86%

1920 x 1080     8.45%
1152 x 864      4.23%
1600 x 1200     2.82%
1280 x 800      1.41%
1366 x 768      1.41%
1536 x 864      1.41%
1600 x 900      1.41%
1843 x 1152     1.41%


What monitor size users tend to stay the longest, during the past month?

(in descending order....)

1280 x 1024
1680 x 1050
1920 x 1200
...all others are pretty much equal, lower...

Even with these results, I still think that using 960 pixels is perfect for the job, but I am not a professional and would really like other people suggestions and thoughts. Would a 960 pixel layout do the job? Is there anything better?

Most of the client customers art directors, graphic designers, and web designers.

Answer 1

Two things you need to take into consideration:

1. Even though the screen resolution is more than 1280 px for most users, they may not use their browser in full screen mode and they might use some addon in their browser that reduses the actual web viewer space (eg. bookmark, history, social networking, dev.tools etc).

2. How does the content and design look on wider screens? Very wide paragraphs are not very readable, and some visual looks works best when they have some white space that surounds the main area.

But remember: The 960 systems isn't all about optimized and well established width. It's also a width that is perfect for multiple column combinations. It gives you a nice 12 columns grid or a 16 column grid tha is easy to use for multiple column combinations. Google "960 grid system", and find a lot of examples.

Answer 2

Depending on your content a fluid layout like the 1140px grid could be perfect — http://cssgrid.net/

The 1140px grid let's things scale for bigger resolutions (a good thing), but also scales things for smaller resolutions (down to mobile — also a good thing!).

Answer 3

Have a look at the websafe resolutions. In my opinion you'll be totally fine with a 960 grid. You will probably work with 2 or more columns in your layout. When you put additional information (and not the main content) in the right column you probably cover most of your visitors. As lower resolutions will cut off from the right side.

But maybe the website has cutting edge visuals and you can afford to lose some users: go for it.

You can also visually extend the area. Content in the 960pixel area and a background image that is larger. Then it looks cool on a large screen but you don't miss anything on smaller ones.

If you have skilled coders you can also work with scaling or a dynamical layout that adapts when the viewport is smaller than your content.

Answer 4

Statistics about desktop screen resolutions don't really tell you anything about specific target customers' web browsing habits.

About the only thing one can safely assume from what has been shared is that art directors, graphic designers, and web designers are likely using a higher percentage of Apple products than say, accountants.

And, based on that, I'd say odds are that these people are LESS likely to be maximizing their browsers anyways. A maximized browser on a 27" iMac is ridiculous. They're also likely to have iPads and iPods and iPhones (if not just being generally up-to-speed with smart phone and mobile devices in general).

If you're in it for the sport of arguing with your client, then I'd push back and say "well, these are stats on screen sizes...do you have the stats on the browser viewport sizes your customers are using?"

Answer 5

"Most of the client customers are art directors, graphic designers, and web designers"

Your client is right to push you to optimize for 1280 x 1024 and up. He is the customer, and understands his market. He is telling you not to bother with the smaller screens. It's more than just the raw percentages. You should listen to his reasons and then move the conversation to another level.

---

It's a Commercial Decision

A programmer looking to sell software in 2011 should not be worrying about Windows 98 compatibility. If someone is still on Windows 98 (already less than 5% of users) they are not good sales prospects. They are most unlikely to open their wallets. Similarly if you are selling to graphic designers, as he is, it does not make much sense to put significant effort into resolutions of 1024 x 768 and below. They're unlikely to open their wallets either. The web site should at least work at those resolutions, but don't let the higher resolutions suffer for it.

It's a commercial decision rather than a UX decision.

---

Moving the Conversation On

The discussion you'd like to have with him is back on your territory - how to make a site that works superbly at 1280 x 1024 and up still function well at lower resolutions - without it taking too much effort.

• My own approach would be to vary the number of columns - with an eye to even getting a one column mode that works acceptably on handheld devices almost 'for free'. Your client might be interested in that.
• If I'm using stock photos, a panorama signals that this is a site optimized for larger screens and is for graphics professionals. I can then choose a 'most interesting' cropped region to use on smaller screens.

A site designed for 960 width is going to be adrift at sea at 1920 width. Don't try and do a one size fits all. Adjust to the screen width.

Answer 6

I would say the best approach is always going with responsive web design that reacts view area size, due to the reasons stated above. That way you can cater layout depending on users resolution and window width. It's pretty easy to achieve these days by using tools like Less Framework or 320 & Up