Some websites fix the main content (or whole website) width to 980px, others to 1200px. What's the criteria for choosing this size?
- It's whatever you want it to be. There are no rules around this. Do whatever your design requires.John Conde– John Conde ♦2016-05-19 00:23:50 +00:00Commented May 19, 2016 at 0:23
- @JohnConde I don't expect for rules, bit at least some recommendation. Although it's not hard to believe there's none, as each website will have it's own pattern.Student– Student2016-05-19 00:44:26 +00:00Commented May 19, 2016 at 0:44
- 3Actually the best answer is "neither" and have a responsive design.John Conde– John Conde ♦2016-05-19 00:45:53 +00:00Commented May 19, 2016 at 0:45
- 2@JohnConde or set only max-width, as a too large line of text would not be pleasurable for reading.Student– Student2016-05-19 01:49:33 +00:00Commented May 19, 2016 at 1:49
- This might answer some of your questions: webmasters.stackexchange.com/questions/1689/…Tim Malone– Tim Malone2016-05-19 03:35:57 +00:00Commented May 19, 2016 at 3:35
2 Answers
My recommendation is to base the width on the screen sizes of your visitors. If more of your visitors use screens that are under 1200px wide, go with 980px wide. Even if you have a responsive design, you'll want to know what breakpoints to use so that you have designs that look right at the various screen sizes.
As for how you get this information, most web analytics tools contain this data. For instance, in Google Analytics you can go to Audience -> Technology -> Browser & OS -> Screen Resolution. That gives you a report that looks like this:
If you are working on a new website without existing traffic data to pull, you could also look at global stats that suggest trends, like what you can get from StatCounter's global stats.
You can do any of those.
1200px width would probably be the most you would go. There are a lot of frameworks that base their column/page width based on a pixel range (bootstrap - 980px) and that is mainly the reason you see these numbers, but you don't have to stick to that because they do. My recommendation would be to go with what makes your site look best at a maximum width, but no wider than 1200px because it starts to get difficult to maintain the aesthetics.
These days, screens are getting larger and larger, so you shouldn't focus on accommodating screen size, just what looks best for you. Pick a width that looks good for your site and make it fully responsive from there - that is your best bet.
