For several years now the 960px grid system (960.gs) has been designers’ favorite pick to help structure and design web layouts. As screens and resolutions have gotten bigger, I’ve found that the 960 grid system does not always fit my needs. 20px gutters and only a 940px content area is a bit too small for the modern web. While designing Themify, I found a new grid layout that works quit well for designing in this day and age. If you’ve never heard of 960 I’ve detailed both it and this newer gird system below.
View full post on Web Designer Wall – Design Trends and Tutorials
Vancouver graphic design, Vancouver web design, Vancouver seo, Vancouver internet marketing, Vancouver social media, web design Vancouver
Incoming search terms:
- 980 grid
- ipad grid
- ipad grid system
- 960 grid ipad
- 980 grid system
- 1024 grid
- grid 980
- ipad design grid
- 980grid
- grid for ipad
- 960 vs 980
- 960gs iPad
- ipad grid design
- Ipad Grids
- grid ipad
- 960 gs iPad
- grid system for ipad
- 1024 grid system
- iPad 960 grid
- 960 grid for ipad
- design grid for ipad
- 960 Grid System ipad
- Powered by Article Dashboard graphics layouts
- 980 grid design
- ipad 960
- 980 vs 960
- 960 ipad
- ipad web grid
- ipad grid layout
- 960 grid media queries
- 960 vs 980 grid
- 1280 grid system
- grid system ipad
- grid 960 ipad
- grids for ipad
- 960 grid on ipad
- Powered by Article Dashboard military pay chart
- 1024 web grid
- ipad layout grid
- 980 grid layout
- iPad website grid
- 1024 vs 960
- 1024grid
- web grid 980
- 1024 grid psd
- 980grid system
- Published News Upcoming News Submit a New Story Groups radio controlled wall clock
- web grid 1024
- ipad 960px
- 980 grids
- grid for ipad design
- Powered by Article Dashboard 640 am radio
- Powered by Article Dashboard free clip art retiree
- php web templateMake your text bigger bold italic and more with HTML tags
- Powered by Article Dashboard cake decoration
- 960 grid not wide enough
- css 980 grid system
- 1280 1216 grid website width
- 960 grid is too small now
- best grid system for 1024 screen size
- best grid system for ipad
- 980 grid web
The current version of 960.gs allows you to customize all of the settings. I really see no need for this post other than it’s lead into a poll of if we believe 960px is a good size width for a website…
I think the best layout I’ve found so far is the 960 grid, 3 column at 300px with 20px gutter, combined with css media queries. Scales down to 640px 2 column grid (for ipads for example) and 320px 1 column grid (for iphones for example). You could extend this to 4 column 1280px width too for those lucky people with large monitors. Everyone wins.
Also standard 6×4 photos scale nicely in pro to 300px x 200px so they fit the grid too.
The lowest common denominator is 1003px in IE while other browsers allow for a bit wider widths – http://www.nealgrosskopf.com/tech/thread.php?pid=43
That is a nice thought, the web does change very fast and 960 will get old sometime. But luckly it will be painless, since we can easily create new grid systems based on 960.
Although I just used 980 on a site, I think 960 is still the preferred setting.
Also don’t forget about the growing percentage of people who are going to be using iPads and other tablets with a resolution at 1024 (or less).
Check out fluid 960, it’s excellent.
http://www.designinfluences.com/fluid960gs/
To clarify,
960 has 3 column width options.
12, 16, 24
So there is more that just the 12 col mentioned.
I’ve have no trouble using a grid based on the 960 one for the majority of projects. Its mentioned above about that annoying size that hits scrollbars far to frequently on tighter screens.
I’m a big fan of pushing graphics and such just beyond this size though, so that those on larger displays get a much more comfortable layout but those on tighter ones don’t see any horizontal scrollbars.
When 1280 becomes the new 1024, I think it would be appropriate to increase the 960 default. But because 1024×768 is still a common resolution, I don’t think 960 should be retired just yet.
While I definitely believe the width must fit the project, I have recently been annoyed when trying to surf websites using a grid just a little larger than 960px on an iPad or netbook with 1024×600 resolution. The site is just a tad too wide and forces you to scroll left and right to see the content.
I do not see the point of designing just wide enough to be annoying to those at 1024 width and not wide enough to take advantage of the next full screen resolution (ie: 1280 wide).
Yep… 960 is an astounishing magic number.
I would rather consider a flexible approach to grids in terms of sizes… just convert 960px to ems… the great font-size: 62.5% allows to set the containing div to 96ems making it even easy to implement.
I think the font size is not a problem, It depends on the current design.
But 960 is such a pretty number
I’ve been using an Adobe AIR application called BOKS to build my grids lately: http://toki-woki.net/p/Boks/ – it lets you specify a width, gutter size, column size, number of columns, etc etc. You might want to check it out!