I recently read an article that said web developers need to stop designing to the 960px grid system. The writer thinks responsive design should be used for more than just downsizing a website to mobile, but also enlarging it because there are so many large monitors out there now that will just leave a width restricted design floating aimlessly in the middle of a sea of whitespace.
Whilst I don't think that the web needs to be fully fuild to suit a large screens, the article does make a good point. That is why I've created a new version of the 960 grid, except this one is
1600px 1920px wide and includes vertical rythmn rows of 18px. You can download it below. Originally I made the grid 1600px wide, but upon further reflection I updated it to 1920 because it is a common screen size and exactly double 960.
When I design to the 960 grid I use the 12 column varient which splits into three columns nicely, each 320px wide (300 with margin). The new
1600 1920 grid that I've put together is 24 columns and can be divided up as you please.
Of course 1920 is still too wide for many screens, but in the days of media queries we can simply adapt. I suggest your base stylesheet still targets a 960px width, but include media queries to enlarge the website for those bigger screens and use my 1920 grid to arrange the design in Photoshop.
Someone suggested a CSS framework/skeleton for this grid system. I don't personally use too many frameworks so I don't know how this stacks up in comparision but maybe some people will find it useful.
I haven't fully tested it yet but I do plan on using it myself and may add to it later. I also haven't documented how it works yet either. Just try it and see.
Article Reference: Life Beyond 960px: Designing for Large Screens