Study's website before the grid system, look at a group of data:

site Home Page Width px
Yahoo! 950
Taobao 950
MySpace 960
Sina 950
Netease 960
Live Search 958
Sohu 950
U Cool 960
AOL 960

listed above are the Alexa top 100 sites, and their page width 950px/960px. In addition to Microsoft's Live Search, these sites have a common feature of: page structure more complex, can be considered to be the portal-type site.

let's look at Google, YouTube, Facebook, Flickr!, eBay and other famous sites, their home page the width of no fixed rules, a common feature of: functional single-minded, page structure was relatively simple.

Based on the above simple analysis can be considered: When the complex structure of the portal page structure-type site, the development engineers invariably choose the width of the pageas 950px/960px.

This is a very interesting thing, why choose this width of it?The width of the value of what is magic ?

magical 960

designers of Applehas developed a taste.In the 1024 x 768 resolution, open Firefox:

natural state, Firefox is about the size of the form 974 x 650. subtracted 7px left and right sides of the border, the actual size of the page for the figure above the red part of the height and width of 960 x 650.

Interestingly, 960 thus emerged.Yes, you can believe that all that simple.Grid system first appeared in the field of Graphic design, designers like to use apples, apple under the browser's default width is 960px, so 960 so" natural" has come true.

The secret behind the numbers

above the" natural" appears, a close study of nature is not convincing.Apple's system designers have not drunk alcohol in the selected 960 cases, rather than some other class of 1000 integers, natural and another mystery.

scientific community, there are a lot of problems can be attributed to a mathematical problem, we proceed from mathematics:

960 can be decomposed into two 6-th power is multiplied by 3 and 5, which makes960 can be divided into the following integer 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 to remove one and 960 itself), we marked as: 

 N (960)=N (2 ^ 6 * 3 * 5)=26

according to the above algorithm, can be:

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

according to intuition (strict proof is not difficult, but still leave the mathematics to prove the students bar), we get an interesting conclusion:

To make N (width) maximum, width values are two series:
A Series: ..., 320, 720, 1440, ...
B Series: ..., 480, 960, 1920, ...

N greater, can be combined width of the value of the more. pairs of grid systems, this means that the more flexible!

now supported by most monitors support 1024 x 768 resolution and above.In order to effectively use the screen width of the grid while maintaining the flexibility, we can see that 960 is very appropriate.Thus, in the current mainstream display, the 960 has become the best web width of the grid system has.(Perhaps in the near future, it will pop 1440)

careful you might recall, at the beginning of this article lists the width of the value, 950 also appearedseveral times.950 is how come from?And 960 is the Han relations?These questions, please pay attention to the next article in this series.


This articlepublished in published in the:Design and Material (http://www.q60.org),detailed reference to the above website.