CODEWITHSUNDEEP
htmlcsslayoutwidthscreen-resolution
user984621
user984621

Reputation: 48443

Preferred width of layout in 2012

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?

Upvotes: 4

Views: 3645

Answers (4)

CodeVirtuoso
CodeVirtuoso

Reputation: 6438

How about liquid or responsive layout? That way you can cover all resolutions and window sizes.

Upvotes: 1

0b10011
0b10011

Reputation: 18785

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.

Upvotes: 5

Bojangles
Bojangles

Reputation: 101473

Personally, I develop for 1024px and up for desktops. I use media queries to detect mobile devices and provide an alternative layout.

As SupremeDud states in his answer, 15% of displays are still 1024x768, which is a reasonably large market share.

In terms of a pixel width, I base designs around 960px. You might want to look at 960.gs, although I'm not sure how it will work with Bootstrap.

Upvotes: 1

SupremeDud
SupremeDud

Reputation: 1411

According to W3Counter's Global Stats 15% of monitors are at 1024x768 and 56% have at least a width of 1280px. I think 15% is still too high to go with 1170px as a layout.

Upvotes: 1

Related Questions