Maybe this is a stupid question but I wonder if it changed.
Websites used to be 960px wide so all screen resolution could easily see all the content.
But with the new 'responsive-design' and html5 this isn't really nessesary, because people use responsive design for showing on mobile phones and tablets.
So my question:
What's the best width for a responsive-design on desktop?
Ultimately, the optimum width and breakpoints for a website depends on the content that it displays.
That said, the great part about responsive design is that you can cater towards not only smaller screens, but larger displays as well. You can use a 960 breakpoint, but you can also use 1200, 1400, etc.
The whole point of responsive design is that you don't start to design from the width of your page.
The idea of responsive design is that you start design from the components up. Think about what content you want to display, and then design a scaling system. Something that expands and shrinks along with the width of the screen.
Responsive sites do not have an inherent width. Very simple responsive designs may have breakpoints. These are essentially a mobile, tablet and desktop site rolled into one. But that's only the simplest level. More ambitious responsive design is defined in terms of the window size, scaling its text size smoothly, but also using breakpoints to decide when certain superfluous elements should disappear or move inline.
It's all about designing systems instead of pages.
Granted screen resolutions and the like have probably moved on since this question was asked but here's what I currently understand:
Most desktop screens are full HD (1920px x 1080px) with 4k becoming more common (3840px × 2160px), laptops are usually 768 x 1366px (some have HD screens, and then there is the macbook pro). On top of that there are a wide range of mobile devices with varing screen resolutions (and some with quite high resolution that display as a lower resolution).
Based on that information, if you are happy having multiple columns, I would look to have a "wide" design of approximately 1900px (if most of your users are using desktops). If on the other hand you are looking at standard 2 or 3 column layout I would consider setting a max width (~ 1680px seems common, but this would depend on your content). Obviously it will need to deform nicely for smaller screens.
As always if you can get the screen resolution of your users, it would be best to design your site to look great on the more common resolutions, and deform nicely for the rest.
According to my knowledge, the responsive designed websites generally don't need any specific width/resloution, since the websites adjust properly automatically on tablets/phones and on desktop as well.
960px is a good base width because tablet viewers (in landscape) can still see the whole site as you designed it.
You just have to plan. Yes, a responsive website is based on percentages, but if you set your sidebar to, say, 25% of the page width, then it will be super narrow on a phone or smaller tablet.
Best to set fixed pixel widths for sidebars, then clear their float on screen sizes smaller than 600px or so.
Then test it, test it, test it. Look at every single page. It's tedious, but you'll be so surprised at that thing you thought would jus work on a mobile-sized screen looks terrible.
WHOA WHOA WHOA?!? 1100px is not the answer!!!
Responsive means that it responds to a screen up to commercial maximum. 1100px is not the commercial maximum. You might want to reread some of the information that people took the time to give you. A responsive website will be designed for any width of any device.. This is why it frustrates me that people got the terminology all butchered forcing 'fluid' to be a terminology.
I think the point here is that if your not doing a FULL width site, then what should your CONTENT container width be. In my eyes 1100px is a good width for something of a boxed design, and then you can make it responsive to adjust to all the smaller resolutions.
The most popular screen resolution now is a laptop screen of 1440 wide and, from W3 Schools website, 99% of people have a screen resolution of 1024x768 now. So if you do a responsive query around 1024 then 960 then 800 then 480 you should cover pretty much all your bounds, maybe add a couple break points in-between if you need to bridge a gap with a logo or text or something.
The comment by Marjan Venema on the original question is the most correct. If making your page wider means that your text/content is going to be too wide (like Wikipedia), then you should cap it at that width. You can still have other parts of the page, such as backgrounds/header/footer go full-width, but sites that stretch out the text so it's difficult to read are highly annoying. I always have to resize a Wikipedia window for that reason.
