The New Generation Of Banging Hardtechno

bracerm2f · Posted: Mon 3:25, 28 Mar 2011 Post subject: 960 Grid System

Recently, when making contact with the product design to the grid design system (Grid System), some of the information collected online and articles, and finally finishing the output for your reference:

What is a grid design system?
grid design system, the Gird System (also known as grid design system, the standard size of system, program layout, the Swiss style of graphic design, graphic design style of internationalism), is a plane design methods and style. Using the fixed grid design layout, the style neat and simple, popular after World War II, has become the mainstream style of today's publication of the design.
grid design system for layout and design in a printed publication is common, web design, print layout often draw inspiration from. Grid in web design in design system used not only to inherit the neat simplicity of the style, but also significantly reduce the workload of the design; from front-end engineering point of view, this layout means self-evident advantages: the normative and the natural reusability. From the entire team of view, using the grid system can streamline the design process, facilitate the exchange, but also easy division of labor and unified style.
This is a 3 * 3 grid of 960px page design sketches, from

Why is 960px?
a good understanding of cell, but why is it 960? A large number of online search and found that both the chance there could be proof of the truth then what chance it? Many of the first designers to use Apple computers, when they were encountered during the design constraints:

1. Screen Resolution: 1024 px wide by 768 tall2. Firefox window size: 974 px wide by 650 px tall3. remove the left and right borders 7 px, the rest of the dimensions is 960 px wide by 650 px tall

width of 960 so the appearance of naturally having to sigh: Constraints are the mother of design invention

on this part of the introduction, but also can look at this document: Grids Are Good

960 can be decomposed into 2 ^ 6 multiplied by 3 and 5, which makes 960 can be divided into the following multiple of the width:

2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480

a total of 26 species (26 = 7 * 2 * 2 2, minus 2 is 1 and 960 to remove itself), we marked:

N (960) = N (2 ^ 6 * 3 * 5) = 26
Based on the above algorithm, can be:

N (360) = N (2 ^ 3 * 3 ^ 2 * 5) = 22
N (480) = N (2 ^ 5 * 3 * 5) = 22
N (720) = N (2 ^ 4 * 3 ^ 2 * 5) = 28
N (750) = N (2 * 3 * 5 ^ 3) = 14
N (800) = N (2 ^ 5 * 5 ^ 2) = 16
N (960) = N (2 ^ 6 * 3 * 5) = 26
N (1000) = N (2 ^ 3 * 5 ^ 3) = 14
N (1024) = N (2 ^ 10) = 9
N (1440) = N (2 ^ 6 * 3 ^ 2 * 5) = 34
N (1920) = N (2 ^ 7 * 3 * 5) = 30

present, most displays support 1024 x 768 and above resolution. In order to effectively use the screen width of the grid while maintaining the flexibility, we can see that 960 is very appropriate.
the width of the 960 cells under the delete column design of 12, you can have the following optional unit width: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 and 940.

the width of the 960 cells under the delete column of 16 design, the unit can be the width of the following options: 40, 100, 160, 220, 280, 340, 400 , 460, 520, 580, 640, 700, 760, 820, 880 and 940.

reference to the article: The 960 Grid System Made Easy

960 The grid design on the one hand can ensure a flexible control structure of the site layout and easy front-end development of the normative and reusability, so why not?

for more discussion:

960px is the only it?
960 is the only optimal page width it? Of course not. Current width of the page grid system is not strictly 960px, it may be 950px, for example, yahoo's YUI framework is 950px. Grid system on the introduction page to see TaobaoUED of this article. 1024 * 768 resolution will not always be the mainstream, with the development of the resolution, the next is likely to be an optimal width of 1440 (2 ^ 5 * 3 ^ 2 * 5), or a time without resolution, the page can be automatically scaled in proportion (as it is now in the mobile version of safari to see it). In addition, good design and creativity is often necessary to break the rules, raster design system is not the only available style of web publishing, will remain outside the mainstream, there are some very good non-960px page (especially the full-flash site); sometimes Meeting people on their shortcomings on the seo, or compatibility, user experience is not good enough, but the artistic point of view they are still very good. Of course, there are already 960 to achieve a good grid design css framework:
960 Grid System developed by Nathan Smith of the CSS framework, there are 12 rows and 16 columns, 24 three versions. CSS for many programmers may be completely disdain optimization, but it does the same and other code needed structure and optimization. Even if the operation is a small site, properly organized, CSS code reuse can save considerable time and cost. CSS framework is that each site allows you to have time-tested things, those boring repetitive work to them and place their focus on how to create even more inviting design!
Moreover, 960.gs not only provides a CSS framework, it also provides a printed thumbnail sheet, Firewofks, Phototshop, OmniGraffle and Vision of the template source file ... ... you can make a lot of team people use it.
it also can reduce a lot of compatibility issues with you, it is rated A-level support is yahoo browser:

Related articles:
Designing With Grid-Based ApproachThe Use of Grids in Website DesignGridding the 960Grids Are GoodThe 960 Grid System Made Easy page grid system design
ps,[link widoczny dla zalogowanych], starting from this article