In the days before LCD screens became widespread, web design needed to consider a resolution of 800×600. However, the usage rate of 800×600 resolution is now less than 2%, making it negligible. The next higher resolution, 1024×768, has a usage rate close to 50% (2010), so many websites are designed based on a width of 1024 pixels. The most common page widths are 1004 and 960 pixels.
Early web designers used a width of 1004px for pages, based on the following considerations: when opening IE at a resolution of 1024×768, the left border is 2px wide and the right scroll bar is 18px wide, resulting in a width of 1004px. However, this width setting is not conducive to the calculation of grid layouts. For example, it is difficult to evenly distribute columns in a three-column layout, so very few websites now use a width of 1004px.
Among integers smaller than 1004, the largest integer that can be divided by more numbers is 960:
Two-column layout: 960/2=480
Three-column layout: 960/3=320
Four-column layout: 960/4=240
Therefore, most designers choose 960px as the page width.
After determining the page width, the next step is to determine the content width. We usually divide the content according to the golden ratio, setting the content width to 600px, with the remaining part used for side navigation. However, the content width also needs to consider spacing, margins, and the ratio of text to images. A more standard approach is to draw a layout framework.
I. Creating Your Own Layout Framework
Creating your own layout framework is suitable for the sketching stage without using a computer. The image above shows a content layout method proposed by Jason Beaird in “Principles of Beautiful Web Design.” First, divide a 960px canvas into nine equal parts (the first two steps in the image above), then cut the first row into one-third, and finally, split each column in half to get a layout framework. Arrange content according to this layout framework (image from “Principles of Beautiful Web Design”).
II. Template Layout Framework
The 960 Grid System provides many ready-made layout frameworks in three versions: 12-column, 16-column, and 24-column.
The image above shows the 12-column style. The static webpage style images have been uploaded locally and can be accessed by clicking here. If you are designing pages using Photoshop, please directly download the PSD files.
File：960_grid.psd Size：2MB
Organizing existing content according to the layout framework will make the interface look clean and beautiful. The image below is a typical website with a 12-column layout.