Best width in Web grid system: 960px

home page width of px
Yahoo! 950
Taobao 950
MySpace 960
Sina 950
NetEase 960
Live Search 958
Sohu 950
Youku 960
AOL 960

Listed above are the Alexa Global Top 100 sites, their home page width of 950px/960px. In addition to Microsoft's live Search, these sites have a common feature: the page structure is more complex, can be considered a portal site.

Then look at Google, YouTube, Facebook, flickr!, ebay and other well-known sites, their home page width is not fixed rules, the common feature is: functional specificity, relatively simple page structure.

According to the above simple analysis can be considered: when building a complex page structure portal site, development engineers invariably choose to set the width of the page as 950px/960px.

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

The Magical 960

The designers have a passion for Apple. At the resolution of 1024 x 768, open Firefox:

In a natural state, the Firefox form is about 974 x 650 in size. Minus the 7px border, the actual size of the page is the red portion of the above image, width is 960 x 650.

The funny 960 just came up. Yes, you can think of everything as simple as that. Grid system first appeared in the field of graphic design, designers love to use Apple, Apple under the browser's default width of 960px, so 960 so "natural" to appear.

The mystery behind the numbers
The above "nature" appears, the scrutiny of nature is not convincing. The designers of the Apple system chose 960 without drunkenness, rather than anything else, such as 1000, which is another mystery.

There are many problems in the scientific community that can be summed up in math, and we start with math:

960 can be broken down to 2 of 6 times 3 and 5, which allows the 960 to be divided 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, 160, 192, 240, 320, 480

A total of 26 species (26 = 7 * 2 * 2-2, minus 2 are removed 1 and 960 themselves), we mark as:

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

In the same vein you can get:

N () = N (2^5 * 3 * 5) = 6 * 2 * 2-2 = 22
N (750) = N (2 * 3 * 5^3) = 2 * 2 * 4-2 = 14
N (a) = N (2^5 * 5^2) = 6 * 3-2 = 16
N (1000) = N (2^3 * 5^3) = 4 * 4-2 = 14
N (1024) = N (2^10) = 11-2 = 9
N (1920) = N (2^7 * 3 * 5) = 8 * 2 * 2-2 = 30

According to intuition (hard proof is not difficult, but still left to the math department students to prove it), we have an interesting conclusion:

To make the maximum of n (width), the value of width must be ..., 480, 960, 1920, ...

The larger the N, the greater the number of widths that can be combined. For grid systems, this means more flexibility!

At present, most monitors support 1024 x 768 and above resolution, 480 is too narrow, 1920 is too wide (too wide to read), so 960 becomes the best width in the Web grid system. (added: 480 can be applied to the grid design of Flash)

Carefully you may recall that 950 of the width values listed at the beginning of this article also appeared several times. How did 950 come in? What's the relationship with 960? These questions, please pay attention to the next article in this series.