first clarify a question scenarios.Research (1) that the web site for the complex structure, many designers like to use fixed-width layout of 960.But to note that 960 is not a panacea, most sites do not do not need the grid system.Amazon uses the width of the adaptive layout, to maximize the presentation of information.Google is simply the theme of some on a list.eBay is very simple page, merchandise page width adaptive, information, natural smooth, low noise, shopping is very practical.There are many similar sites, for these sites, the width of the more popular self-adaptive layout.

has a very interesting site is Yahoo!, seemed fixed-width layout, in fact remove the line as long as the CSS, you can suddenly change the width of the self-adaptive: 

 #page ( width: 70em; )

Why is Yahoo! the final choice of the fixed width layout does ?This is probably due to fixed width layout than the width of the adaptive layout easier to control.For the complex structure of the web sites, maintainability and scalability is very important.Yahoo! Is based on information display-based portal-type site, 960 the width of the reading for information more friendly (Joe Clark wrote an article about President-screen reading interesting articles).All these factors make Yahoo! Finally adopted the fixed width layout (Tommy Olsson summed up the advantages and disadvantages of each type of layout Design).

there will be only concerned with setting the width and layout, the applicable scenario is to build a complex portal-type site.For the width of the layout and the corresponding adaptive grid system, not be discussed (based on the technical means to achieve different, the width of the layout is divided into adaptive and flexible layout of fluid layouts. I personally quite like the flexibility in layout, in future we have time to research).

Well, has narrowed to a fixed width page layout grid system, then we begin.

the not too distant 750

remember 800 × 600 display is not?Although only several years later, feeling much like a thing of the last century.Mark Boulton has done a first exploration:

will be divided into 750 equal six copies, which form a grid system that is formed into a little mixthe two columns layout and three-column layout.Mark Boulton also studied the Gutter (space between the vertical bar) on the impact of the grid, there are interested can read the original text, or follow me down to see, below, elaborate on them.

a few terms and a formula

a standard grid system, including the following sections:

The total width of the Flowline is marked as W, Column width is marked as c, Gutter width is marked as g, Margin width is marked as m, Column number is marked as N, we can get the following formula: 

W = c * N + g * (N - 1) + 2 * m

Generally speaking, Gutter width is twice the Margin, the above formula can be simplified to: 

 W = c * N + g * (N - 1) + g = (c + g) * N

will be c + g is marked as C, the formula becomes very simple: 

 W = C * N

the above formula is the basis of the grid system is very simple bar.

950 origins

specific application, Margin is a gap edge, from the visual point of view are not part of the total width.Many grid design where habitually set the Gutter to 10px, so Margin is 5px. When the W is 960, divided into 6, the grid following figure:

on the map processing is all about Margin of 5px. You can also focus on the side of the Margin, for example on the right:

Whether Margin releaseWhere (only affect the technology does not affect the design), we really pay attention to is that after the Margin to remove part of:

This is what weto really care for the 950!W into the meaning of the removal of the total width of the Margin, the formula changes to: 

 W = N * C - g

the above examples of what the formula: 

 950 = 12 * 80 - 10950 = 16 * 60 - 10950 = 24 * 40 - 10

This results in 960 three common cake-cutting method.

12 x 80

16 x 60

24 x 40

the above three kinds of cutting method, N the greater the higher the degree of flexibility.According to the actual web page corresponding to the complexity of the selection of the tangent method.In the 960 Grid System home page, the show 12 x 80 Application:

we look at the study (1) web site listed at the beginning ofgrid application.

Yahoo! is a standard 24 x 40 grid:

Taobao Mall are only used on the part of thegrid system (a large two-column layout to comply with the 24 x 40 grid of the main part of the use of another set of 740 grid division):

NetEase is very good, using the 16 x 60 grid system:

study (1) of the other sitesare not really strict application of the grid system.

advantage of the grid system

above the "discovery" is to allow people a little bit frustrating.Strict application of the grid system is currently very little site, why do we still struggling to make a web page grid format?

grid system has the following advantages:

  1. can greatly increase the web page normative.In the grid system, the page size of all the components are all laws.This is a large Web site development and maintenance of speaking, can be considerable cost savings.
  2. Grid-based design, allowing the entire site layout of each page consistent.This can increase the similarity of the page to enhance user experience.
  3. For the designers, the flexible use of the grid system, can make a lot of outstanding and unique design.(See "Beyond the CSS" book)

for large web sites, I believe that would be a grid-based trend and trends.

discussed below, the golden section grid system.

Golden

golden section can be attributed to a mathematical problem: For the length of a line segment will be divided into two parts x and 1 - x, making: 

 x/1 = (1 - x)/x

into a simple quadratic equation: 

 x ^ 2 + x - 1 = 0

positive solution is: 

 x = (sqrt (5) - 1)/2 ~ = 0.618

This is the golden section.This ratio arises not only in areas such as painting, sculpture, music, architecture and other arts in management, engineering design also has a significant role.(This is nature's magic number, there is a similar vacuum speed of light, Planck's constant, fine structure, etc., interested in Google bar)

in the graphic design field, golden section points are widely used.This figure such as the following:

count the number of the number of golden section above?

for the 960 grid, the actual width is 950. two-column layout, gold divided into:

for 24x 40 scenes of the two columns closest to the golden section layout is 350: 590, the number of columns as compared to 9: 15. However, the actual use, because the narrow column is often used to do navigation or put auxiliary information, does not need such a wide 350px.Therefore, the actual cases, are often used in the layout is:

mentioned above are the width direction of the grid of, let's take a look athow to apply a high degree of direction.

a high degree of direction of the grid

recall study (1) goes on very dazzling red figure do?Note that a high value of 560 is also very amazing.

 N (560) = N (2 ^ 4 * 5 * 7) = 18560/960 ~ = 0.583

N (560) relatively large, yet allowing high aspect ratio close toGolden.For the 560, we use 14 x 40 grid:

In this way, we had a width and height of both directions of realization of the grid.

the next one will elaborate on the 960 grid system of modular applications.


This chapterfrom the:Design and Material (http://www.q60.org),visit the above web site.