Yahoo! 950
Taobao 950
MySpace 960
Sina 950
Netease 960
Live search 958
Sohu 950
Youku 960
Aol 960
According to the above simple analysis, it can be concluded that when building a portal website with complex page structure, development engineers invariably choose to set the page width to 950px/960px.
This is a very interesting thing. Why choose this width? What is the magic of this width value?
Shenqi 960
Designers have a soft spot for Apple. At the resolution of 1024 x 768, open Firefox:
In its natural state, the size of a Firefox form is about 974 x 650. Subtract the 7px borders on the left and right sides, and the actual size of the webpage is the red part in the above picture, with a height and width of 960 x 650.
The interesting 960 appeared like this. Yes, you can think that everything is as simple as that. Grid system first appeared in the field of graphic design. Designers love to use apples. The default width of Apple's browser is 960px, so 960 naturally appears.
The mystery behind numbers
The appearance of "nature" above is unconvincing. The designer of the Apple system chose 960 instead of other integers such as 1000 without getting drunk, which is naturally another mystery.
There are many problems in the scientific community that can be attributed to mathematics, and we also start with mathematics:
960 can be decomposed into 6 powers of 2 times 3 and 5, which makes 960 decomposed into integer multiples of the following widths:
2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,
48, 60, 64, 80, 96, 120, 192, 240, 320, 480 * * 26 species (26 = 7 * 2 * 2–2, minus 2 means removing 650.
N (960) = n (2 6 * 3 * 5) = 26 According to the above algorithm, we can get:
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 (n (1920) = n (2 7 * 3 * 5) = 30 5) = 30 According to intuition (it is not difficult to prove strictly, but it is still left to the students of mathematics department to prove), we get an interesting conclusion:
In order to maximize n (width), there are two series of width values:
Series A: …, 320,720, 1440, …
Series B: …, 480,960, 1920, …
The larger n is, the more width values can be combined. For grid systems, this means greater flexibility!
At present, most monitors support 1024 x 768 and above. In order to effectively use the screen width and ensure the flexibility of the grid, it can be seen that 960 is very suitable. In this way, under the current mainstream display, 960 has become the best width in web grid system. (Maybe in the near future, 1440 will be popular. )
correct
For websites with complex structures, many designers like to adopt 960 fixed-width layout. However, it should be noted that 960 is not a master key, and most websites do not have or need a grid system. Amazon adopted
This is a width adaptive layout, which presents information to the maximum extent. Google is simpler, with a list of topics. EBay's page is very concise, the width of the product page is adaptive, and the information is naturally smooth and noisy.
The sound is not loud, and shopping is very practical. There are many similar websites, and the width adaptive layout is more popular.
There is a very interesting website Yahoo! What seems to be a fixed-width layout can actually be converted into an adaptive width as long as one line is removed from CSS:
#page {
Width: 70em
}
for
What Yahoo! Finally, what about the fixed width layout? This may be because the fixed width layout is easier to control than the width adaptive layout. For websites with complex structures, maintainability and expansibility are very important.
Yahoo! Is a portal website that mainly displays information, and the width of 960 is more friendly for information reading (Joe
Clark wrote an interesting article about the president while reading on the screen. Various factors make Yahoo! Finally, fixed width layout (Tommy
Olson summed up the advantages and disadvantages of each layout design.
Here we only focus on the fixed-width layout, and the applicable scenario is to build a complex portal website. Width adaptive layout and corresponding grid system will not be discussed for the time being (according to different technical means, width adaptive layout can be divided into fluid layout and elastic layout. Personally, I like flexible layout and study it later.
Well, we've narrowed it down to a fixed-width web grid system. Let's get started.
Not far, 750
Remember the 800×600 monitor? It's only been a few years, but it feels like the last century. Mark Bolton made the earliest exploration:
Divide 750 into six equal parts to form a grid system, and form a two-column layout and a three-column layout with a little combination and division. Mark Boulton also studied the effect of Gutter (gap between vertical columns) on the grid. Those who are interested can read the original text or follow me down, which will be explained in detail below.
Several terms and a formula
The standard grid system includes the following parts:
Mark the total width of streamline as w, column width as c, binding line width as g, margin width as m and column number as n, and you can get the following formula:
W = c * N+g * (N- 1)+2 * m Generally speaking, the width of the binding line is twice the margin, and the above formula can be simplified as:
W = c * n+g * (n-1)+g = (c+g) * nMark c+g as c, and the formula becomes very simple:
W = C * N The above formula is the basis of grid system, which is very simple.
The origin of 950
In practical application, the margin is actually a blank edge, which does not belong to the total width from the visual point of view. Many grid designs habitually set the binding line to 10px, so the margin is 5px. When w is 960 and divided into 6 columns, the grid is as follows:
The processing of the above figure is 5px for the left and right margins. You can also center the margins on one side, such as the right side:
No matter where we put the allowance (only affecting the technical realization, not the design), what we really need to pay attention to is the part after removing the allowance:
This is what we should really pay attention to! Change the meaning of w to delete the total width of the margins, and the formula becomes:
W = N * C-g instantiate the above formula:
950 = 12 * 80 - 10
950 = 16 * 60 - 10
950 = 24 * 40- 10 This forms three common ways to cut 960 cakes.
12 x 80
16 x 60
24 x 40
Among the above three cutting methods, the greater the N, the higher the flexibility. You can choose the corresponding clipping method according to the actual complexity of the web page. On the homepage of 960 grid system, the application of 12 x 80 is displayed:
Let's take a look at the grid application of the website listed at the beginning of the last article.
Yahoo! Is a very standard 24 x 40 grid:
At present, Taobao only uses the grid system in the upper part of the mall (the layout of the two columns follows the 24×40 grid, and the main part uses another 740 grid division):
Netease is very good, using the grid system of 16 x 60:
Other sites under study (1) don't really adopt the grid system strictly.
Advantages of grid system
The "discovery" above is a bit frustrating. At present, there are very few sites that strictly adopt grid system. Why try to grid the web page?
Grid system has the following advantages:
Can greatly improve the standardization of web pages. In a grid system, the dimensions of all components in a page are regular. This can save a lot of costs for the development and maintenance of large websites.
Grid-based design can make the layout of all pages of the whole website consistent. This can increase the similarity of pages and improve the user experience.
For designers, flexible use of grid system can make many excellent and unique designs. (See the book Beyond CSS for details. )
For large websites, I believe that rasterization will be a trend and trend.
Let's discuss the golden section in the grid system.
golden section
The golden section can be summed up as a mathematical problem: for the line segment with the length of 1, it is divided into two parts: x and1–x, so:
X/ 1 = (1-x)/x is transformed into a simple quadratic equation;
X 2+x-1= 0 The positive solution is:
x
= (sqrt(5) - 1) / 2 ~=
0.6 18 This is the golden section. This proportion not only appears in painting, sculpture, music, architecture and other artistic fields, but also plays an important role in management and engineering design.
(This is a magic number in nature, similar to vacuum light speed, Planck constant, fine structure, etc. Interested in Google? )
In the field of graphic design, the golden section is widely used. For example, as shown below:
How many golden sections are there on the count?
For a 960-degree grid, the actual width is 950 degrees. In the two-column layout, the golden section is:
In the 24 x 40 scene, the closest two-column layout is 350: 590, and the column ratio is 9: 15. However, in practical use, narrow columns are often used for navigation or auxiliary information, so they do not need to be as wide as 350px. Therefore, the layout often used in practical situations is:
All of the above are rasterization in the width direction. Let's see how to apply it in the height direction.
Grid in height direction
Remember the dazzling red picture (1) in the study? Note that the height value of 560 is also amazing.
N(560) = N(2^4 * 5 * 7) = 18
560/960 ~= 0.583N(560) is relatively large, and the aspect ratio can be close to the golden section. For 560, we use a grid of 14×40:
In this way, the rasterization in both width and height directions is realized.