Preferred width of layout in 2012

Question

I am working on new web app and still can't decide, what width of the layout I should choose. The app is based on Twitter Bootstrap's library and currently I use the Default grid system (with 12 columns), that has the width 1170px.

On the monitor (I assume most of the people have the resolution higher than 1280px on width) looks the app good, the same on my MacBook PRO, but I am making a worries about the users with a bit older laptops, where the width-resolution is mostly 1024px and the don't see whole layout (and will see the horizontal scrollbar).

So, I would like to ask you about your opinion. Do you optimize already the layout for a resolution > 1280px or still you reflect the users with the res. 1024px and use in that case the width 960px for your layout?

Answer 1

You should use media queries to change the layout for smaller resolutions. In my workplace, there are several monitors that are 1024 pixels wide. Also, people often use tablets in portrait mode (which, IIRC, only has 1024 pixels). Sure, the person could turn their tablet sideways to see the whole thing, but many people won't either out of sheer laziness or not realizing it would solve the problem.

If you only want to design for one resolution (read: you should not do this), then I wouldn't suggest anything larger than 1024 pixels wide. For some statistics, roughly 15-20% of our website's traffic uses monitors that are 1024 pixels or less wide.

It should also be noted that even for users with monitors 1280 pixels wide or wider, many users do not maximize their browser windows. This is especially common with Mac users, but can also be found with Windows/Linux users.